Font Awesome es la fuente de íconos vectoriales más utilizada, los iconos son escalables y pueden personalizarse por tamaño, color y cualquier atributo que se pueda cambiar con css, la nueva versión de Font Awesome 5 dispone de iconos nuevos, muchos, si utilizas Sage en tus proyectos WordPress seguro que estás deseando probar esta nueva versión de iconos.
Para instalar la nueva versión de Font Awesome 5 en Sage 8 tenemos que incluir la dependencia en el archivo bower.json, el siguiente código está basado en la versión 8.5.4 de Sage, debería funcionar en versiones anteriores que utilicen sass.
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0",
"Font-Awesome": "https://github.com/FortAwesome/Font-Awesome.git#^5.0.8"
},
"overrides": {
"bootstrap": {
"main": [
"./scss/bootstrap.scss",
"./dist/js/bootstrap.bundle.js"
]
},
"Font-Awesome" : {
"main": [
"./web-fonts-with-css/scss/fontawesome.scss",
"./web-fonts-with-css/scss/fa-brands.scss",
"./web-fonts-with-css/webfonts/fa-brands-400.eot",
"./web-fonts-with-css/webfonts/fa-brands-400.svg",
"./web-fonts-with-css/webfonts/fa-brands-400.ttf",
"./web-fonts-with-css/webfonts/fa-brands-400.woff",
"./web-fonts-with-css/webfonts/fa-brands-400.woff2",
"./web-fonts-with-css/scss/fa-regular.scss",
"./web-fonts-with-css/webfonts/fa-regular-400.eot",
"./web-fonts-with-css/webfonts/fa-regular-400.svg",
"./web-fonts-with-css/webfonts/fa-regular-400.ttf",
"./web-fonts-with-css/webfonts/fa-regular-400.woff",
"./web-fonts-with-css/webfonts/fa-regular-400.woff2",
"./web-fonts-with-css/scss/fa-solid.scss",
"./web-fonts-with-css/webfonts/fa-solid-900.eot",
"./web-fonts-with-css/webfonts/fa-solid-900.svg",
"./web-fonts-with-css/webfonts/fa-solid-900.ttf",
"./web-fonts-with-css/webfonts/fa-solid-900.woff",
"./web-fonts-with-css/webfonts/fa-solid-900.woff2"
]
}
}
}
A continuación tenemos que declarar la variable en nuestro main.scss
@import "common/variables";
$fa-font-path: '../fonts';
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
Bower importará de forma automática las fuentes
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fontawesome.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-brands.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-regular.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-solid.scss";
Por último mostramos las fuentes con el siguiente código:
<i class="far fa-file-image"></i>
<i class="fas fa-file-image"></i>
Puedes ver todos los iconos de Font Awesome 5 en este enlace
Valoraciones
Sé el primero en valorar