Icones não aparecem Image Replacement | HTML5 e CSS3 I: Suas primeiras páginas da Web

Boa tarde, não consigo enxergar o erro no código, o caso é que os icones das redes sociais não aparecem. As minhas imagens estão no diretorio img (assim como meu aquivo css esta em um diretorio com nome css). Já tentei de diversas formas:

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

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

.github {
    background-image: url("img/github.png");
}
.github {
    background-image: url('/img/github.png');
}

e mesmo assim não funciona. Segue abaixo o código HTML e CSS

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Biografia - João da Silva</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/bio.css">
        <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
    </head>
    <body>
        <main>
            <h1>Sobre mim</h1>

            <p>Moro em São Paulo atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, durabilidade e que agregam valor</em> para meus clientes.</p>

            <p>Trabalho usando a web, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor:ECMASCript). Crio sites para todos, seguindo as procipais diretivas de acessibilidade, responsividade e web semantica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo.<strong>Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.</strong></p>

            <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada.</strong></p>

            <blockquote>
                <p>"João é o melhor desenvolvedor front-end com quem ja trabalhei. Muito eficiente e muito capaz. Recomendo sem duvidas.!"</p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <h2>Experiência</h2>

            <blockquote>
                <p>"João domina as técnologias como ninguem. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes."</p>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>
            <p>Ja desenvolvi projetos para grandes empresas como <a href="#">BMW</a>, <a href="#">UOL</a>, IBM. Neles o principal era entregar um experiência imersiva, para o usuário final sem descuidar do desempenho e da acessíbilidade da página.</p>    

            <p>Também ja fui contratado para transformar grandes portais como Terra, G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o contéudo e reescrever o código de forma mais responsável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meus conhecimentos para a comunidade. Para isso, ja dei diversas palestras e mantenho um blog.</p>
        </main>

        <img src="img/eu.jpg" alt="Foto de João da Silva">

        <aside>
            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portifólio</a></li>
                    <li><a href="#">Sobre min</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-sociais">
                <li><a href="#" class="github">Github</a></li>
                <li><a href="#" class="linkedin">Linkedin</a></li>
                <li><a href="http://twitter.com" class="twitter">Twitter</a></li>
            </ul>
        </aside>

        <footer>
            &copy; João da Silva 2017.
        </footer>
    </body>
</html>

Aqui vai o CSS

body {
    background-color: #F2FFFC;
    font-family: "Crimson Text", serif;
    font-size: 20px;
}

main h1 {
    font-size: 60px;
    background-color: #851944;
    color: #F2FFFC;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 20px;
    margin: 0px;
    text-transform: uppercase;
}

main a {
    color: #851944;
}

h2 {
    font-size: 40px;
    font-family: "Open Sans Condensend", sans-serif;
}

p {
    text-align: justify;
    margin: 30px 0;
}

blockquote {
    background-color: #D3DDDA;
    padding: 16px;
    border: 10px solid #C2CCCA;
    width: 250px;
    margin: 0px;
    box-sizing: border-box;

}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    padding: 20px;
    font-family: "Open Sans Condensend", sans-serif;
}

aside ul {
    list-style: none;
}

nav h1{
    font-size: 30px;
    margin-bottom: 25px;
}

nav a {
    color: inherit;
}

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

footer {
    text-align: center;
    color: #F2FFFC;
    background-color: #000;
    padding: 20px;
}

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

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

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

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

Mergulhe em programação