Fontawesome 5 in Meteor project?

How to use Fontawesome 5 in a Meteor project?

The official Fontawesome packages uses version 4:

https://atmospherejs.com/fortawesome/fontawesome

Its just an npm project so use it like any any other npm package. Important to note that they now scope it to @fortawesome like so:
meteor npm i --save @fortawesome/fontawesome-free

I have been using both the free and pro versions in meteor since 5 first came out with this approach.

Thanks!

So, that would then be this command, right?

meteor npm install --save @fortawesome/fontawesome-free

Correct, I was mainly showing the scope change. I will edit my post to avoid confusion.

This actually didn’t work.

In package.json I now have

...
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.5.0",
    "meteor-node-stubs": "^0.4.1"
  },
...

But using <i class="fas fa-cog fa-spin"></i> in my template shows nothing.

Some trial and error later, I figured it out, though I’m sure I’m not implementing the most efficient solution.

First (on the command line):

meteor npm install --save @fortawesome/fontawesome
meteor npm install --save @fortawesome/fontawesome-free-regular
meteor npm install --save @fortawesome/fontawesome-free-solid
meteor npm install --save @fortawesome/fontawesome-free-brands

Then (in the relevant .js, for me this was body.js):

import fontawesome from '@fortawesome/fontawesome';
import regular from '@fortawesome/fontawesome-free-regular'
import solid from '@fortawesome/fontawesome-free-solid'
import brands from '@fortawesome/fontawesome-free-brands'
1 Like

So I dont know if this is the best way but this solution worked for me.

meteor npm install --save @fortawesome/fontawesome-free
from you /imports directory

sudo ln -s ../node_modules/@fortawesome/fontawesome-free/

In your main.js

import '/imports/fontawesome-free/js/all.js';

This will give you all font awesome icons at the current version.

you can also lower the load by importing brands.js regular.js or dolid.js depending on what you need.

I was trying to find a way to import directly from the node_module folder but it did not seem to work if I fif
import all from ‘@fortawesome/fontawesome-free’ as I thought it would.

Has anyone got it to work directly from the npm without the import on the latest version?

NOTE::
By default this converts the i tags to svg… this can be disabled:
window.FontAwesomeConfig = { autoReplaceSvg: false }

Just aside, if you are using React and styled-components you can use styled-icons which have font awesome and other icons easily available.

https://styled-icons.js.org/

1 Like

Importing all.js is very heavy for the bundle size. I think it adds close to 1MB!
I ended up importing only fonts that are used in an app. Something like this:

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';

library.add(faSearch);
dom.watch();
4 Likes

We had a problem with reactivity in Blaze. Old icons were not removed correctly, and icon classes couldn’t be changed.

Solved it by using svg-core as proposed by ignl, with this additional configuration:

import { config } from '@fortawesome/fontawesome-svg-core';
config.autoReplaceSvg = 'nest';
4 Likes

This works really great! I just have one problem with this solution.

Previous I used Font Awesome 4.7.0 and there it was possible to use the unicode version of the symbols in the content of an :after pseudo-class or in a placeholder for example… Somehow this does not work for me with FontAwesome 5…

I changed the font-family to ‘Font Awesome 5 Free’ but I just get an empty rectangle…

1 Like

this is what I did to import it directly from NPM:

// import fontawesome
import '@fortawesome/fontawesome-free/js/all.js'
3 Likes