Portada Wordpress 3 Plugins para usar Icon Fonts en WordPress
Desde que se empezaron a crear páginas web, los administradores siempre han buscado añadir elementos gráficos para facilitar su uso y, por que no, mejorar el diseño de la web.
Una de las formas más habituales y comunes de añadir elementos gráficos eran los iconos, pequeños gráficos que se podían añadir a los menús u otros sitios de la web.
En los años 90, las velocidades de conexión a Internet eran realmente bajas, lo que generó una tendencia para añadir imágenes llamativas en la web: los Gifs animados.
Con el paso del tiempo y la llegada de los diseños adaptables a la resolución de la pantalla, los iconos y los gifs tenían un problema, el pixelado.
Si creas un gráfico para que se vea correctamente a una resolución y luego lo ves en una pantalla con mucha más resolución se pixela y ya no queda bien.
Pero no hay problema, porque tenemos los Icon Fonts con los que podemos añadir bonitos gráficos sin problemas de pixelados, ya que se trata de gráficos vectoriales, al igual que las fuentes de texto.
Si habéis editado texto en algún programa tipo Word, habrás visto que por mucho que subas el tamaño del texto nunca se ve mal.
Con los Icon Fonts pasa lo mismo, por eso lo de font (fuente), son gráficos vectoriales que podemos ampliar a reducir su tamaño sin ningún tipo de problema a la hora de su visualización en pantalla.
Si estás pensando que los Icon Fonts son una buena idea y que te gustaría poder usarlos en WordPress, verás que no tienes una forma nativa de hacerlo, aunque algunos themes si que añaden algunos directamente.
Por suerte estamos en WordPress y casi todas sus carencias las podemos solucionar con un plugin.
Aquí tienes una serie de plugins que puedes usar en WordPress con trabajar con los Icon Fonts sin tener que andar copiando y pegando código en tu WordPress.
Si hacemos una búsqueda en el buscador de plugins de WordPress, la primera opción que encontraremos será el plugin Visual Icon Fonts.
El plugin Visual Icon Fonts nos facilita la tarea de añadir los iconos desde el editor de WordPress en cualquier página o post.
El plugin toma los iconos desde la web Font Awesome, aunque en las opciones también podemos seleccionar iconos de Genericons para poder usarlos.
El plugin nos ofrece 369 iconos de Font Awesome y 62 de Genericons, que pueden parecer pocos, pero que en realidad nos servirán en un uso normal de los iconos.
Una vez esté instalado y activado, solo tenemos que ir al editor de WordPress. Junto al botón de Añadir Objetos, encontraremos otro llamado Icons.
Desde ahí, solo tenemos que seleccionar el icono que queramos añadir en el texto, como si de una imagen se tratara.
Una vez esté añadido, podemos tratarlo como si de un tipo de letra fuera. Podemos cambiarle el tamaño o el color, así como la alineación del mismo y al ser vectorial no veremos ningún pixel en ningún momento
El plugin WP SVG Icons es uno de los más usados en WordPress, más de 50 mil instalaciones activas.
Incluye 490 bonitos iconos que podemos usar en cualquier parte de nuestro WordPress los usando shortcodes que generan.
Al activarlo se creará un menú en la barra lateral llamado WP SVG Icons.
Desde ahí podemos acceder a la opción Default Icon Set, donde nos encontraremos todos los iconos disponibles.
Los iconos los podemos previsualizar en grande y podemos añadirles etiquetas como H1, H2 y cosas así.
Según las opciones que le añadamos al icono, se generará un shortcode que podemos copiar y pegar en la parte de la web que nos interese, incluidos los menús.
Si lo que queremos es añadir directamente el icono en el editor de WordPress, solo tenemos que pulsar en el botón Add Icon, lo que nos abrirá una ventana en donde encontraremos las mismas opciones.
Font Awesome es otro de los plugins de WordPress con los que puedes añadir Icon Font en WordPress, quizá sea el sitio más famosos en lo que a los Icon Fonts se refiere, así que es lógico que tengan su propio plugin.
Al activar el plugin encontraremos un nuevo menú llamado en el que podemos cambiar algunas opciones, pero no es necesario ningún cambio para el correcto funcionamiento.
Su uso implica tener que visitar su web para elegir el icono, es decir que no podemos agregarlo directamente desde nuestro editor de WordPress.
Tenemos que ir a la galería de iconos (hacer click aquí) y buscar el icono que queramos y pulsar sobre él.
Esto nos llevará a una pantalla donde podemos ver el icono y unos opciones para poder copiarlo, nosotros tenemos que elegir la opción HTML.
Y por último tenemos que pegar el código directamente en el editor HTMl de WordPress y guardar los cambios, sin duda la opción más engorrosa de todas las que hemos visto, pero la más ligera y es el plugin oficial de Font Awesome.