3 Plugins para usar Icon Fonts en WordPress

Categorias: 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.
 

Plugin Visual Icon Fonts para WordPress

visual icon fonts plugin 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.

visual icon fonts font awesome genericons

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.

visual icon fonts boton WordPress

Desde ahí, solo tenemos que seleccionar el icono que queramos añadir en el texto, como si de una imagen se tratara.

visual icon fonts anadir icono WordPress

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

visual icon fonts icono editado WordPress


Plugin WP SVG Icons para WordPress

svg icons plugin WordPress

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.

svg icons menu WordPress

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.

svg icons shortcode WordPress

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.

svg icons add icon WordPress


Plugin Font Awesome para WordPress

font awesome plugin WordPress

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.

font awesome elegir icono WordPress

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.

Hosting SSD para WordPress con Soporte Técnico Incluido

  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€/mes
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!

Contactar