ícones

Oi Allan, tudo certo?

Não consigo ver seu código, você pode usar o botão "inserir código" aí vamos conseguir te ajudar melhor.

Com relação ao font-size: 0, ele funciona de fato, o problema é que muitos sistemas operacionais mobile tem um tamanho mínimo de fonte, o faz com que o texto acabe aparecendo. Daria para usar isso com o color: transparent também, mas se o usuário selecionar o texto vai aparecer.

Recomendo mais o text-indent pois é mais seguro. Se você quer ver prós e contras de várias técnicas de image replacement, o CSS Tricks fez esse guia com 9 técnicas para image replacement que podem te dar um overview.

Abcs!

  <ul class="icones-redes-sociais">
    <li><a class="github" href="https://github.com/joaodasilva">Github</a></li>
    <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>
    </nav>

.icones-redes-sociais a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -99999px;
}
.icones-redes-sociais li{
  display:inline;
}
.github {
    background-image: url(github.png);
}
.twitter {
    background-image: url(twitter.png);
}
.linkedin {
    background-image: url(linkedin.png);
}
.github:hover{
  background-color:black;
}

Desculpa, estou aprendendo ainda! Mas, obrigado pela dica do image replacement.

Allan,

Tranquilo, se você ter uma rotina bacana de estudos aqui na Alura vai ficar fera! :)

Com relação a sua dúvida, repare que os links estão dentro dos <li>. Se você deixar sem o display inline ou inline-block, cada item dessa lista vai ocupar a linha inteira, por isso do inline no LI.

Fiz esse Jsbin aqui para você ver a diferença.

Por padrão todo LI é bloco, ocupa a linha toda, aí se quisermos que ele fique com o tamanho do conteúdo que está lá dentro dele, manda um inline.

O problema do inline é que se um elemento tem ele como display, ou é o display dele por padrão, você não consegue especificar uma largura/altura. Aí que entra em cena o inline-block.

Espero ter ajudado,

Abcs e bons estudos!