Been trying to get FA5 working. I have everything installed as I per this document and verified it’s all there. When I add an icon it comments itself out like this:
Hey @joshb - that’s the correct behavior, bit it should also add the svg to the page. Example:
Can you check in the dev tools to see if that’s there? Possibly it’s not visible for some reason (e.g., the color matches the background or the positioning is off).
@mmirus - thank you sir.
I got it working with Facebook and Twitter Icons but when I attempt to add new icons, ie. bars, I get this error:
main.js →
Running yarn build:
Hey @joshb - something like the bars icon probably wouldn’t be in the free brands package. Maybe in free solid?
So you would install @fortawesome/fontawesome-free-solid and then add something like this (untested):
import faBars from "@fortawesome/fontawesome-free-solid/faBars";
Hi @mmirus-- ok, ok, thanks.
Still trying to figure this out. How do I know what part of font awesome an icon belongs?
For example, I’ve filtered as follows:
main.js →
Running yarn build returns error. I don’t understand what I’m doing wrong.
@joshb - I was just about to suggest filtering it that way to track down the icons in different packages.
Unless I’m missing some typo, that code looks correct. Did you run yarn add @fortawesome/fontawesome-free-solid too?
I knew I was missing something, however, when run that command:
Appears to complete successfully but:
Not being added to modules.
Let me say that I appreciate your time and help!
Not to confuse anyone with my previous responses…
I was able to get this working. I guess there are different base classes for different packages…
ie. fab for brands, fas for solids, far for regular, etc.
@joshb - Yep, that’s correct! Thanks for pointing that out.
Re your previous post about it not showing up in modules, is everything working now or is that issue still persisting?
FWIW I’ve run into that before and it turned out that VS Code just doesn’t refresh the file explorer right away - hitting the refresh button made it show up.
Oh yes, I forgot to mention. After a refresh, it shows the module.
The issue was my misunderstanding of the base classes for different packages.
Thank you for your help sir!
1 Like
Rather stupid question on my part, I guess, but where does that .npmrc file go? Is it in the root of the theme folder (/app/themes/mytheme)?
Have you tried it yet? 
@romero2k Depends on the scope you want for the file. Could be per project, could be broader.
See:
Docs about .npmrc: https://docs.npmjs.com/files/npmrc
Docs about using the Pro version of FA: https://fontawesome.com/how-to-use/use-with-node-js#pro
1 Like
Tree shaking has changed a bit with the 5.1 beta, and the docs on the FontAwesome.io are a bit confusing. Steps I used to get this crack-a-lacking are below. Hope this helps!
1. Change/Save your .npmrc file. I put mine at the root level of the theme, and am using pro:
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=PUT_YOUR_FONT_AWESOME_TOKEN_HERE
2. Update your package.json file dependencies (currently line 105) with the following (choose which icon packages you want to include if you don’t want all of them) and save:
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-brands-svg-icons": "^5.1.0",
"@fortawesome/free-regular-svg-icons": "^5.1.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",
"@fortawesome/pro-light-svg-icons": "^5.1.0",
"@fortawesome/pro-regular-svg-icons": "^5.1.0",
"@fortawesome/pro-solid-svg-icons": "^5.1.0",
3. Run 'yarn’
4. Include something like the following within your roots main.js file (resources > assets > scripts):
import { library, dom } from '@fortawesome/fontawesome-svg-core';
/* For free brands */
import { faFacebook } from '@fortawesome/free-brands-svg-icons';
/* For free solid */
import { faBars } from '@fortawesome/free-solid-svg-icons';
/* For free regular */
import { faAngleLeft } from '@fortawesome/free-regular-svg-icons';
/* For pro light */
import { faAngleRight } from '@fortawesome/pro-light-svg-icons';
/* For same icon with two different styles */
import { faAngleRight as fasFaAngleRight } from '@fortawesome/free-solid-svg-icons';
import { faAngleRight as falFaAngleRight } from '@fortawesome/pro-light-svg-icons';
library.add(faFacebook, faBars, faAngleLeft, faAngleRight, fasAngleRight, falAngleRight);
dom.watch();
2 Likes
Updated the original post with instructions for 5.1 and pro.
2 Likes
Perhaps handy for pseudo classers out there but 5.1 broke that for me and got it working again like this:
import { config, library, dom } from '@fortawesome/fontawesome-svg-core';
import { faUser } from '@fortawesome/pro-regular-svg-icons';
config.searchPseudoElements=true;
library.add(faUser);
dom.watch();
1 Like
Thanks, @thewhipster! I may add something like that to the guide, as I’ve seen it come up once or twice recently.
I had difficulty with this and Firefox. It wasn’t a clean test case, but I had to fall back to inserting <i> tags with js instead.