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:
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. This is why my fonts were showing blank squares.
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).
To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With