Solucionar Font Awesome en tema Orbital

Solucionar Font Awesome en tema Orbital

En dos sitios web dónde tengo instalado el tema Orbital de Romuald, noté hace poco que muchos iconos habían desaparecido mientras que otros no. Recientemente en la página de Font Awesome hicieron un anuncio dónde el código para insertar los iconos ha cambiado a partir de la versión 5.

Este cambio es algo que no debe tomarse a la ligera ya que está afectando a muchos sitios web porque fue un cambio generalizado.

Tema Orbital no muestra Font Awesome

Si eres uno de los múltiples usuarios de este excelente tema y si además eres usuario de WooCommerce, seguramente al momento de instalarlo habrás notado un aviso por parte de WC acerca de que el tema contenía archivos muy viejos.

Debo admitir que no me importó demasiado hasta el día de ayer actualicé WC a su última versión, me di cuenta que todos los iconos habían desaparecido.

Al inicio creí que había sido causado por algún plugin que estaba cargando alguna otra versión de Font Awesome o que por el contrario estaba bloqueando la carga.

Si eres observador, te habrás dado cuenta que los iconos de la versión 4 no se vieron afectados.

Y es que en la última actualización de WooCommerce han cambiado todos sus iconos a la version 5 de Font Awesome.

Antecedentes

No pretendo ser un maestro y explicar todo desde cero pero esta parte es importante que la entiendas.

En la versión 4 de FA, la forma de insertar los iconos en el código era como en el ejemplo a continuación:

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

En la nueva versión, se ha eliminado la clase fa y ha sido sustituida con fas como puedes ver a continuación:

<i class="fas fa-igloo"></i>

El anuncio está en la página de documentación.

Entonces, debido a que el tema Orbital sigue utilizando los códigos de la versión 4 (con fa) y la última actualización de WC ya ha introducido los iconos en la versión 5 (con fas), no se están mostrando correctamente.

Solución

Supongo que a esta altura ya lo habrás deducido, la solución es decirle al tema Orbital que utilice las dos versiones de Font Awesome.

A pesar de sonar como algo bastante simple, en realidad no lo es, comenzando porque cuando abrí el header.php del tema me di cuenta que ya se estaba llamando a la versión 5 del FA.

No es la última versión pero al menos ya es la 5.

Entonces mi duda se hizo más grande. Si ya se estaba llamando a la librería pero aún así no se mostraban los iconos en WooCommerce entonces ¿dónde estaba el problema?

Algo que también noté es que el icono de búsqueda del menú sí se estaba mostrando.

Después de investigar un poco con la función de Inspeccionar de Chrome, me percaté que ese icono se estaba llamando con la versión anterior.

Entonces… se estaba llamando a Font Awesome en su versión 5 pero los iconos de esa versión no se mostraban, sin embargo, los iconos versión 4 sí aparecían. Algo estaba muy extraño.

Investigué un poco más y una de las opciones era cambiar a mano el código del plugin para regresar todos los iconos a la versión 4, después me encontré con un articulo dentro de la página de FA y leí que no recomendaban mezclar las versiones porque podrían surgir problemas.

Unos minutos después también recordé lo que te mencionaba al inicio, que WooCommerce se quejaba de que el tema Orbital tenía archivos muy viejos.

Entonces atando cabos, dije, Orbital debe estar llamando a la versión 4 en algún lado y se le está dando prioridad… entonces vualá! encontré dentro de la carpeta de Assets un archivo css llamado fontawesome.css con todas las llamadas a los códigos Ver. 4

Sin embargo eso era otro problema, pude haber reemplazado ese archivo por código para la nueva versión pero eso significaba que todos los iconos insertados nativamente el en tema dejarían de trabajar.

Es decir solucionaría una cosa por otra.

Seguí investigando y vi que Font Awesome había creado una versión 4 temporal que trabajaba de la mano con la 5. Sin embargo esta es una solución temporal, en cierto tiempo FA dejará de dar soporte a este enlace.

Lo que hay que hacer es irnos al archivo header.php del tema e insertar estas dos líneas de código:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/v4-shims.css">

Hay que colocarlas encima del script que pongo a continuación:

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

El código del header debería lucir así en su totalidad:

<?php
/**
 * The header
 *
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Orbital
 * @since 1.0
 */

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/v4-shims.css">
	<script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"></script>
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<a class="screen-reader-text" href="#content"><?php _e( 'Skip to content', 'orbital' ); ?></a>

	<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

	<?php get_template_part( 'template-parts/navbar/navbar', 'top' ); ?>

	<?php if(orbital_customize_option('orbital_layout_search_navbar')) get_template_part( 'template-parts/search/content-search', 'navbar' ); ?>

Esperemos que Fons y su equipo corrijan pronto esta situación de lo contrario cuando se deje de dar soporte a la Ver. 4 nos veremos en graves aprietos.

Entendamos esto como una solución temporal en lo que se corrige de fondo del problema con el equipo de Fons, es posible que esta solución también funcione para otros temas.

¡Hasta otra!