Iconos de la fuente impresionante
Contents
A principios de este año, la fuente de iconos Font Awesome no estaba permitida en el repositorio de plugins de WordPress debido a su licencia. Los plugins que cargaban la fuente fueron cerrados. Finalmente, en mayo de 2013, WordPress eliminó la prohibición de Font Awesome después de actualizar su licencia para que fuera de código abierto y compatible con la GPL.
Los desarrolladores de plugins y temas son ahora libres de hacer uso de la fuente en sus extensiones, siempre que no la carguen desde un CDN. Font Awesome 4 Menus es uno de los nuevos plugins que incluyen la fuente de iconos. Sustituye a una versión anterior que tenía menos funciones. Este plugin permite añadir iconos a los menús de WordPress sin tener que ajustar ningún marcado ni conocer ningún CSS. El proceso es muy sencillo y podemos hacerlo en tres simples pasos.
El plugin Font Awesome 4 Menus carga la fuente de iconos en tu sitio para que puedas hacer uso de ella dentro de tus menús y contenidos. Añádelo a tu sitio de WordPress a través del menú Plugins >> Añadir nuevo. No hay que ajustar la configuración de este plugin.
Cuando navegues a Apariencia >> Menús y edites los elementos individuales del menú, necesitarás hacer uso de la opción «Clases CSS». Esto puede ser activado usando el menú «Opciones de pantalla» en la parte superior de la página.
Font awesome cdn
¿Has visto alguna vez esos iconos tan ingeniosos en los sitios de WordPress de otras personas? Los que captan tu atención y te dan un contexto adicional para lo que estás viendo. Lápices, iconos de hamburguesas, ese tipo de cosas…
Se han hecho populares porque son una forma inteligente de añadir carácter y contexto a su sitio de WordPress. Sí, no son sólo para divertirse, sino que tienen algunos beneficios muy reales para la experiencia del usuario que discutiré a continuación.
Al principio, sólo pensé que los iconos de Font Awesome hacían que tu sitio web se viera muy bien. Pero luego pensé en cómo navego por la web en este mundo centrado en los móviles. Y eso me llevó a investigar la usabilidad de los iconos como Font Awesome.
Pero cuando utilices iconos, recuerda siempre que debes proporcionar una etiqueta de texto que los acompañe. Muchas investigaciones dicen que los iconos por sí solos pueden confundir a los lectores. Pero cuando los incluyes como parte de la estructura de tu página, mejoran la usabilidad y hacen que tu página sea más agradable estéticamente.
De acuerdo, puedes utilizar un plugin para añadir iconos de Font Awesome. Te permitirá insertarlos en WordPress usando shortcodes, aunque todavía tendrás que estilizarlos manualmente. Cubriré eso en la siguiente sección. Pero para aquellos que prefieren un enfoque más práctico, es realmente fácil insertar los iconos de Font Awesome manualmente.
Font awesome 4 cdn
Siempre recomiendo que la gente utilice el plugin Code Snippets para gestionar functions.php, así que eso es lo que voy a hacer para este tutorial. Pero no hay ningún problema en añadir esto directamente al archivo functions.php de tu tema, siempre y cuando estés usando un tema hijo.
Better Font Awesome básicamente hace exactamente lo que te mostré en la sección del manual. Y también te da códigos cortos y una interfaz gráfica para insertar iconos de Font Awesome mientras estás en el editor de WordPress, lo cual es un gran beneficio si no te gusta tener que trabajar directamente con el código.
Añadir la fuente awesome al css
Sin embargo, a pesar de lo conveniente que era este método, también tenía algunas desventajas. Esas desventajas se hicieron evidentes cuando entró en juego el diseño responsivo, que entonces hizo que esas imágenes aparecieran cortadas o, peor aún, completamente borrosas.
Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Se pueden redimensionar fácilmente usando CSS y no aumentarán el tiempo de carga de tu página, a diferencia de lo que ocurriría con los sprites de imagen usados anteriormente.
Por último, active el plugin. Después de la activación, puedes visitar la página de Configuración > Better Font Awesome para configurar los ajustes del plugin. En la mayoría de los casos esto no es necesario ya que el plugin funciona de forma inmediata, por lo que no necesitarás cambiar nada allí.
Los iconos también pueden ser añadidos en el editor de entradas simplemente seleccionando el icono deseado. Si creas una nueva entrada ahora, notarás un nuevo icono en tu editor de entradas. Al hacer clic en él, aparecerá una ventana emergente en la que podrás localizar un icono e insertarlo.
El plugin añadirá un shortcode en tu post y si quieres personalizar más el icono, puedes hacerlo añadiendo tu propia clase CSS a él, y luego introduciendo los estilos específicos en tu hoja de estilos.
