Font Awesome en pseudo-elementos :before y :after

font-background

En esta ocasión vamos a ver un sencillo truco para añadir iconos de Font Awesome en los pseudo-elementos CSS :before y :after, que en combinación con la propiedad content de CSS permiten añadir contenidos antes o después del contenido de su elemento padre.

Para esto, previamente tenemos que haber integrado Font Awesome a nuestro sitio, una vez hecho esto vamos a utilizar el valor unicode de la siguiente forma:

Este truco es especialmente útil cuando trabajamos en CMS donde es preferible evitar modificar el core, pensando más que nada en futuras actualizaciones que puedan pisar el trabajo realizado, del mismo modo que también nos ahorra tener que recurrir a JavaScript para añadir contenido, lo que ayuda a mejorar el performance de nuestro sitio.

Autor: Javier Ocampos

Fundador de Leedeo y cofundador de Nube Online. Desarrollador web por vocación, soy un apasionado del fron-end y back-end por igual, ya que considero que lo visual y lo funcional siempre han de ir de la mano.