Cómo agregar iconos FontAwesome en WordPress

No cabe duda de que los humanos somos seres muy visuales. Y como tal, nos enfocamos no solo en el contenido, sino también en el diseño visual de un sitio web.

Tradicionalmente, los diseñadores y desarrolladores web de todo el mundo usaban imágenes y sprites de imágenes para incluir iconos en cualquier sitio web.

Luego, esos íconos se usaron en todo el sitio web como una mejora visual: en el menú de navegación, la barra de búsqueda, los íconos de carga en los controles deslizantes y similares.

Sin embargo, por muy conveniente que fuera ese método, también tenía algunas desventajas. Esas desventajas se hicieron obvias cuando entró en juego el diseño receptivo que luego hizo que esas imágenes parecieran cortadas o, lo que es peor, completamente borrosas.

La respuesta a ese problema son los iconos de fuentes. Muestran íconos totalmente sensibles y personalizables que agregan un poco más al diseño de su sitio web. Esencialmente, son fuentes hechas de iconos.

Una de esas fuentes es FontAwesome. Y hoy, le mostraré cómo agregar fácilmente iconos de FontAwesome a su sitio web de WordPress.

Lo que aprenderá en este tutorial

• Qué son las fuentes de iconos y por qué debería usarlas
• Cómo agregar fuentes de iconos en WordPress usando plugins
• Cómo agregar fuentes de iconos en WordPress manualmente

¿Qué son las fuentes de iconos y por qué debería usarlas?

Las fuentes de iconos contienen símbolos o pictogramas en lugar de letras y números. Se pueden cambiar de tamaño fácilmente usando CSS y no aumentarán los tiempos de carga de su página, a diferencia de lo que harían los sprites de imagen utilizados anteriormente.

Puede usarlos para agregar íconos a sus menús de navegación, cuadros de funciones, títulos de publicaciones y más.

Hay varias razones por las que debería utilizar una fuente de icono que no sea la apariencia visual:

• Los íconos de fuentes responden completamente: son esencialmente archivos vectoriales, lo que significa que pueden escalar a cualquier tamaño sin perder calidad.
• Los iconos de fuentes se pueden diseñar, colocar y manipular: dado que son fuentes, puede manipularlos de la misma manera que lo haría con una fuente tradicional. Establezca su color, cambie su estilo al pasar el mouse, controle sus alineaciones, establezca su tamaño y más.
• Los iconos de fuentes son altamente compatibles con todos los navegadores y hay muchos de ellos.
• Los diseñadores han dedicado muchas horas a estos iconos y se actualizan con frecuencia y tienen como objetivo proporcionar la mejor experiencia.

Hay dos formas de agregar FontAwesome a su sitio web de WordPress y repasaremos ambos métodos. El primer método implica el uso de un plugin y el segundo implica agregar la fuente manualmente.

Opción 1: agregar fuentes de iconos en WordPress usando plugins

El uso de un plugin es, con mucho, el método más fácil de agregar cualquier ícono de fuente a su sitio web. En este ejemplo usaremos Mejor fuente impresionante para agregar la fuente al sitio web.

Paso 1: instalar y activar

Lo primero que debe hacer es instalar y activar el plugin Better Font Awesome.

Navegue a su tablero y luego haga clic en Complementos> Agregar nuevo. Busque FontAwesome y luego haga clic en Instalar.

Por último, active el plugin. Tras la activación, puede visitar la página Configuración> Mejor fuente impresionante para configurar los ajustes del plugin. En la mayoría de los casos, esto no es necesario ya que el plugin funciona de fábrica, por lo que no necesitará cambiar nada allí.

Paso 2: agregar sus iconos de fuentes

Better Font Awesome te permite agregar íconos de fuentes usando varios códigos cortos como este:

[icon name=”binoculars”]

[icon name=”gift”]

[icon name=”map”]

Los iconos también se pueden agregar en el editor de publicaciones simplemente seleccionando el icono deseado. Si crearas una nueva publicación ahora, notarás un nuevo ícono en tu editor de publicaciones. Al hacer clic en él, aparecerá una ventana emergente donde puede ubicar un icono e insertarlo.

Paso 3: personaliza tus iconos de fuentes

El plugin agregará un código abreviado en su publicación y si desea personalizar aún más el ícono, puede hacerlo agregando su propia clase CSS y luego ingresando los estilos específicos en su hoja de estilo.

El código abreviado predeterminado se ve así:

[icon name=”coffee” class=”” unprefixed_class=””]

Una vez que agrega una clase para fines de estilo, se ve así:

[icon name=”coffee” class=”” unprefixed_class=””]

Una vez que agrega una clase para fines de estilo, se ve así:

[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]

Para darle estilo, vaya a Apariencia> Editor y abra la hoja de estilo de su tema. Agregue las siguientes líneas:

