¿Cómo puedo usar iconos de fontawesome como la viñeta predeterminada para listas desordenadas?

2 minutos de lectura

En la página de ejemplo de fontawesome, muestran este código:

Use fa-ul y fa-li para reemplazar fácilmente las viñetas predeterminadas en listas desordenadas.

<ul class="fa-ul">   
    <li><i class="fa-li fa fa-check-square"></i>Listicons (like these)</li>   
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>   
    <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>   
    <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> 
</ul>

Esto funciona bien, pero tengo muchas listas desordenadas en mi sitio de wordpress, y me preguntaba si sería posible hacer que la casilla de verificación fontawesome sea la viñeta predeterminada en todo el sitio. Sé que mi tema usa LESS, por lo que cualquier código LESS es aceptable.

Estaba pensando en hacer algo como esto en css:

ul li i {
   class="fa-li fa fa-square";
}

Pero no creo que eso sea posible con css. Estaba mirando LESS y creo que los mixins podrían resultar útiles, pero no he podido descifrar la sintaxis correcta.

Cualquier ayuda es muy apreciada.

  • No entiendo POR QUÉ la gente da un voto negativo y ni siquiera comenta por qué. No sé si soy solo yo, pero creo que debería ser forzado.

    – pgarciacamou

    02/04/2014 a las 17:50

  • POR CIERTO. +1 porque yo tenia la misma duda y porque habia un -1 sin razon aparente (PARA MI).

    – pgarciacamou

    02/04/2014 a las 17:51

Solo mire cómo lograron que los íconos aparecieran en su sitio. Ellos usan un before pseudoelemento que tiene el FontAwesome font-family y para que aparezca el icono real, utilizan el content propiedad.

http://jsfiddle.net/kqa6B/

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

.

li {
    list-style:none;
}

li:before {
    font-family:'FontAwesome';
    content:"\f14a";
}

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad