Lista + Imagem

Mostre como você fez. Poste o código :)

:seta: http://forum.imasters.com.br/topic/212439-como-criar-um-tpico-para-o-seu-problema/

Define um ID para cada item da sua lista:

<ul>
<li id="imagem1"><a href="#">Home</a></li>
<li id="imagem2"><a href="#">Produtos</a></li>
<li id="imagem3"><a href="#">Serviços</a></li>
<li id="imagem4"><a href="#">Contato</a></li>
</il>

Meu código está assim

<ul>
<li class="img-conta">Minha Conta</li>
<li class="img-desejo">Lista de Desejos</li>
<li class="img-finalizar">Finalizar Compra</li>
<li class="img-login">Login</li>
</ul>

.img-conta{padding-left:26px; font-size:12px; font-family:Verdana, Geneva, sans-serif; display:inline; background:url(icone_conta_1.png) left center no-repeat;}

Defina a dimensão de cada li siga esse exemplo para todas lis,

a imagem vai ficar definida em uma unica imagem de sprite em cada tag span dentro da li:

/ CSS /

/ Ativar o box model em todas lis/
ul.menu li {

 display: block;
 float: left;
 position: relative;
}

/ Regra para as imagens /
ul.menu li span {
background-image: url(../img/icones.png); /Adicione a imagem dos icones em sprite (todos os ícones em uma só imagem)/

 background-repeat: no-repeat;
 display: block;
 position: absolute;
 left: 10px; /* posição que a imagem vai ficar dentro do li */
 top: 5px;
}

/ Defina a dimensão em cada li/

.btn-conta {
 height: 50px;
 width: 70px;
 padding: 0 0 0 30px; /* para distanciar o texto do ícone */
 line-height: 50px; /* centralizar o texto verticalmente */
}

/ imagen da li btn-conta /
span.ico-conta {
backgroun-position: x y; / defina a posição da imagem do sprite aqui /

 height: 20px;
 width: 20px;
}

HTML:

<ul>
<li class="btn-conta"><span class="ico-conta"></span><a href="#">Minha Conta</a></li>
</ul>