i.fa.fa-coffee.fa-mycoffeeicon {

font-size:100px;

color:#ba1157;

}

Es así de simple.

Ahora veamos cómo agregar FontAwesome manualmente.

Opción 2: agregar fuentes de iconos en WordPress manualmente

Las fuentes de iconos no son más que fuentes que consisten en iconos. Como tales, se pueden agregar fácilmente tal como agregaría cualquier fuente personalizada. Algunas fuentes de iconos, como FontAwesome, están disponibles en servidores CDN en la web y se pueden vincular directamente desde su tema de WordPress.

También puede cargar todo el directorio de fuentes en una carpeta en su tema de WordPress y luego usar esas fuentes en su hoja de estilo.

Cubramos ambos métodos aquí.

Método 1: agregar código al archivo header.php de su tema

El método más fácil es incluir una línea en el archivo header.php de su tema, justo antes de la etiqueta.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Aunque este es el método más fácil, no es realmente la forma correcta de WordPress y puede causar conflictos con otros plugins. Un enfoque mucho mejor es poner en cola correctamente la hoja de estilo en WordPress a través de su archivo functions.php.

Haga clic en Apariencia> Editor y luego seleccione su archivo functions.php. Al final, agregue las siguientes líneas:

function ala_load_fa() {

wp_enqueue_style( 'ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Una vez que haya terminado, haga clic en el archivo de actualización.

Método 2: agregue iconos de fuentes al directorio de su tema de WordPress

El segundo método te permite tener los iconos disponibles en tu tema e incluye un poco de trabajo preliminar. Primero, necesitas descargar la fuente del icono y descomprima el paquete. Luego, use un programa como FileZilla para conectarse a su sitio web a través de FTP.

Vaya al directorio de su tema de WordPress, cree una nueva carpeta y asígnele el nombre fonts o fontawesome.

Luego, cargue el contenido de las fuentes de los iconos en la carpeta que acaba de crear.

Una vez hecho esto, deberá agregar las fuentes a su tema de WordPress. Simplemente agregue este código al archivo functions.php de su tema.

function ala_load_fa() {

wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Haga clic en el archivo de actualización y habrá cargado FontAwesome con éxito en su tema de WordPress.

La parte final es agregar íconos a su tema, publicaciones o páginas de WordPress.

Puede hacerlo manualmente al incluir el nombre del icono en cualquier lugar que desee que se muestre.

Ir Sitio web de Font Awesome para ver la lista completa de iconos disponibles. Haga clic en cualquier icono que desee utilizar y podrá ver el nombre del icono. Haga clic en Copiar para copiar el nombre del icono y luego insértelo en su publicación o editor de página:

<i class="fa-coffee"></i>

También puede personalizar el icono en la hoja de estilo como lo hicimos anteriormente.

También puede combinar diferentes iconos y diseñarlos a la vez. Esto es útil si, por ejemplo, desea crear una lista de enlaces con iconos junto a ellos. Simplemente envuélvalos debajo de un elemento div con una clase específica así:

<div class="my-icons">
<a class="icons-group-item" href="https://www.wpsuperstars.net/fontawesome-icons-tutorial/#"><i class="fa fa-apple fa-fw"></i>Home</a>
<a class="icons-group-item" href="https://www.wpsuperstars.net/fontawesome-icons-tutorial/#"><i class="fa fa-bars fa-fw"></i>Library</a>
<a class="icons-group-item" href="https://www.wpsuperstars.net/fontawesome-icons-tutorial/#"><i class="fa fa-asterisk fa-fw"></i>Applications</a>
<a class="icons-group-item" href="https://www.wpsuperstars.net/fontawesome-icons-tutorial/#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Ahora puede diseñarlos en la hoja de estilo de su tema de esta manera:

.icons-group-item i {

color: #333;

font-size: 50px;

}

.icons-group-item i:hover {

color: #ba1157;

}

Pensamientos finales

En un tutorial anterior, le mostramos cómo agregar dashicons a WordPress y cómo usarlos. Agregar FontAwesome es bastante similar. Es una excelente manera de hacer que su sitio web sea más interesante y hay muchas formas de usar fuentes de iconos.

Puede usarlos para diseñar su menú de navegación o agregarlos a los títulos de las publicaciones. Puede usarlos dentro de sus publicaciones, cuando desee llamar la atención sobre algo importante.

Incluso puede agregarlos a sus widgets, ya que los widgets aceptan entrada HTML. Considere cuánto más podría ser su widget de boletín si le agregara un ícono de sobre. O si usa un cuadro de autor, puede usar FontAwesome para mostrar sus perfiles de redes sociales.

La mejor parte es que sin importar qué dispositivo o navegador estén usando sus visitantes, siempre podrán ver íconos nítidos y receptivos.