Una de las preocupaciones de todo diseñador web es la estética y rapidez en la web, sabiendo de la importancia de las imágenes para llamar la atención del usuario buscamos la forma de optimizarlas al máximo. Con esta premisa nació el proyecto Awesome, una forma sencilla de utilizar imágenes vectoriales y escalables sin perdida de calidad.
Awesome es una fuente que nos permite insertar cientos de iconos como si fueran imágenes pero con el valor añadido de que podemos aumentar o disminuir su tamaño sin perdida de calidad y no son imágenes sino fuentes con lo que la carga es muchísimo más rápida.
Características de la fuente Awesome
Usando Font Awesome en WordPress
Si tienes un tema premium en WordPress utilizar las fuentes Awesome será muy sencillo ya que la mayoría de éstos temas son compatibles.
Para usar uno de estos iconos sólo tenemos que acceder a la enorme lista de iconos que dispone y usar el que más nos guste con el tag <i> de HTML5.
Por ejemplo, si queremos utilizar el icono de facebook (que su código en la lista es “fa-facebook-official”) sería de la siguiente forma:
<i class=”fa fa-facebook-square”></i>
Las posibilidades son infinitas, desde cambiar el tamaño de los iconos, la orientación, crear iconos animados y apilar iconos. Vamos a ver unos ejemplos:
Iconos grandes
Para aumentar el tamaño del icono usa la clase: fa-lg (aumenta 33%), fa-2x, fa-3x, fa-4x, or fa-5x
<i class=“fa fa-facebook-square fa-lg”></i>
<i class=“fa fa-facebook-square fa-2x”></i>
<i class=“fa fa-facebook-square fa-3x”></i>
<i class=“fa fa-facebook-square fa-4x”></i>
<i class=“fa fa-facebook-square fa-5x”></i>
Iconos animados
Podemos crear iconos animados usando la clase: fa-spin. Funcionan muy bien con los iconos fa-spinner, fa-refresh, y fa-cog.
<i class=“fa fa-spinner fa-spin fa-2x”></i>
<i class=“fa fa-circle-o-notch fa-spin fa-2x”></i>
<i class=“fa fa-refresh fa-spin fa-2x”></i>
<i class=“fa fa-cog fa-spin fa-2x”></i>
Rotar y voltear
<i class=“fa fa-shield fa-2x”></i> Normal
<i class=“fa fa-shield fa-rotate-90 fa-2x”></i> Rotar icono 90º
<i class=“fa fa-shield fa-rotate-180 fa-2x”></i> Rotar icono 180º
<i class=“fa fa-shield fa-rotate-270 fa-2x”></i> Rotar icono 270º
<i class=“fa fa-shield fa-flip-horizontal fa-2x”></i> Voltear horizontalmente
<i class=“fa fa-shield fa-flip-vertical fa-2x”></i> Voltear verticalmente
¿Qué sucede si mi tema de WordPress no soporta Font Awesome?
Es posible si utilizas un tema gratuito, que no puedas utilizar Font Awesome, pero no tienes porqué preocuparte hay una forma de solucionarlo fácilmente.
Better Font Awesome es un plugin para WordPress que instala un botón en tu editor de texto de WordPress. Una vez instalado su funcionamiento es muy sencillo, pulsas el botón y te aparecerán los iconos disponibles. Sólo tienes que pulsar sobre el deseado y te creará el código para que aparezca en tu entrada de WordPress.
La ventaja de este plugin es que siempre estará actualizado con las nuevas versiones de Font Awesome.
Y tu, ¿utilizas las fuentes Awesome en tu web o blog?
Javi eres un crack,
Gracias 😉
Hola Javier, tu artículo me ha sido muy útil.
Te quería preguntar si es posible que observes mi blog, en el que se han perdido los enlaces hacia los iconos de Font Awesome. Primero estuve trabajando en de manera temporal y cuando delegué el sitio ya no aparecen.
Gracias y saludos desde Buenos Aires.
Hola Marisa, creo que tienes un problema con la dirección en la que apunta tu dominio panoramaregistral.com.ar, si accedes desde 67.225.220.181/~panorama/ los awesome se muestran sin problemas. Tendrás que verificar que sucedió al hacer el cambio de local al hosting.
cuando intento usarlo en un post en wordpress hace caso omiso. ¿cómo tendría que hacer?
Hola Cotu, tienes que comprobar primero si tu theme utiliza fuentes Awesome, la mayoría theme premium son compatibles, en ese caso tienes que buscar el código del icono que quieres y ponerlo en el editor de texto de WordPress. Es posible que tu theme utilice una versión antigua de fuentes Awesome y quieras utilizar un icono que no esté habilitado.
mi tema usa font-awesome y de hecho hace dos semanas actualicé para que soportase la última versión por eso me extraña que al usar html en un post no me ponga los iconos cuando todo lo demás funciona con font-awesome