Paso 14: Usar listas reales

En algunos post podemos ver una serie de listas que pueden pertenecer a distinto ámbito, pero en el paso número 14 vamos a intentar cambiar el tradicional punto negro  por un icono que, al menos, nos de un colorido especial a nuestro propio Blog.

Para ello, hemos seleccionado la siguiente viñeta:

De esta forma, vamos a ver como la lista de los diferentes periféricos de un ordenador aparece con la viñeta anteriormente seleccionada:

• Impresora
• Altavoces
• Micrófonos
• Escaner

Para ello, hemos debido realizar los siguientes cambios:


<ul id="mylista">
<li><a href='#'>Impresora</a></li>
<li><a href='#'>Altavoces</a></li>
<li><a href='#'>Micrófonos</a></li>
<li><a href='#'>Escaner</a></li>
</ul>
</div>


Además, hemos tenido que incorporar el siguiente código a la plantillas general, de la siguiente forma:

#mylista{
list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFg4qxAKssEt97kwGVxl9hdz-mT1DLdzqEYyul2PaLM7asESKGb5yJm2XSUuWqxAOkdW15ZUp3dqR792ADn_hf3GCOlTy7T4BxxrQVdDAuh-oIkvJpUyUWqprmqCkT8T3Be29NzLLlyMU/s1600/BD14790_.GIF");
list-style-type:none;