Cómo agregar íconos de Font Awesome a WordPress manualmente o con complementos

Cómo agregar íconos de Font Awesome a WordPress manualmente o con complementos

¿Alguna vez has visto estos ingeniosos íconos en los sitios de WordPress de otras personas? Los que captan tu atención y te brindan un contexto adicional para lo que estás viendo. Lápices, iconos de hamburguesas, cosas así …

¿Conoces los gráficos que se parecen a esto?

Si no ha vivido en una cueva, apuesto a que asiente con la cabeza ahora.

Se han vuelto populares porque son una forma inteligente de agregar carácter y contexto a su sitio de WordPress. Sí, no solo están ahí para divertirse, en realidad tienen algunos beneficios de experiencia de usuario muy reales que discutiré a continuación.

Luego, después de los beneficios, le mostraré cómo agregar íconos de Font Awesome a WordPress, tanto manualmente como con algunos complementos útiles.

¿Qué es Font Awesome?

Font Awesome es un conjunto de iconos popular y de aspecto moderno. Esencialmente, son miles de iconos diferentes combinados en un paquete que luego puede pegar en su sitio de WordPress.

Los iconos de Font Awesome son geniales porque funcionan de manera muy similar a cualquier fuente normal que uses. Eso significa que son:

  • Compatible con todos los navegadores.
  • Vectores (es decir, puede cambiar el tamaño que desee sin perder calidad)
  • Fácil de peinar. Básicamente, puede tratarlo como una «fuente» normal. Eso significa que puede cambiar fácilmente los colores según sea necesario.

También es fácil agregar íconos de Font Awesome a WordPress gracias a una gran base de soporte.

¿Cuáles son las ventajas de la facilidad de uso de utilizar iconos como Font Awesome?

Al principio, pensé que Font Awesome Icons haría que tu sitio web se viera genial. Pero luego comencé a pensar en cómo navegar por la web en este mundo centrado en los dispositivos móviles. Y eso me llevó a investigar la usabilidad de íconos como Font Awesome.

Y que sabes Los icónicos (!) Investigadores de la experiencia del usuario Nielsen Norman Group (NNG) se han ocupado exactamente de este tema.

Resulta que cuando incorporas íconos en el diseño de tu sitio web, no solo los haces lucir geniales. También eres:

  • Facilita a los lectores hacer clic en las opciones del menú. Si bien esto es particularmente beneficioso para los dispositivos táctiles, NNG señala que lo mismo ocurre con los dispositivos basados ​​en mouse.
  • Ocupa menos espacio. Los iconos le permiten utilizar menos texto y así condensar sus menús.
  • Para ayudar a los lectores a comprender las opciones del menú más rápidamente. Por ejemplo, todos sabemos que el símbolo de «lápiz» significa «editar».
  • Internacionaliza tu sitio web. Como se indicó anteriormente, no solo los usuarios de habla inglesa saben lo que significa el ícono de lápiz.

Sin embargo, cuando utilice símbolos, tenga siempre en cuenta que aún debe proporcionar una leyenda de texto. Mucha investigación dice que los íconos solo puede confundir a los lectores. Pero si los usa como un parte la estructura de su página mejoran la usabilidad y hacen que su página sea más agradable estéticamente.

Cómo agregar iconos de Font Awesome a WordPress manualmente

Está bien, entonces tú puede Utilice un complemento para agregar iconos de Font Awesome. Puede insertarlos en WordPress usando códigos cortos, aunque aún debe formatearlos manualmente. Cubriré eso en la siguiente sección. Pero para aquellos de ustedes que prefieren un enfoque más práctico, es muy fácil insertar manualmente símbolos de Font Awesome.

En esencia, todo lo que necesita hacer es agregar la hoja de estilo Font Awesome a su sitio. Luego, puede insertar y diseñar sus símbolos con CSS. Vayamos a eso …

Paso 1: Poner en cola la hoja de estilo de Font Awesome en Functions.php

La hoja de estilo Font Awesome es una lista constantemente actualizada de los últimos iconos. Hay dos formas de agregarlo a su sitio web:

  • Descargue la última hoja de estilo de Font Awesome y cárguela en su sitio a través de FTP.
  • Enlace a la versión alojada por Bootstrap CDN (hice esto sin problemas).

Cualquiera que sea la opción que elija, los siguientes pasos son los mismos. Lo único que cambia es la URL real de la hoja de estilo.

Para descargar la hoja de estilo, vaya aquí, luego cárguela en su sitio a través de FTP y copie la ruta del archivo.

