2
respostas

Ícones aparecem assim: □

Boa tarde, estou tentando importar os ícones, já tentei diversas formas aqui do fórum, porém não consigo importar e eles aparecem assim:

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

Segue meu estilos.css, vejo que a chamada da notificação não muda de cor quando declaro o "i", não sei se é um problema.

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

Meu HTML:

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

2 respostas

Opa, tudo bem com você?

Creio que o seu erro está na parte "src" do @font-face. O motivo é porque a pasta css já está dentro da pasta assets, e no "src" você colocou src: url(assets/font/icones.ttf), o certo seria src: url(../font/icones.ttf). Experimente colocar desse jeito, acredito que resolva.

Feliz 2023 para você. Abraços!

Cara muito provavelmente é o teu html que não tá referenciando corretamente os ícones. Fiz um teste aqui usando o fontawesome e funcionou.

<head>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">
</head>

<body>
    <header class="cabecalho">
        <button class="cabecalho-menu">
            <i class="fas fa-bars"></i>
        </button>
        <img src="logo.svg" alt="Logotipo da HZC" class="cabecalho-logo">
        <button class="cabecalho-notificacao">
            <i class="fas fa-bell"></i>
        </button>
    </header>
</body>

olhei aqui e um erro que percebi: <meta name="viewport" content="width=device-width", initial-scale=1.0" /> o certo seria <meta name="viewport" content="width=device-width, initial-scale=1.0" />