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:

回答1:

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

来源：https://stackoverflow.com/questions/49687261/font-awesome-5-fa-github-fa-twitter-etc-not-working-squares

标签

css

Webpack

font-awesome