(+ 1) Meus icones não aparecem | CSS: dispondo elementos com Flexbox e Grid

11
respostas

por Jardson Peixoto de Araújo

| 36.5k xp | 13 posts

Após ler e tenta a soluções dos colegas em outros tópicos vim aqui mostra meu cogido e pedir que se possível alguém me dê uma luz.

<!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="css/reset.css">
<link rel="stylesheet" href="css/istilos.css">


</head>
<body>
    <header class="cabecalho"> 
        <button class="cabecalho__menu"><i></i></button>
        <img src="img/logo.svg" alt="LogotipodaHZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao"><i></i></button>
    </header>    
</body>
</html>

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

body{
    background-color:#1D232A;
    font-family: 'Open Sans','icones', sans-serif;
    color:#ffffff;
}
.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) ;
}

.cabecahlo__menu i ::before{
    content: "\e904";
    font-size: 24px;
}

.cabecahlo__notificacao i ::before{
    content: "\e906";
    font-size: 24px;
}

11 respostas

por Guilherme Ferreira

| 136.3k xp | 3 posts

Suporte TI & Financeiro

14/12/2022

Daí Jardson,

Rapaz acho que você errou o nome da sua classe... ao invés de chamar cabecalho_notificacao você aplicou os pseudo-elementos na cabecahlo_notificacao.

Acredito que seja esse o equívoco.

por Jardson Peixoto de Araújo

| 36.5k xp | 13 posts

14/12/2022

kkkkk eu corrigir o erro e mesmo assim não apareceu

por Jardson Peixoto de Araújo

| 36.5k xp | 13 posts

14/12/2022

fiz passo a passo não fei o que ta errado, pode ser o caminho da fonte se for poderia me da uma alternativa.

<!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="stylesheet" href="css/reset.css">
<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="css/istilos.css">


</head>
<body>
    <header class="cabecalho"> 
        <button class="cabecalho__menu" aria aria-label="Menu"><i></i></button>
        <img src="img/logo.svg" alt="LogotipodaHZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao" aria aria-label="Notificação"><i></i></button>
    </header>    
</body>
</html>

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

body{
    background-color:#1D232A;
    font-family: 'Open Sans','icones', sans-serif;
    color:#ffffff;
}
.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;
}

.cabecalho__logo{
    width: 40px;
}

por VICTOR GOMES DE ALMEIDA

| 122k xp | 6 posts

Analista

17/12/2022

Tenta colocar aspas simples na scr da @font-face e quando chamar os códigos dos ícones

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

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

.cabecalho__notificacao i ::before{
    content: '\e906';
    font-size: 24px;

por Marcos Vinicius Monteiro De Oliveira

| 145.6k xp | 8 posts

18/12/2022

confere se o import ta vindo da pasta certa

por Guilherme Lima de Oliveira

| 68k xp | 1 posts

Advogado

19/12/2022

Opa, Jardson, depois de chamar a classe, acho que você incluiu um espaço no o "i::before"

Tenta trocar de:

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

.cabecalho__notificacao i ::before{
    content: "\e906";
    font-size: 24px;
}

Para ficar assim:

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

.cabecalho__notificacao i::before {
    content: "\e906";
    font-size: 24px;
}

Vê se roda certinho aí :)

por Yuri Andrey De Souza Picanço

| 110.3k xp | 12 posts

Freelancer

30/12/2022

Jáardson, comparei o seu código com o meu e a única diferenca que encontrei foi essa

src: url(../font/icones.ttf);

src: url('../font/icones.ttf');
content: '\e904';
content: '\e906';

**Troque aspas duplas por aspas simples.

por Elias

| 57.6k xp | 26 posts

30/12/2022

Verifica no seu código nessa linha, acredito que voce tenha errado na escrita do código, espero que de certo. como está:

<link rel="stylesheet" href="css/istilos.css">

alterando para:

<link rel="stylesheet" href="css/estilos.css">

por Elias

| 57.6k xp | 26 posts

30/12/2022

consegui resolvendo da seguinte maneira, nesse link será o arquivo https://cursos.alura.com.br/course/css-dispondo-elementos-flexbox-grid/task/98086 da aula 02, será preciso completar com o código que voce já tinha ou então como eu fiz acompanhei a aula e fui inserindo o código novamente, acredito que tenha sido a forma em que professor organizou os arquivos e pasta, espero ter te ajudado! abraços e bons estudos!

por FABIO BATISTA CLAUDINO

| 52.3k xp | 5 posts

08/01/2023

Salve pessoal! Eu também estou com o mesmo problema, os meus ícones não aparecem. Aparece um retangulo vazio no lugar do ícone.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
    <title>HZC | Home</title>
</head>
<body>
    <header class="cabecalho">
        <button class="cabecalho__menu" aria-label = "Menu"><i></i></button>
        <img src="assets/img/logo.svg" alt="Logotipo da HZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao" aria-label = "Notificação"><i></i></button>
    </header>
</body>
</html>

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

body {
    background-color: #1D232A;
    font-family:'Open Sans','icones' sans-serif; /*aqui chamamos o icones carregado do @font-face */
    color: #FFFFFF;
}

.cabecalho {
    display: flex; /*Cria os containers*/
    justify-content: space-between; /*Distribui os containers horizontamente*/
    align-items: center; /* Alinhar os itens verticalmente dentro do flex container */
    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__logo {
    width: 40px;
}

.cabecalho__notificacao i::before {
    content: "\e906";
    font-size: 24px;
}

por FABIO BATISTA CLAUDINO

| 52.3k xp | 5 posts

08/01/2023

Achei meu erro! Faltou uma vírgula depois do 'ícones' no font-family do body!

Chegou a hora de transformar