Descubre en este tutorial cómo actualizar los iconos de Font Awesome en los child themes de AsiThemes mediante código.
Todos los temas de Genesis de AsiThemes incluyen la librería de Font Awesome, pero en estos momentos (mientras escribo este tutorial a 01/10/19) cargan la versión 4.7.
¿Prefieres cargar una versión de Font Awesome más moderna?
Si me ha pasado a mí (con lo minimalista que soy) seguro que a ti también te viene de perlas.
Y es que con el tiempo van añadiendo nuevos iconos y mejoras, sobre todo a partir de la versión 5.
Por cierto, aunque el tutorial está pensado para los temas de AsiThemes, puedes aplicarlo a cualquier otro child theme de Genesis.
¿Vamos allá?
Pasos para actualizar Font Awesome en temas de AsiThemes
1. Modifica el fichero functions.php
Primero necesitas actualizar la fuente desde donde se accede a la librería de Font Awesome.
Para ello, sustituye este fragmento del fichero functions.php:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este código, en lugar acceder la librería desde BootstrapCDN, la obtienes usando la CDN de Cloudfare, la cual suele tener las versiones de Font Awesome bastante actualizadas.
Para realizar futuras actualizaciones solo tendrás que cambiar el número de la versión. Es decir, cambiar /v5.10.2/ por /v5.x.x/.
Asegúrate de que la hoja de estilos se está cargando correctamente desde el inspector web, en el apartado de recursos:
2. Cambia el fichero style.css
En segundo lugar, necesitas actualizar el fichero de estilos, ya que a partir de la versión 5.0 de Font Awesome se utiliza una nomenclatura diferente.
Es muy simple. Solo tienes que sustituir esta línea:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Asegúrate también de incluir el font-width o los iconos no se visualizarán correctamente en algunos navegadores.
Ahora ya tienes a tu disposición todos los nuevos iconos de Font Awesome 5.
De hecho, este mismo proceso fue el que utilicé en el rediseño de Código Genesis (que está basado en un tema de AsiThemes) para poder añadir el marcador de favoritos (que no está disponible en la versión 4.7 de Font Awesome).
3. Cambia el fichero genesis.php (opcional)
Si estás usando los campos de redes sociales desde el personalizador de WordPress para que se muestren en el menú del footer (u otro), tendrás que hacer un cambio adicional.
De la versión 4 a la 5 de FontAwesome se ha cambiado la nomenclatura de algunos de los iconos, por eso tendrás que actualizarlos también para asegurarte de que se muestran correctamente.
Para ello, en el fichero genesis.php de la carpeta /inc/ sustituye:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este cambio te asegurarás de que los iconos de redes sociales están actualizados y se muestran correctamente.
Conclusiones
Ahora ya sabes cómo actualizar los iconos de Font Awesome en cualquier child theme de AsiThemes u otros temas de Genesis Framework.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
