Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

ÍCONES NÃO APARECEM [POIS É]

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

por IAGO SOUZA VILA NOVA
| 59.8k xp | 9 posts

Já tentei várias das soluções de outros colegas e não funcionaram, nem colocando o font-family etc. Me certifiquei de que o arquivo está lá e pelo atalho cmd + click consigo acessar o arquivo pelo próprio VSC, o que é estranho é que no console dá um erro "GET file:///assets/font/icones.ttf net::ERR_FILE_NOT_FOUND, pois bem, copiei o relative path e colei na URL e continuou dando o mesmo erro. Já revirei tudo e não achei uma solução pra mostrar meus ícones.

HTML

`

<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="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.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">
</head>

<body>

    <header class="cabecalho">
        <button class="cabecalho__menu"><i></i></button>
        <img src="assets/img/logo.svg" alt="Logo da HZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao"><i></i></button>
    </header>

</body>
`

E O CSS

`@font-face { font-family: 'icones'; src: url(assets/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 12px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16); }

.cabecalho__menu i::before{ font-family: 'icones'; content: "\e904"; }

.cabecalho__notificacao i::before{ font-family: 'icones'; content:"\e906"; }`

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

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

6 respostas
por Valter Ferreira Da Silva
| 440.4k xp | 25 posts
Desenvolvedor back-end

Você tem que passar o link do seu css por ultimo na head do html. Nessa ordem :

{<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"> }

por IAGO SOUZA VILA NOVA
| 59.8k xp | 9 posts

Infelizmente nada feito.

por Bárbara Eduarda Rocha
| 159.3k xp | 6 posts

Oi tudo bem? depois de eu me matar para achar algo consegui essa solução: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

veja que no css adicionei o font family e troquei a tag "i" pela "e" aí sim funcionou - esse curso é horrivel alias o instrutor erra em muitas coisas e não são corrigidas ate mandei uma valiação hoje em forma de pergunta

solução!
por Lucelio Pereira da Silva
| 40.3k xp | 10 posts
Técnico De Suporte Jr

Olá Iago, tudo bele por ai? Então, pelo seu código só vejo uma diferença do meu, os ícones são um arquivo .ttf e estão dentro da pasta font que é diferente de onde esta o estilo.css

url(../font/icones.ttf) - esse caminho no estilo.css os .. quer dizer que ele vai voltar uma pasta anterior (sair da css / entrar em font / e lá dentro achar o arquivo icones.ttf

url(assets/font/icones.ttf) - esse seu caminho a falta dos .. é como se ele não voltasse, então ele está procurando essas pastas dentro da pasta css (dentro da css ele vai procurar assets / na assets ele vai entrar em font / e lá dentro procurar o arquivo icones.tff

por Mateus
| 21.5k xp | 53 posts
por Mateus
| 21.5k xp | 53 posts

Consegui!! No vs code vc aperta / dentro do url ("") e vai navegando pelos arquivos até achar o arquivo dos icones. quando achar você REETIRA a barra. tem que ficar assim:

@font-face {
    font-family: 'icones';
    src: url("flex-e-grid-main/assets/font/icones.ttf");
}