Search code examples
csswebpackfont-awesome

Font Awesome 5 fa-github, fa-twitter, etc. not working (squares)

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:

enter image description here

Solution

  • 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