1
resposta

estou fazendo algo errado qu alguns icones na parte superior não estão aparecendo

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Luiz Henrique. Como vai?

Analisando a sua imagem, percebo que os ícones do "Menu Hambúrguer" (canto superior esquerdo) e da "Sacola/Perfil" (canto superior direito) realmente não estão sendo renderizados no cabeçalho. Esse é um problema muito comum ao trabalhar com projetos que utilizam fontes de ícones ou caminhos de imagens locais.

Existem três causas principais para isso estar acontecendo no seu projeto de HTML e CSS:

1. Caminho Relativo do Arquivo (Causa mais comum)

Verifique se a pasta de imagens está no mesmo nível do seu arquivo HTML. Se o seu ícone estiver dentro de uma pasta chamada img, o seu código deve estar assim:
<img src="img/Menu.svg" alt="Menu">.

  • Dica: Se o ícone aparece no rodapé mas não no topo, pode ser que você tenha movido o arquivo HTML para dentro de uma subpasta, o que exige que você mude o caminho para ../img/Menu.svg.

2. Extensão do Arquivo

No curso da AluraBooks, os ícones costumam ser arquivos .svg. Verifique se no seu código você não digitou acidentalmente .png ou .jpg. O navegador não encontrará a imagem se a extensão estiver errada.

3. Classe Invisível no CSS

Como você está estudando Mobile-First, é possível que exista alguma regra no seu CSS (como um display: none) aplicada às classes desses ícones que ainda não foi "anulada" ou que foi aplicada por engano no seletor geral em vez de apenas no Media Query para desktop.


O que você pode fazer para testar agora:

  1. Inspecionar Elemento: Clique com o botão direito onde o ícone deveria estar e selecione "Inspecionar". Vá na aba "Console". Se houver uma mensagem em vermelho dizendo GET ... 404 (Not Found), o erro é o caminho da imagem (item 1).
  2. Verifique o Cabeçalho: Veja se você não esqueceu de fechar alguma tag <div> ou <ul> no cabeçalho. Às vezes, um erro de fechamento faz com que o navegador ignore os elementos seguintes.

Se você puder colar aqui o trecho do seu código HTML referente ao <header> e a parte do CSS que estiliza os ícones, consigo te dizer exatamente qual linha precisa ser ajustada!

Espero que possa ter lhe ajudado!