¿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.
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.
Resumamos las razones por las que algunos desarrolladores y administradores usan 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.
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:
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.
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:
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:
<i class=”fab fa-wordpress fa-2x”></i>
[icon name=”wordpress” class=”fa-2x” unprefixed_class=””]
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:
.fa-NOMBRE {
color: COLOR;
}
.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:
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.
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.
Una de las secciones que se necesitan personalizar casi en cada sitio web es el… Leer más
Seguramente ya has escuchado hablar sobre las famosas “Migas de Pan”, en inglés conocidas como… Leer más
Si necesitas que en una entrada de WordPress no aparezca el nombre del autor, existen… Leer más
El modo “Mantenimiento en WordPress” es la manera que tenemos de comunicarle a nuestros usuarios… Leer más
Al igual que las páginas en mantenimiento, tener una página en construcción en WordPress resulta… Leer más
Crear páginas web nunca fue tan versátil como con WordPress. Esto sin necesidad de saber… Leer más