Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ander de Assis

ícones menu HTML

Por , em Desenvolvimento frontend

Recommended Posts

Ander de Assis    0

Ander de Assis
Postado

BOA NOITE PESSOAL, ESTOU CRIANDO UM SITE E SOU BEM LEIGO AINDA PODERIAM ME AJUDAR?

 

QUERO COLOCAR ÍCONES NO MENU AO INVÉS DE ESCREVER!

PESQUISEI NA INTERNET O COMANDO SPAN QUE SERIA POSSÍVEL EXECUTAR ESSA AÇÃO, POREM NÃO ESTA FUNCIONANDO EM NENHUM DOS NAVEGADORES.

SOMENTE O MOZILA QUE RECONHECE O COMANDO "HOVER" O CHROME E EXPLORE NÃO RECONHECE O HOVER E NEM SPAN.

SE PODEREM ME DAR UMA FORÇA O CODIGO ESTA LOGO A BAIXO..

 

OBRIGADO!!

 

 

    ARQUIVO HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>WA STORES</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

        <div id="logo">
             <img src="C:\Users\Anderson\Desktop\wa\img\wa stores.png"/>
             
             
     </div>
        <div id="menu">
            <ul>
                <li><span class="face"></span><a href="#">home</a></li>
                <li><a href="#">home</a></li>
                <li><a href="#">home</a></li>
               
                
                
        

            </ul>
        </div>

</body>
</html>

 

=====================================================================================

 

                                               ARQUIVO CSS

@charset "UTF-8";
*{margin: 0;padding: 0;}
#logo{position: absolute; left: -480px; top: -200px;}
#menu {width: 100%; height: 60px; background: #000000 ; margin: 0; float: left;}/* fundo menu   */
#menu ul {float: left; list-style: none; margin: 0; padding: 0; width: 100%; } /* posição menu left right*/
#menu ul li {float: left; font: 16px roboto;}/* posição menu top low */
#menu ul li:hover {background: #eee;}
#menu ul li a { color: #888;text-decoration: none; padding: 20px; display: block;}
#menu ul li .face{background: url(C:\Users\Anderson\Desktop\wa\img\home.png); float: left; width: 100%; padding:0; margin-bottom: 0;  }

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Tenta definir uma altura para o <span>.

 

Voce quer adicionar um icone ao lado de cada menu? Tente usar pseudo-elemento para isso, as vezes fica até mais bonito no código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Assef    1

João Assef
Postado

Olá Ander,

 

Já tentou utilizar o flaticon?

 

A Implementação muito fácil, vá até o site crie uma conta crie seu pacote faça o download e utilize em seu site, isso tudo gratuitamente.

 

Olha a forma de inserir, também tem no site essa explicação. 

<head> 
...

<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"> 
...

</head>

 

Examplo: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • FabianoSouza
      Recuperar SPAN que tenha 2 atributos definidos
      Por FabianoSouza
      Pessoal, estou quebrando a cabeça para retornar o elemento que tenha dois atributos definidos no HTML.
       
      To tentando isso, mas sem sucesso:
       
      var elTpReporte = document.querySelectorAll('span[class="sp-tp-reporte"], span[data-click="1"]')[0] OU var elTpReporte = document.querySelectorAll('span[class="sp-tp-reporte"],[data-click="1"]')[0]  Ou Seja, preciso pegar a primeira SPAN (pois são duas) que tenha os atributos class = sp-tp-reporte E que tenha também o atributo data-click= 1
       
      Tô errando na sintaxe... podem me ajudar?
       
      Grato.
    • andre2654
      Animação de meleca abrir ao clicar
      Por andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • Guss
      Problema com código html
      Por Guss
      c´pod
    • petrochinski
      Hover -> Dropdown é possível ?
      Por petrochinski
      Eu tive uma ideia muito boa, mas não consegui fazer ainda.
       
      A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse.
       
      Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse.
       
      Grato :)
    • AsxCle
      Hover
      Por AsxCle
      Olá pessoal
       
      Estou com problema ao utilizar o hover, criei um botão que tem uma imagem como background, queria que toda vez que eu passar o mouse, o botão ficaria escuro, ou seja, diminuiria a transparência do mesmo. Já tentei colocar um segundo background com opacidade de 0, e quando passasse o mouse, opacidade ficaria 1, mas não deu certo. Poderiam me ajudar?
       
      HTML
       
      <!DOCTYPE html>
      <html lang="pt-br" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>--.--</title>
          <link rel="stylesheet" type="text/css" href="--..--.css">
          <!--<link href="css/hover.css" rel="stylesheet" media="all">-->
        </head>
        <body>
          <h1 id="pcp"> 選べ </h1>
          <button class="first">
          </button>

        </body>
      </html>
       
      CSS 
       
      .first {
          background-image: url(001-T.png);
        }
       
      Tudo que eu tentei não deu certo, já criei até um subclass com :before, mas em vão, então só restou isso do css, pois é o background.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito