[Resolvido] menu lista com icones

[Romeu_A 0]

Queria uma ajudar gostaria de fazer um menu igual ao do site da uol uma lista que no lugar dos marcadores tem icones todos diferentes ate ai fazer todos iguais com imagem eu anjo mas como fazer cada um dos itens da lista com um icone diferente?

[João Prado 64]

tem 2 formas

 

ou você insere pelo próprio html ou define classes/IDs para os elementos onde cada um você coloca o icone. Este último acho inviável pois acaba gerando um código css muito extenso. Eu particularmente faço inserindo os icones no próprio HTML

[Desnickadu 0]

<ul>
	<li><a href="#"><img src="pasta/imagem1.png" alt="nome do link" />Nome do Link 1</a></li>
	<li><a href="#"><img src="pasta/imagem2.png" alt="nome do link" />Nome do Link 2</a></li>
</ul>

se você for usar a mesma imagem pra todos os links, pode por ele como marcador no CSS usando 'list-style: url('pasta/nomedomarcador.png');'

[Romeu_A 0]

é isso marcador com 'list-style:' mas queria cada item da lista com um icone diferente é possivel

[Desnickadu 0]

então você faz como na marcação que postei e que o Mooio citou, colocando as imagens no HTML

[Romeu_A 0]

Não é o ideal mas resolvi assim

 

<div = "barradanca">
<ul>
<li><a href="#"><img src="../imagens/phone1.png" alt="SAC" width="18" height="21" /> Televendas / SAC <strong>(011) 2950 4082 |</strong></a></li>
<li><a href="#"><img src="../imagens/18.png" alt="Assinatura" /> Assinaturas / Cadastro |</a></li>
<li><a href="#"><img src="../imagens/duvidas-300x300.jpg" alt="Ajuda" width="18" height="20" /> Dúvidas / Ajuda |</a></li>
</ul>

</div>

####################################CSS######################

 

.barraDanca{ background-color:#fff; color:black; width: 1000px; height: 30px; 
list-style-type:none; color: #000;  position: relative; }
.barraDanca li {color:black; float:left; display:inline;}
.barraDanca a {color:black; display:block; }
.barraDanca a:link {color:black; text-decoration:none;}
.barraDanca a:hover {color:black; text-decoration:none;}
.barraDanca a:active {color:black; text-decoration:none;}
.barraDanca a:visited {color:black; text-decoration:none;}