http://javiclement.com/wp-content/uploads/2015/08/font-awesome-en-wordpress-javiclement

 

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

En una sola fuente tenemos un impresionante lenguaje pictográfico de muchas de las acciones que podemos realizar en la web e iconos de redes sociales.
Font Awesome es totalmente gratuito para uso comercial. Echar un vistazo a la licencia.
Originalmente diseñada para Bootstrap, Font Awesome se adapta bien con cualquier framework.
Menos problemas de compatibilidad ya que no requiere Javascript.
Gracias a CSS es posible cambiar el color, tamaño, estilo, sombras.
Iconos elegantes para utilizar en tu pantalla o como imágenes vectoriales, echa un vistazo al listado Awesome.
Gráficos vectoriales escalables, cada icono se ve perfecto en cualquier tamaño.
Font Awesome son vectores, lo que significa que se ven perfectos en pantallas de alta resolución.

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.

http://javiclement.com/wp-content/uploads/2015/08/font-awesome-en-wordpress-plugins-javiclement

Better Font Awesome

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?