How to use Fontawesome 5 in a Meteor project?
The official Fontawesome packages uses version 4:
How to use Fontawesome 5 in a Meteor project?
The official Fontawesome packages uses version 4:
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'
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.
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();
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';
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…
this is what I did to import it directly from NPM:
// import fontawesome
import '@fortawesome/fontawesome-free/js/all.js'