I have a website, setup with webpack. I added Font Awesome Pro and configured the global token for it. So the Pro Icons are working.
But some doesn't, like fa-github
or fa-twitter
. And these are actually even free icons. A few days ago they worked.
Here's my code how I set everything up:
Package.json:
"dependencies": {
"@fortawesome/fontawesome": "^1.1.5",
"@fortawesome/fontawesome-free-brands": "^5.0.9",
"@fortawesome/fontawesome-pro-light": "^5.0.9",
"@fortawesome/fontawesome-pro-regular": "^5.0.9",
"@fortawesome/fontawesome-pro-solid": "^5.0.9",
"@fortawesome/fontawesome-pro-webfonts": "^1.0.5",
}
main.scss:
$fa-font-path: "~@fortawesome/fontawesome-pro-webfonts/webfonts";
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fa-light.scss';
webpack:
resolve: {
alias: {
'@fortawesome/fontawesome-pro-solid$': '@fortawesome/fontawesome-pro-solid/shakable.es.js',
'@fortawesome/fontawesome-pro-regular$': '@fortawesome/fontawesome-pro-regular/shakable.es.js',
'@fortawesome/fontawesome-pro-light': '@fortawesome/fontawesome-pro-light/shakable.es.js'
}
},
<i class="fal fa-check"></i> // Does work
<i class="fal fa-github"></i> // Does not work
<i class="fal fa-twitter"></i> // Does not work
What am I missing? Do I have to import another CSS file for these? I didn't find any.
Edit: Added photo of folder structure:
Alternatively,
You can import Font Awesome icons the Javascript way.
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(brands)
You will need the @fortawesome/font-awesome-pro-brands
package for this.
Use <i class="fab fa-github"></i>
and <i class="fab fa-twitter"></i>
You cannot use fal
for the class since there are no social icons in the font-awesome-pro-light
set.
See: https://fontawesome.com/icons?d=gallery&q=github&s=light