Esto se logra descargando un archivo .zip que te proporciona la misma gente de FontAwesome en su página donde explica cómo hacerlo tú mismo.
Allí obtenemos los siguientes archivos
De esos directorios vas a pasar la carpeta webfonts y la carpeta css a un directorio fuera del tema, para que puedas hacer uso así se cambie de tema. Lo que yo hice fue crear un directorio llamado fontawesome dentro del directorio /content/ de WordPress.
Allí subí las dos carpetas, css y webfonts, quedando así:
El directorio webfonts guarda los archivos .svg.
Es importante que la carpeta webfonts esté situada en el mismo directorio donde está la carpeta css, es decir, que estén las dos dentro del mismo directorio porque dentro del directorio CSS hay varios archivos css, dentro de esos archivos se hacen llamados a recursos en el directorio webfonts. Estos son los archivos dentro de la carpeta css:
Luego hay que hacer una referencia en el header al archivo all.css.
Luego solo resta ir a la misma FontAwesome y buscar las clases que se quieran usar e insertarlas dentro de una etiqueta <i></i>.
Cumplir con las Core Web Vital
El mismo manual de FontAwesome te indica que hagas referencia en el head al archivo all.css solamente. Pero que si se desea usar la menor cantidad de código css entonces que secciones y hagas llamadas a los archivos individuales dependiendo de los tipos de iconos que vallas a usar.
Eso es hacer referencia en el head al archivo fontawesome.css y luego, dependiendo de qué iconos se vallan a usar, a los archivos brands.css, regular.css y/o solid.css. Los archivos marcados como regular entiendo que son de pago. Por lo que la cosas quedaría solo con brands.css y solid.css.
Pero aún se puede hacer algo más
Igualmente estos archivos tendrán más códigos de los que se necesitan y los suficiente como para no pasar las CWV.
Lo que suelo hacer es sacar los css que necesito e incorporarlos en un archivo aparte que nombro critical.css, el cual también lo coloco en la carpeta fontawesome/css/.
El código crítico css lo saco haciendo un llamado solo al archivo all.css y luego con la ayuda de la cónsola de DevTools de Chrome busco el código que se está usando y como quien dice por allí lo copio y pego a mano.
No obstante si solo estoy usando pocos códigos css puede que me ahorre el llamado a un archivo colocando los códigos css inline en el header de la web.
Hay algunos códigos CSS que no tienen la marca azul si no roja pero sí son necesarios, abajo dejo lo que debe ir en ese archivo de css crítico, además de los CSS particulares de los iconos que se estén usando:
<style type=text/css>
.fa, .fas, .far, .fal, .fad, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fa-2x {
font-size: 2em;
}
/*Aquí debería ir el CSS particular para cada icono que se esté usando*/
/*En mi caso son estos tres que siguen*/
.fa-file:before {
content: "\f15b";
}
.fa-linkedin:before {
content: "\f08c";
}
.fa-wordpress:before {
content: "\f19a";
}
/*Fin de los bloques css particulares a los icones que estés usando, el resto es siempre debe ir*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa, .fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
</style>Finalmente me decanté por dejarlo todo inline en el head, ya que PSI continúa colocando el archivo como un recurso que bloquea el renderizado.