iconos en frase

[rascabuchitos]

hola amigos
es posible hacer esto con un solo div o tengo que hacer div paralelos

viñeta texto icono texto

[Carlangueitor]

Con un marcado como este:

Código HTML:

<ul>
    <li>Manual <span class="pdf">pdf</span></li>
    <li>Video <span class="avi">avi</span></li>
</ul>
 

Solo le debes poner un fondo al span y aumentarle el padding-left.

Saludos

[rascabuchitos]

este es mi codigo en html

<div id="caja_izquierda">
<ul id="item_datasheet">
<li><a href="http://www.miweb.com/manual.pdf" target="_blank">
Manual</a><img src="http://www.miweb.com/pdf.gif" />pdf
</li>
</ul>
</div>


este es mi codigo css

#item_datasheet{
margin: 20px 0px 0px -19px;
font-size: 12px;
font-family: Calibri,Verdana,Arial,Helvetica,sans-serif;
line-height:1px;
}

he agregado lo que me diste asi


<div id="caja_izquierda">
<ul id="item_datasheet">
<li><a href="http://www.miweb.com/manual.pdf" target="_blank">
Manual</a><span class="pdf">pdf</span>pdf
</li>
</ul>
</div>


lo que quiero lograr es evitar tipear la url para que aparezca el icono del pdf en el html y hacerlo automatico como las viñetas que la url esta inserta en el css