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

li icons

Question

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í:

<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 diferente de la familia de fuentes, 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.

Answer 1

@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:

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

Gracias.

Answer 2

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><span class="fa-li"><i class="fa fa-check-square"></i></span>List icons (like these)</li>
  <li><span class="fa-li"><i class="fa fa-check-square"></i></span>can be used</li>
  <li><span class="fa-li"><i class="fa fa-check-square"></i></span>to replace</li>
  <li><span class="fa-li"><i class="fa fa-check-square"></i></span>default bullets in lists</li>
</ul>

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

Answer 3

Estoy usando http://icomoon.io/ Te da la opción de cargar solo los íconos de fuentes 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/

Answer 4

Hay un ejemplo de cómo utilizar 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. De acuerdo con 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 hablando sobre cómo crear tu propio ícono font-face.

Answer 5

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

Answer 6

Mi solución usando estándares <ul> y <i> dentro de <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Í

Answer 7

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.