Entrar Ainda não tem acesso?
4
respostas

Os ícones não estão aparecendo

Referente ao curso CSS: dispondo elementos com Flexbox e Grid, no capítulo Mais funcionalidades do Flexbox e atividade Terminando o cabeçalho

por Henrique de Souza Pereira
| 66.7k xp | 13 posts
Estagiário

Olá! Estou com um problema no meu código onde os ícones simplesmente não aparecem na tela.

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HZC | Home</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"
    />
    <link rel="stylesheet" href="assets/css/reset.css" />
    <link rel="stylesheet" href="assets/css/estilos.css" />
  </head>
  <body>
    <header class="cabecalho">
      <button class="cabecalho__menu" aria-label="Menu"><i></i></button>
      <img
        src="assets/img/logo.svg"
        class="cabecalho__logo"
        alt="Logotipo da HZC"
      />
      <button class="cabecalho__notificacao" aria-label="Notificação">
        <i></i>
      </button>
    </header>
  </body>
</html>

CSS

@font-face {
  font-family: 'icones';
  src: url(../font/icones.ttf);
}

body {
  background-color: #1d232a;
  font-family: 'Open Sans', 'icones', sans-serif;
  color: #fff;
}

.cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #15191c;
  padding: 8px 16px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}

cabecalho__menu i::before {
  content: '\e904';
  font-size: 24px;
}

cabecalho__notificacao i::before {
  content: '\e906';
  font-size: 24px;
}
4 respostas
por MARCELO FREDERICO SLABCOUSKI BRANCO GARCIA
| 131.7k xp | 156 posts
Instrutor de Informática

Boa tarde Henrique,

Aparentemente tudo está correto pelo código.

Minha pergunta inicial é: a pasta 'font' está dentro de assets? pois no seu código vc utiliza assim:

@font-face {
  font-family: 'icones';
  src: url(../font/icones.ttf); /* caminho da pasta se estiver dentro de assets */
}
por Henrique de Souza Pereira
| 66.7k xp | 13 posts
Estagiário

Oi Marcelo!

Conferi a pastinha e sim, a pasta font está dentro de assets, assim como a pasta css e img. Ainda não sei o que está errado :(

por MARCELO FREDERICO SLABCOUSKI BRANCO GARCIA
| 131.7k xp | 156 posts
Instrutor de Informática

Boa noite Henrique,

Nas suas classes cabecalho__menu e cabecalho__notificação está faltando um ".", então se colocar no seu código do modo a baixo verá que funcionará.

.cabecalho__menu i::before {
  content: '\e904';
  font-size: 24px;
}

.cabecalho__notificacao i::before {
  content: '\e906';
  font-size: 24px;
}
por Henrique de Souza Pereira
| 66.7k xp | 13 posts
Estagiário

O famoso erro por causa de um ponto ou uma vírgula kkkkkk, muito obrigado!!