Uso del icono de Font Awesome para viñetas, con un único elemento de elemento de lista

Nos gustaría poder usar un ícono Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) como una viñeta para listas desordenadas en un CMS.

El editor de texto en el CMS solo genera HTML sin formato, por lo que no se pueden agregar elementos / clases adicionales.

Esto significa mostrar los iconos cuando la marca se ve así:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

¿Es esto posible usando 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 usar una copia de respaldo de una imagen de fondo, pero sería genial usar Font Awesome si es posible.

Solución:

http://jsfiddle.net/VR2hP/

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

Aquí hay una publicación de 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:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (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>

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

Me gustaría construir sobre algunas de las respuestas anteriores y dadas en otra parte y sugerir el uso de posicionamiento absoluto junto con : antes de la pseudo clase . Muchos de los ejemplos anteriores (y en preguntas similares) están utilizando 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 todo. Puede obtener el valor ISO para usar en contenido CSS en el hoja de trucos Font Awesome . Simplemente use los últimos 4 caracteres alfanuméricos con una barra diagonal inversa. Entonces se []convierte\f058

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

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

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

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

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

Aquí hay un screencast de él que también habla sobre cómo crear su propia fuente de icono.

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

Básicamente, puede lograr esto utilizando solo CSS sin la necesidad de un marcado adicional como lo sugiere FontAwesome y las otras respuestas aquí.

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

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Gracias.

Mi solución usando estándar <ul>y <i>adentro<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

DEMO AQUÍ

En Font Awesome 5 se puede hacer usando CSS puro como en algunas de las respuestas anteriores con algunas modificaciones.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Sin el peso de fuente correcto, solo mostrará un cuadrado en blanco.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define