Font Awesome es un conjunto de iconos vectoriales escalables que se han convertido en un gran recurso para diseñar páginas web. Es una bibloteca gratuita de 1388 iconos, su versión Pro tiene 4357 íconos y tres estilos .

En lugar de crear iconos o de subir íconos a la web, este gran recurso facilita embellecer la web y como son vectores se verán perfectamente en cualquier pantalla, y a cualquier resolución.

Son totalmente personalizables. Podemos cambiar su tamaño, color e incluso animarlos.

Agregar la biblioteca Font Awosome

Busca el archivo Funciones del tema, o functions.php y copia el siguiente pedazo de código:

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’ );
}

¿Cómo insertar un icono de Font Awesome en una entrada de WordPress?

Primero visita la web de Font Awsome y familiarízate con los íconos, cada uno de ellos viene con información para indexar a la web:

Hay dos formas una en html: Antes de la frase, párrafo, lista a la que le quieras agregar un ícono ponle esto: <i class=”fas fa-heart”></i> . Font Awesome nos lo ponen fácil, y con solo clicar sobre el código, lo pegaremos de forma automática en nuestro portapapeles.

La segunda forma es con pseudoelementos, esta es la forma que mas me gusta básicamente porque se puede aplicar un mismo icono a una misma clase y esto es perfecto para el caso de listas, en las que es muy usual usar íconos.

Así se haría:

.viajarmucho::before{
content: “\f004”;
font-family: “Font Awesome 5 Free”;
vertical-align: middle;
font-weight: 900;
display: inline-block;
padding-right: 3px;}

Con las dos primeras líneas ya bastaría, la primera es el código o la referencia de un ícono específico, este caso un teléfono y la segunda es la familia que en este caso es la biblioteca gratuita de Font Awesome, los demás valores CSS es personalización a su gusto.

Espero que les sirva y le pongan mucho a todos sus trabajos.