icone! | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Oi, Geovane, tudo bem?

Para deixar os elementos em linha, você tem algumas opções, uma delas é o inline-block que foi o que usei. Segue o exemplo:

<body>
    <footer>
      <nav class="social-medias">
        <ul class="itens">
          <li class="itens-icon">
            <a href="#"><img src="instagram.png" /></a>
          </li>
          <li class="itens-icon">
            <a href="#"><img src="twitter.png" /></a>
          </li>
          <li class="itens-icon">
            <a href="#"><img src="linkedin.png" /></a>
          </li>
        </ul>
      </nav>
    </footer>
  </body>

E o css:

.social-medias{
    width: 100%;
    height: 10rem;
    margin: 0 auto;  
}
.itens{
    width: 500px;
    height: 100px;
}
.itens-icon{
    display: inline-block;
    list-style: none;
    margin: .5rem;
}
.itens-icon > a{
    text-decoration: none;

}
 .itens-icon > a > img{
    width: 20px;
    height: 20px;
}

O resultado:

Para saber mais: https://www.w3schools.com/css/css_inline-block.asp