¿Te gusta usar íconos en tus publicaciones, pero justo los de las redes sociales no te parecen los más adecuados para tu sitio? Si aún no sabes cómo buscar unos excelentes y tenerlos de forma legal, en este post vamos a contarte de Font Awesome en WordPress.
Conociendo Font Awesome
Pero, ¿qué es Font Awesome y por qué resulta tan genial incluirlo en tu WordPress? Lo que encontramos en este sitio es básicamente una biblioteca de íconos vectoriales. La gran ventaja que ofrece el sistema es que no es necesario ni buscar en la red o comprar paquetes, ya que esta plataforma te permite instalar y personalizar lo que se encuentra en su amplio repertorio.
Otra excelente ventaja que encuentras al tener Font Awesome en WordPress es que mucho del material es de uso libre, ya sea para un sitio, tema o plugins. Son usados, incluso, para diseños no relacionados con la web propiamente.
En Font Awesome el usuario puede encontrarse con licencia libre, como ya lo habíamos señalado, donde se encuentran 1388 íconos. También hay una versión de pago (Pro de 60 $) con otro gran repertorio de hasta 4357 íconos.
Ahora bien, conociendo esto, quizás te sea más sencillo entender la recomendación de usar Font Awesome en WordPress. Pero, cómo usarlo y en qué casos lo sugerimos. Descubramos más de esto ahora mismo.
Por qué añadir Font Awesome en WordPress
Resumamos las razones por las que algunos desarrolladores y administradores usan Font Awesome en WordPress:
- La presentación de los íconos es vectorial. Esto facilita la redimensión y resolución de los mismos para anexarlos a cualquier proyecto.
- La personalización es parte del encanto, ya que se puede cambiar color, tamaño o incluso se puede agregar animación.
- Los iconos de Font Awesome provienen del repositorio más seguro de SVG (lenguaje basado en HTML).
- Se adaptan perfectamente a cualquier navegador, lo cual les da versatilidad.
Cómo usar Font Awesome en WordPress
Ahora sí, conociendo ya todos estos argumentos previos, sí pasaremos a explicar cómo usar iconos de Font Awesome en WordPress. Tenemos dos opciones que resultarán sencillas: hacerlo de forma manual o mediante un plugin.
Añadir iconos de Font Awesome en WordPress de forma manual
Esta es la alternativa para ahorrarnos un plugin más, que sabemos que llenar nuestro WordPress de esto no resulta nada beneficioso. En este caso vamos a usar un código en nuestro editor, por lo que es recomendable crear un tema hijo de nuestra plantilla.
Ubicados dentro del Editor en la sección de Apariencia de tu WordPress debemos buscar en el explorador de archivos, functions.php y copiar lo siguiente:
add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
function enqueue_load_fa() {
wp_enqueue_style( ‘load-fa’, ‘https://use.fontawesome.com/releases/v5.3.1/css/all.css’ );
}
Una vez que hemos copiado esto, solo debemos guardar y verificar que quede funcional en nuestro sitio. Para verificar esto solo abriremos o añadiremos una nueva entrada y probamos lo siguiente:
- En la web Font Awesome veremos en cada icono un código HTML.
- Deberemos copiar este código del ícono que nos interesa insertar y pegarlo en nuestro sitio, pero, eso sí, en la pestaña HTML de la entrada, esto para que se pueda reconocer el mismo y podamos verlo.
Añadir iconos de Font Awesome en WordPress mediante plugin
Para usar Font Awesome en nuestro WordPress, el propio sistema nos lo pone fácil al ofrecernos plugins que lo hagan. En este caso la recomendación es usar Better Font Awesome. La ventaja es que cada vez que nos solicite una actualización, el propio plugins añadirá los íconos del sistema que recién se han añadido.
Recuerda ir a tu repertorio de plugins, buscar e instalar el mismo. Una vez hecho esto solo hace falta activar el mismo.
Ahora bien, para probar este solo debemos crear una entrada. En nuestra sección de herramientas, cerca de la sección de “Add Medios” vamos a encontrar la opción de “Insert Icon” o Insertar ícono.
Tenemos dos formas de insertar lo que necesitamos, navegar o buscar. Una vez que te familiarices con esta opción te será más sencillo ubicar los íconos de tu interés.
Algo importante de señalar es que el ícono no se mostrará como tal, sino que veremos: [icon name=”wordpress” class=”” unprefixed_class=””]
Esta es la manera en la que se observa el ícono en nuestra entrada. El mismo mostrará la figura al publicar o visualizar previamente la misma.
Personalizar iconos de Font Awesome en WordPress
Vamos a destacar un aspecto que seguro te parecerá magnífico para dar tu toque a los íconos de Font Awesome. Se trata, en este caso, de la personalización.
Aunque sí hará falta un poco de conocimiento de HTML y CSS, los cambios valen la pena y no será difícil aprender un poquito más haciendo esto. ¿Qué cambios podemos implementar en estos íconos? Veamos:
Cambiar el tamaño
Al estar en formato SVG los íconos puedes redimensionarlos. Para hacer esto solo vamos a trabajar un poco con el HTML del propio ícono. Para hacerlo vamos a trabajar de la siguiente forma:
- Cuando queremos que el ícono aumente en un doble o triple de su tamaño, insertaremos el fa-2x o fa-3x y así sucesivamente según lo necesitemos.
- Al hacer este cambio de forma manual, obtendremos algo como lo que te muestro a continuación:
<i class=”fab fa-wordpress fa-2x”></i>
- Si usamos el plugin, entonces nos quedaría esto:
[icon name=”wordpress” class=”fa-2x” unprefixed_class=””]
Cambiar el color
Como hemos visto, el cambio resulta muy sencillo de implementar y de aplicación inmediata. Así mismo sucederá cuando hagamos el cambio del color, pero con un poquito más de truco. Veamos:
- En este caso necesitaremos aplicar algo de conocimiento CSS. En este caso nos toca entrar nuevamente a la edición dentro del Panel de Control en Apariencia > Personalizar. Añadiremos entonces el siguiente código:
.fa-NOMBRE {
color: COLOR;
}
- En este código modificaremos el nombre que nos da el código HTML (wordpress) y en el parámetro de COLOR vamos a insertar el código HEX. Nos quedaría, por ejemplo, algo así:
.fa-wordpress {
color: #00a0d2;
}
Recordemos que solo será necesario cambiar el color del ícono buscando el código HEX. Hay muchas webs que te orientan sobre estos nombres HTML, una de ellas te las dejo aquí.
Animarse a hacer este cambio es empezar a ver el Font Awesome en WordPress desde una perspectiva más profesional. De esta forma también puedes animarte a hacer otros cambios a los íconos, como, por ejemplo:
- Transparencias.
- Cambio de color al pasar el cursor sobre el ícono.
- Añadir animaciones.
En relación con este último te recomendamos la web Animista. En esta podrás hacer creaciones interesantes y dar tu propio toque a los íconos animados de Font Awesome en WordPress.
¿Te ha parecido interesante esta opción de insertar íconos a tu sitio y hacer los cambios para adaptarlos a tu estilo? ¡Excelente! Eso es justo lo que buscamos con este escrito. No obstante, si quieres hacer este y otros cambios, pero, no te atreves, es momento de pensar en contratar un Diseñador web WordPress Freelance.
¿Necesitas ayuda con tu sitio Web? Es momento de charlar sobre esto
Dar vida a tu sitio, resolver los errores y hacer una gestión más eficiente de tu blog, página o ecommerce nunca fue tan sencillo como contratar a un Diseñador web WordPress experto. Charlemos sobre lo que necesitas y conviene a tu sitio, estoy seguro de poder ayudarte y sentir mucho menos estrés al dejar en manos expertas su administración.
Lograr una web exitosa y que trabaje de manera óptima resulta sencillo cuando tienes la ayuda que necesitas. Trabajemos juntos para implementar mejoras hoy y lograr tus objetivos en un corto plazo.