De lo contrario, use esta URL para la hoja de estilo CDN de Bootstrap externa: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Luego, debe agregar este código al archivo functions.php de su tema hijo (¡espero que esté usando un tema hijo!).

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Una vez que haya subido la hoja de estilo a su sitio, todo lo que necesita hacer es reemplazar el enlace a Bootstrap CDN con la URL de la hoja de estilo alojada en su sitio.

Debería verse algo como esto:

Cómo agregar íconos de Font Awesome a WordPress manualmente o con complementos

Si bien algunas personas le dirán que simplemente pegue el enlace a la hoja de estilo en su archivo header.php, no hagas eso. Aunque es probable que aún funcione, lo que debe hacer es ponerlo en la cola la forma correcta de hacerlo.

Paso 2: Agregar íconos impresionantes de fuentes a WordPress

Una vez que haya agregado la hoja de estilo, estará listo para comenzar a incorporar símbolos de Font Awesome en WordPress. Es realmente muy simple. Para agregar un símbolo básico, todo lo que necesita es este fragmento de código:

<i class="ICON NAME" aria-hidden="true"></i>

¿Dónde puedo encontrar el NOMBRE DEL ICONO? Es fácil, solo ve al sitio web de Font Awesome y busca íconos:

Al hacer clic en un icono, accederá a la página correspondiente. Luego, desplácese hacia abajo y busque el código HTML:

Si desea utilizar los íconos en las publicaciones, asegúrese de agregarlos a la texto Pestaña del editor de WordPress. Esta adición a la texto Pestaña:

Renderiza esto en la interfaz:

Paso 3: diseña la fuente Awesome Icons

Como puede ver en el ejemplo anterior, el tamaño del símbolo predeterminado es muy pequeño. La mayoría de las veces, desea que sus íconos sean un poco más grandes. Afortunadamente, es muy fácil de hacer con CSS (¡recuerda que te dije que es como una fuente!).

Para agrandar su símbolo, todo lo que tiene que hacer es agregar una simple adición a la clase de símbolo. Por ejemplo, para hacer que el ícono de la libreta de direcciones usado arriba sea tres veces más grande, todo lo que necesita hacer es agregar «fa-3x» al final de la clase de esta manera:

<li><i class="fa fa-address-book fa-3x"></i>

Y eso te da esto:

También puede rotar símbolos, animar símbolos y mucho más. Para obtener una lista completa de todas las manipulaciones que puede realizar, consulte la página de ejemplos de fuentes impresionantes.

Cómo agregar íconos de Font Awesome a WordPress usando un complemento

Si no desea hacer trabajo manual, también puede usar un complemento llamado Better Font Awesome.

Honestamente, no creo que eso te salve la mucho tiempo haciendo las cosas manualmente. Pero le brinda un buen constructor de códigos cortos en el editor de WordPress.

Es un complemento gratuito para que pueda instalarlo y activarlo directamente desde su panel de WordPress:

Una vez que lo haya habilitado, no hay mucho que configurar. Verás uno nuevo Insertar símbolo Constructor de shortcode en el editor de WordPress. Simplemente haga clic en él, filtre sus íconos y pegue las selecciones que desee:

Para diseñar sus símbolos, deberá usar las mismas clases que le mostré para el ejemplo manual anterior. Por ejemplo, para hacer que el símbolo sea 3 veces más grande, debe agregar esta clase al código corto:

El hecho de que todavía tenga que diseñar manualmente sus iconos es la razón por la que no encuentro el complemento mucho mejor que la opción manual.

Agregar iconos de Font Awesome a los elementos del menú

Si desea agregar íconos de Font Awesome a los elementos reales del menú de WordPress, existe otro buen complemento llamado Font Awesome 4 Menús.

Una vez que lo haya habilitado, puede agregar íconos de Font Awesome a los elementos de su menú simplemente escribiendo el nombre de Font Awesome en él Clases CSS (opcional) Caja:

Al igual que con cualquier otra opción, puede utilizar las mismas opciones de estilo para aumentar el tamaño de los iconos, animarlos o más.

Si el cuadro Clases CSS no aparece de inmediato, es posible que deba hacerlo. caminar pantalla Opciones y activarlo:

Resumir cosas

Agregar íconos de Font Awesome a WordPress es una excelente manera de mejorar la estética de su sitio web y facilitar la navegación de sus usuarios.

Mi preferencia personal es agregar Font Awesome manualmente agregando la hoja de estilo al archivo functions.php de su tema infantil. Pero si no quiere molestarse con él, las dos opciones de complementos que le he proporcionado también le ayudarán a empezar.

Si tiene otras formas de mejorar las fuentes en su sitio de WordPress, le recomiendo que consulte nuestra guía sobre fuentes de Google y WordPress. Y lea esto si desea obtener más información sobre CSS para comprender un poco cómo funciona el estilo Font Awesome.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad