Icones lado a lado e links em cada linha

Olá a todos, essa foi a maneira que encontrei de deixar os ícones da atividade 05 lado a lado sem "afetar" os links do menu de navegação:

parte do HTML:

<aside>
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="portifolio.html">Portifólio</a></li>
                    <li><a href="bio.html">Sobre min</a></li>
                    <li><a href="Blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
           <ul>
                <li><a href="https://github.com/git-joaodasilva"><img src="github.png" alt="github"></a></li>
                <li><a href="https://twitter.com/twitter-joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
                <li><a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508"><img src="linkedin.png" alt="LinkedIn"></a></li>
            </ul>
        </aside>

e aqui o código em CSS:

li {
    display: inline-block;
}

nav li{
    display: block;
}

basicamente, redefini o <li.> para todos ficarem na mesma linha e depois coloquei o comando especifico que afeta só o li que esta dentro da tag nav pra voltar a ser block, que é o padrão, e o resultado fica muito parecido com a pagina exemplo. :)

é simples, mas só queria compartilhar nesse fórum e é isso haha.