Problemas com os ícones sociais, essa alternativa também é válida?

Bem, como relatado em outros tópicos solucionados, tive problemas na exibição de acordo com o exercício, mesmo com uso da propriedade inline-block acredito que a estrutura de lista existente atrapalhe isso de funcionar, também não gostei muito do uso da propriedade text-ident* nesse caso. Então pensei como solução o uso de div e da propriedade color: transparent.

HTML:

<div class="icons_social">
    <a class="github" href="//www.github.com">Github</a>
    <a class="twitter" href="//www.twitter.com">Twitter</a>
    <a class="likedin" href="//www.linkedin.com">Linkedin</a>
</div>

CSS:

.icons_social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: transparent;

}

.github {
    background-image: url(github.png);
}

.twitter {
    background-image: url(twitter.png);
}

.likedin {
    background-image: url(linkedin.png);
}

Fazendo dessa forma aconteceu o efeito desejado e considerei mais limpo. Essa seria uma boa solução? O fato de não utilizar a estrutura em lista (li) torna o código menos semântico?