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

Question

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:

Simplism

can you show us the image of your folder structure – Felicidad

you need to include webfonts folder also.. make sure you provided the correct path for webfonts – Felicidad

Thank you for your fast answer! Image added. The paths should be correct. Everythings compiling in webpack and as mentioned the other icons are working (lika fa-check or fa-birthday-cake) – Simplism

Answer 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

Blabbermouth

Thanks for noting this with fal and fab! I even copied some out of the documentation, but it still doesn't work. @fortawesome/fontawesome-pro-brands or @fortawesome/font-awesome-pro-brands don't exists. I just find the free-brands package. I added the free-brands package to the resolve config for webpack. Do I have to import anything else in my main.scss? I can't find any scss file in the free-brands package.. – Simplism

Hi, have a look at my edited answer. You can import the fonts via Javascript way. I just use one pack as an example. Feel free to change accordingly to the icon packs that you need. – Blabbermouth

Answer 2

I was just solving this not working "fa-github" icon issue in my Vuetify project and the solution was actually super simple:

fab fa-github

Or the long version:

fa-brands fa-github

It's actually mentioned in the icon description in the webpage that this is a "brands" class icon so you need to add the fab prefix.

Bicentenary

Answer 3

If font awesome icons like github, instagram, linkedIn are not detected in font-awesome. It means you haven't installed the icon dependencies for brands.

1. Make sure you have the @fortawesome/free-brands-svg-icons package installed:

   npm install @fortawesome/free-brands-svg-icons

   #or

   yarn add @fortawesome/free-brands-svg-icons

2. Import and use icons as needed in your components. Example:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons';

export default function SocialIcons() {
  return (
    <div>
      <a href="https://github.com/yourprofile" target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faGithub} />
      </a>
      <a href="https://instagram.com/yourprofile" target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faInstagram} />
      </a>
      <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faLinkedin} />
      </a>
    </div>
  );
}

Kainite