As palavras entre as tags <a><a/> continuam aparecendo

As palvras "Github", "LinkedIn" e "Twitter" continuam aparecendo (a não ser que as comente como mostrado no trecho) mesmo usando a técnica replacement. O que estou fazendo de errado?

Segue o trecho HTML:

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

Segue o trecho CSS:

.icones-redes-sociais li {
    display: inline-block;
}

/*...alguns trechos aqui...*/

icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    /*text-indent: -9999;*/
}

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

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

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