Uso del icono de fuente impresionante para viñetas, con un solo elemento de elemento de lista

Nos gustaría poder utilizar un icono de Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) como un punto para listas desordenadas en un CMS.

El editor de texto en el CMS solo emite HTML sin procesar para que no se puedan agregar elementos / clases adicionales.

Esto significa mostrar los íconos cuando el marcado se ve así:

  • Item 1
  • Item 2
  • Item 3

El primer problema que puedo ver si Font Awesome requiere un atributo diferente de la familia de fonts, que requeriría un elemento separado.

¿Es esto posible usar CSS puro? ¿O tendría que agregar el elemento al comienzo de cada elemento de la lista usando algo como jQuery?

Me doy cuenta de que podemos utilizar una caída de una imagen de fondo, pero sería genial usar Font Awesome si es posible.

Solución:

http://jsfiddle.net/VR2hP/

 li:before { font-family: 'FontAwesome'; content: '\f067'; margin:0 5px 0 -15px; color: #f00; } 

Aquí hay una publicación en el blog que explica esta técnica en profundidad.

El nuevo fontawesome (versión 4.0.3) hace que esto sea realmente fácil de hacer. Simplemente usamos las siguientes clases:

 
  • List icons (like these)
  • can be used
  • to replace
  • default bullets in lists

Según esta (nueva) url: http://fontawesome.io/examples/#list

Me gustaría basarme en algunas de las respuestas anteriores y darlas en otro lugar y sugerir usar el posicionamiento absoluto junto con : antes de la pseudo clase . Muchos de los ejemplos anteriores (y en preguntas similares) utilizan el marcado HTML personalizado, incluido el método de manejo de Font Awesome. Esto va en contra de la pregunta original, y no es estrictamente necesario.

DEMO AQUÍ

 ul { list-style-type: none; padding-left: 20px; } li { position: relative; padding-left: 20px; margin-bottom: 10px } li:before { position: absolute; top: 0; left: 0; font-family: FontAwesome; content: "\f058"; color: green; } 

Eso es básicamente eso. Puede obtener el valor ISO para usar en contenido CSS en la hoja de trucos Font Awesome . Simplemente use los últimos 4 caracteres alfanuméricos con el prefijo con una barra diagonal inversa. Entonces [] convierte en \f058

Hay un ejemplo de cómo utilizar Font Awesome junto con una lista desordenada en su página de ejemplos .

 
  • Lists
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs

Si no puede encontrarlo funcionando después de probar este código, entonces no está incluyendo la biblioteca correctamente. De acuerdo con su sitio web, debe incluir las bibliotecas como tales:

   

También echa un vistazo a la caprichosa publicación de Chris Coyier sobre fonts de íconos en su sitio web CSS Tricks .

Aquí hay un screencast de él hablando sobre cómo crear tu propio ícono font-face.

@Tama, es posible que desee verificar esta respuesta: Usar íconos de Font Awesome como viñetas

Básicamente puedes lograr esto usando solo CSS sin la necesidad del marcado adicional como lo sugiere FontAwesome y las otras respuestas aquí.

En otras palabras, puede lograr lo que necesita utilizando el mismo marcado básico que mencionó en su publicación inicial:

 
  • ...
  • ...
  • ...

Gracias.

Mi solución usando estándares

    y dentro de

  •   
    • Paypal
    • Apple Pay
    • Stripe
    • VISA

    enter image description here

    DEMO AQUÍ

    Estoy usando http://icomoon.io/ Te da la opción de cargar solo los íconos de fonts que necesites. Elija los íconos que desee, adjunte la clave del ícono y descargue una fuente pequeña en lugar de toda la increíble (que aún es impresionante).

    Aquí está mi experimento: http://jsfiddle.net/Annett/ZB7TK/