Qual o motivo pelo qual os ícones não levam aos sites?

Pessoal, segui os passos do vídeo, entretanto, usei o seguinte código:

                <ul>
                    <div>
                        <li class="lateral" id="github" href="https://github.com/joaodasilva">
                            <a>
                                Github
                            </a>
                        </li>
                        <li class="lateral" id="twitter" href="https://twitter.com/joaodasilva">
                            <a>
                                Twitter
                            </a>
                        </li>
                        <li class="lateral" id="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"> 
                            <a>
                                Linkedin
                            </a>
                        </li>
                    </div>
                </ul>

E no CSS usei:

#github{
    display: inline-block;
    background-image: url(github.png);
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    /*
    color: transparent;
    font-size: 0;*/
}

#linkedin{
    display: inline-block;
    background-image: url(linkedin.png);
    width: 40px;
    height: 40px;
    text-indent: -9999px; 
    /*
    color: transparent; 
    font-size: 0; */
}

#twitter{
    display: inline-block;
    background-image: url(twitter.png);
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    /*
    color: transparent; 
    font-size: 0; */
}