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


131

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.

Respuestas:


248

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.


18
Una lista útil de traducciones de estos íconos de fuente impresionante a valores CSS está aquí: astronautweb.co/snippet/font-awesome
Scott C Wilson el

24
Deberá incluir esto para eliminar las viñetas predeterminadasul { list-style-type: none; }
Edd

¿Por qué este método no funciona cuando tengo dos listas en la misma página?
deKajoo

66
Muy bien, lo único que sugeriría para alinear las cosas mejor es usar margin: 0 0.2em 0 -1.2em;solo aumentar / disminuir los dos valores en la misma cantidad para obtener el espacio deseado. Si utiliza un valor de píxel fijo que no se corresponde correctamente con su fuente, notará una discrepancia en los elementos de la lista de líneas múltiples.
frena el

Agregué un prefijo ul a esto; de lo contrario, trataría de hacerlo si el cliente usara el cms para crear una lista ordenada (numerada)
rtpHarry

154

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


12
Esta debería ser la respuesta correcta, con la nueva versión fa. Muy bien hecho, gracias por esta explicación.
David

23
No estoy de acuerdo, la pregunta pedía una solución usando una sola lista en CSS puro. Esto usa HTML adicional, así como clases. Si bien esta es definitivamente la forma en que los documentos FA especifican para hacer esto, técnicamente no es la solución a la pregunta, y no es útil si está buscando hacer esto sin modificar su salida HTML.
Ryan

Sé lo que está buscando, pero las personas que no escriben constantemente CSS puro en situaciones en las que no pueden modificar su HTML. (en serio, mira cambiar tu marco web) necesitará su actualización de memoria de consulta de Google para vincular a la fuente 'correcta' de documentos impresionantes, yuxtapuestos con la respuesta 'real', uno al lado del otro para decidir. No quiero decir "no hay una sola respuesta correcta al problema", pero no hay ...
lol

1
Este enfoque no funciona bien con elementos de lista que se ajustan a varias líneas, ya que la ideación en líneas adicionales no se expandirá para incluir el ancho del icono.
Lars Haugseth

2
Probablemente valga la pena agregar, con FA 4.3 (probablemente también otras versiones) y Bootstrap 3, los ítems uly lideben configurarse position: relativeya que el fa-liítem se posiciona como absoluto. De lo contrario, todos flotarán hacia la esquina superior izquierda.
Jeremy Harris

14

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 [&#xf058;]convierte\f058


4

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.


2
No necesita el marcado adicional: li:beforepuede tener una familia de fuentes diferente a la lipropia.
cimmanon

@cimmanon: Si bien tienes razón, la documentación de Font Awesome sugiere que deberías tener el marcado adicional. Técnicamente no es necesario, sin embargo, creo que puede requerir un poco de excavación a través de los glifos de la fuente para descubrir qué tecla está asignada a qué símbolo. Esto requeriría algo de tiempo y paciencia, pero seguro, su solución también funcionaría.
cereallarceny

@cereallarceny: el problema que tenemos es que el editor HTML (TinyMCE) para el CMS produce el formato que di en mi pregunta. Entonces, desde esa perspectiva, no tenemos control sobre la lista HTML. A menos que configuremos TinyMCE para incluir el elemento i (y no eliminarlo como un elemento vacío).
BaronGrivet

Entonces, no tienes acceso al HTML, ¿tienes acceso al CSS?
cereallarceny

Sí, acceso completo al CSS.
BaronGrivet

1

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


1

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>

ingrese la descripción de la imagen aquí

DEMO AQUÍ


1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.