Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 273
Roman Avatar asked Apr 06 '18 07:04

Roman


People also ask

Why do my font awesome icons show up as blank squares?

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.

Why are my Fontawesome icons not working?

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).

How do I use Font Awesome 5 icons?

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.


1 Answers

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

like image 135
Ru Chern Chong Avatar answered Oct 10 '22 13:10

Ru Chern Chong