Muchos de los que desarrollan temas de WordPress han tenido la necesidad de usar iconos elegantes y llamativos para el sitio web. Los iconos son una gran manera de añadir visualmente sentido a un botón o un post relacionado. Una fuente de iconos es una gran manera de añadir fácilmente un conjunto de iconos para usarlos de manera sencilla en la plantilla, evitando el trabajo de crearlos.

Existen algunas fuentes de iconos bastantes grandes. Si está usando Bootstrap para su plantilla , esta tiene la fuente Glyphicons integrando asi sus iconos. Para este post, nos enfocaremos en uno de los más populares: Font Awesome.

Table of Contents

Beneficios De Las Fuentes De Iconos

Existen otras formas de agregar iconos a su plantilla, pero hoy hablaremos de algunos de los beneficios de utilizar una fuente de icono en lugar de imágenes, sprites, etc.

Es una fuente

El primero (y creo que el mejor) beneficio es que se trata de una fuente. Esto significa que usted obtiene todos los beneficios de un estilo que se obtiene con el texto normal. Puede cambiar fácilmente el color y tamaño de un icono con un poco de CSS. También se vera tan nítida la imagen, como su dispositivo lo permita. Es decir, no hay necesidad de preocuparse por la creación de gráficos para ser usados en retina.

Rendimiento

Dado que todos los iconos están incluidos en un solo archivo fuente, eso significa que es sólo necesario una solicitud HTTP para cargarlas. Esto realmente le puede dar un poco de rendimiento de carga a la página, si está utilizando una serie de iconos. También puede incluir el CSS necesario para representar los iconos con todos los otros archivos.

Añadiendo Font Awesome A Su Plantilla

Hay variedad de maneras de añadir Font Awesome a su plantilla. Se han documentado un par de caminos diferentes para agregar a su sitio web, en su sitio.

CDN

Probablemente la forma más fácil de agregar la Font Awesome, es utilizando el CDN de Bootstrap. Todo lo que necesita hacer es agregar la siguiente linea al archivo header.php justo en el <head> de su plantilla:

[html]<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">[/html]

O, mejor aún, utilizar la función wp_enqueue_style.

CSS Por Defecto

Otra forma de añadir a su plantilla sería bajar el proyecto de Font Awesome de GitHub y añadirlo a la raíz de su theme. A continuación, tendría que poner la fuente al final utilizando la función wp_enqueue_style .

Usando Font Awesome En La Plantilla

Una vez que tenga añadido Font Awesome en la plantilla, puede comenzar a utilizarlas en su tema. Cada tema es obviamente diferente, pero acá mostraremos algunos ejemplos de cosas que podrían ser relativamente iguales para la mayoría de las plantillas.

Iconos Sociales

Font Awesome viene con una cantidad de iconos de las redes sociales mas populares. Comúnmente un icono social es un enlace, por lo que podemos agregar la clase de icono a la etiqueta de ancla como tal:

[html]<a href="http://twitter.com/jason_bradley" title="Twitter" target="_blank"></a>[/html]

Se puede ver un ejemplo de cómo agregar varios iconos en el archivo footer.php en el siguiente proyecto de ejemplo.

Finalmente

Ahora debe tener todo lo necesario para empezar a trabajar con Font Awesome en su tema de WordPress. Como sugerencia, les recomendamos mirar los ejemplos prácticos y elegante que brinda la pagina de Font Awesome.