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

Problema para aparece o icone menu.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Header, Flexbox e @import

por Diogo da Cruz Mello
| 26k xp | 53 posts
Auxiliar Técnico de Laboratório

Eu fiz o procedimento porem não aparece o ícone do menu.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/styles/styles.css">
    <link rel="stylesheet" href="src/styles/reset.css">
    <title>AluraBooks</title>
</head>
<body>
    <header class="cabecalho">
        <span class="cabecalho__menu-hamburguer"></span>
        <img src="./src/image/Logo.svg" alt="Logo da Alurabooks">
        <a href="#"><img src="src/image/Favoritos.svg" alt="Icone de Favoritos"></a>
        <a href="#"><img src="src/image/Sacola.svg" alt="Icone de Sacola"></a>
        <a href="#"><img src="src/image/Usuario.svg" alt="Icone de Usuario"></a>
        <a class="cabecalho__menu-hamburguer" href=""></a>
    </header>
</body>
</html>
5 respostas
por Diogo da Cruz Mello
| 26k xp | 53 posts
Auxiliar Técnico de Laboratório

Header

.cabecalho__menu-hamburguer {
    height: 24px;
    width: 24px;
    background-image: url("../image/Menu.svg");
}

Styles.css

@import url("../styles/header.css");


:root {
    --cor-fundo: #EBECEE;
    /* --cor-botao-primario:; */
    --cor-botao-segundario: #EB9B00;

    --cor-primaria: #000000;
    --cor-segundaria: #FFFFFF;
    --cor-tercerizada: #EB9B00;

}

body {
    background-color: var(--cor-fundo);
}

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

por Diogo da Cruz Mello
| 26k xp | 53 posts
Auxiliar Técnico de Laboratório

Como mostrado a cima, não aparece o icone menu, mas aparece usado outras tags que não seja span.

solução!
por Diogo da Cruz Mello
| 26k xp | 53 posts
Auxiliar Técnico de Laboratório

Consegui resolver o problema.

por Karen Regina
| 18.2k xp | 1 posts

Ola Diogo, Quais tags usou para resolver o problema por favor?

por Ericson Barbosa Nascimento
| 66.3k xp | 1 posts
CEO

A imagem só apareceu quando adicionei a funcionalidade CSS:

display: inline-block;

Ficou assim:

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