Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.
Hacemos una lista de ejemplo:
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
Y luego en el CSS la lista de cosas por hacer:
- Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
- Quitar los estilos nativos de la lista con list-style:none;
- Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */
@font-face{
font-family:FontAwesome;
src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
font-weight:400;font-style:normal;}
/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }
/* aqui viene la magia */
li:before {
font-family: 'FontAwesome';
content:"\f0a4";
margin:0 5px 0 -15px;
}
Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/
¿Cual es el icono mas raro que has usado en una lista?
