Utilice el icono Font Awesome como contenido CSS

Quiero usar un ícono de Font Awesome como contenido CSS, es decir,

a:before {
    content: "<i class='fa...'>...</i>";
}

Sé que no puedo usar código HTML content, entonces, ¿solo quedan imágenes?

Dec 26 '13 16:12 sdvnksv

Actualización para FontAwesome 5 ^{gracias a Aurelien}

Debes cambiar font-familya Font Awesome 5 BrandsOR Font Awesome 5 Free, según el tipo de icono que estás intentando representar. Además, no olvides declararfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Manifestación

Puede leer el resto de la respuesta a continuación para comprender cómo funciona y conocer algunas soluciones para el espacio entre el ícono y el texto.

FontAwesome 4 y anteriores

Esa es la forma incorrecta de usarlo. Abra la hoja de estilo de fuente impresionante, vaya a la classfuente que desea usar fa-phone, copie la propiedad de contenido en esa clase con la entidad y úsela como:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Manifestación

Solo asegúrese de que si está buscando apuntar a una aetiqueta específica, considere usar a classen su lugar para hacerlo más específico, como:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Usando el método anterior se pegará el ícono con el texto restante tuyo, así que si quieres tener un poco de espacio entre los dos, hazlo display: inline-block;y usa algo padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Ampliando aún más esta respuesta, ya que muchos podrían tener el requisito de cambiar un ícono al pasar el mouse, por lo que para eso, podemos escribir un selector separado y reglas de :hoveracción:

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Manifestación

Ahora, en el ejemplo anterior, el ícono se mueve debido al diferente tamaño y seguramente no querrás eso, por lo que puedes establecer una widthdeclaración fija en la base como

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Manifestación

Dec 26 '2013 09:12 Mr. Alien

Otra solución sin que tengas que jugar manualmente con los caracteres Unicode se puede encontrar en Hacer que Font Awesome sea increíble: usar íconos sin i-tags ( descargo de responsabilidad: escribí este artículo ).

En pocas palabras, puedes crear una nueva clase como esta:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Y luego úsalo con cualquier ícono, por ejemplo:

<a class="icon fa-car" href="#">This is a link</a>

Mar 04 '2015 03:03 dustinmoris