Publicado em 11 de jan.

ícones menu HTML

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;  }

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

rikaschmitt· 11 de jan.

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.

João Assef· 12 de jan.

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>