Cómo añadir iconos de Font Awesome a tus menús y dónde quieras sin plugins

Icono de menú WordPress en lugar de texto

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 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 una 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 CSS. El proceso es muy fácil y podemos hacerlo en tres sencillos 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 WordPress a través del menú Plugins >> Añadir nuevo. No hay ajustes que realizar en este plugin.

Cuando navegue a Apariencia >> Menús y edite los elementos individuales del menú, necesitará 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 wordpress sin plugin

Font Awesome es un conjunto de iconos muy utilizado que ofrece imágenes vectoriales escalables que se pueden personalizar con CSS. Con más de 1.600 iconos en el conjunto libre, usted debería ser capaz de encontrar un icono para satisfacer sus necesidades.

  Cómo volver a los widgets clásicos después de WordPress 5-8

Para poder utilizar Font Awesome, tendrás que poder añadir el código a tu sitio. Esto requiere poder añadirlo a la sección <head>. En la mayoría de los casos esto requiere ser un administrador en el sitio.

Si está utilizando el tema Divi y / o constructor de páginas, también puede utilizar los iconos de Font Awesome. De alguna manera es más fácil ya que ves el icono que se muestra mientras sigues editando. No es necesario Vista previa para ver los cambios.

Usted tendrá que crear una cuenta de Font Awesome para tener acceso a sus kits gratuitos. Font Awesome también tiene cuentas de pago, que añaden aún más iconos. A partir de febrero de 2022, las cuentas Pro tienen 14.865 iconos además de otras características. La cuenta gratuita probablemente será suficiente, pero es bueno saber que hay opciones.

Sep 6, 2022 | Anuncios¡Recuerde actualizar sus sitios web con regularidad! Los sitios inactivos que no hayan sido actualizados en más de 2 años pueden ser archivados. Enviamos varios recordatorios por correo electrónico a los propietarios de los sitios antes de archivarlos y siempre podemos reactivar un sitio archivado previa solicitud. Seguir leyendo Recordatorio de sitios inactivos

Iconos de menú WordPress sin plugin

El uso de imágenes para los iconos causa problemas para la velocidad de la página y se ve pixelada en las pantallas retina cuando se optimiza correctamente. El plugin WP and Divi Icons añade gráficos basados en código SVG que son ligeros, tienen menos impacto en la velocidad de tu página y permiten que tus páginas carguen más rápido.

  El constructor Divi no carga ? Soluciones

WP and Divi Icons es exactamente lo que necesitaba. Ya no necesito pedir ayuda a un diseñador gráfico. Más que suficientes iconos para utilizar en todos los casos y el escenario funciona muy bien con CSS. Toneladas de iconos con estilo adecuado para cada tema. Bien merecido 5 estrellas. – wookvsh

Utilice iconos para captar la atención de sus visitantes y mejorar la navegación con iconos clicables reconocibles. Añádelos a las secciones de servicios y características, mejora la navegación con iconos en tus menús de navegación, o conecta tus redes sociales y utilízalos como enlaces sociales.

Elija el tamaño de su icono y seleccione un color personalizado con una vista previa en vivo de cómo aparecerá el icono. Añade clases CSS personalizadas para un estilo específico. WP y Divi Icons le da el control total de estilo para ofrecer el diseño perfecto en cada sitio.

WordPress fuente impresionante menú de iconos

Sin embargo, por muy cómodo que fuera este método, también tenía algunos inconvenientes. Estas desventajas se hicieron evidentes cuando entró en juego el diseño responsivo, que provocaba que las 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 los tiempos de carga de tu página, a diferencia de los sprites de imagen usados anteriormente.

Por último, activa el plugin. Tras la activación, puedes visitar la página Configuración > Mejor 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 inmediato, por lo que no tendrá que cambiar nada allí.

  Truco Astra: Botón de añadir al carrito sobre la imagen del producto al pasar el cursor

Los iconos también se pueden añadir en el editor de entradas simplemente seleccionando el icono deseado. Si creas una nueva entrada ahora, verás un nuevo icono en el 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 aún 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.