Forma alternativa de usar o image replacement?

Gostaria de saber se a solução que eu encontrei poderia causar alguns transtorno futuro, pois, para evitar o gasto extra de memoria com o text-indent eu escolhi utilizar o visibility e colocando o nome do link como parágrafo para que seja escondido separadamente da imagem.

HTML

<ul class="icones-sociais">
                <li><a class="github" href="http://github.com/joaodasilva"><p>Github</p></a></li>
                <li><a class="twitter" href="http://twitter.com/joaodasilva"><p>Twitter</p></a></li>
                <li><a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"><p>LinkedIn</p></a></li>
            </ul>

CSS

.icones-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
}

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

.github p {
    visibility: hidden;
    margin: -10px;
}

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

.twitter p {
    visibility: hidden;
    margin: -10px;
}


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

.linkedin p {
    visibility: hidden;
    margin: -10px;
}

Gostaria de saber se a utilização desse método poderia é uma boa opção para fazer o image replacement.

Muito obrigado pela ajuda.