How to: Use Font Awesome 5 in your Sage theme

guides
,
35

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

36

Have you tried it yet? :upside_down_face:

37

@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
38

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
39

Updated the original post with instructions for 5.1 and pro.

2 Likes
40

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
41

Thanks, @thewhipster! I may add something like that to the guide, as I’ve seen it come up once or twice recently.

42

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.

43

Actually in the same boat Mike. the pseudoclass search was CPU locking firefox on pages where an iframe was included. Had to remove font awesome completely to find time for a workaround.

44

The icons I needed were to flag off-site, mailto, and tel links so mine were easy to replace with js. Good luck, man!

45

@thewhipster Adding a link to your post (with a cautionary note) to the guide. Thanks!

46

Has anyone experienced issues with this method working in iOS Chrome or Safari?

SVG’s appear not to render on the iPhone I am testing on.

Is there a way to fallback to the i tags if the SVG’s are not supported?

47

I haven’t seen this issue. How are you accessing the site on iOS? Are you using a deployed remote server, or the local browsersync url?

48

@MWDelaney Thanks for replying so quickly. I am accessing the site from an iphone 5s using safari or chrome by IP:3000 and I see the font-awesome icons but when I have ran build:production and view the site again by IP without port number I do not see the icons. I see them fine on other devices but its odd as it displays fine before the build and it shows fine on other devices.

I did not think it was served any different at the HTML level when using browser sync. I am a windows dev so my remote debug is limited to using Wiener on the iPhone which isn’t giving me the same level of inspect as using dev tools in a normal browser to see any differences.

EDIT:

I have since done more checking and on build when I recheck the iPhone HTML its not changing i tags to SVG’s when I inspect during browser sync it does change them to SVG’s. I don’t see any console errors but as I said I inspecting through Weiner so it may not show everything but it has worked for other console errors so I assume it would if it was a JS issue.

EDIT2:

Further looking this is spcecifcally an issue for build:production, this problem doesn’t happen on just using build without the optimization. So Browsersync and build are fine and work without issue so somthing in the production optimization breaks it.

49

Is anything else noticeably broken when you run production? Do you get any console errors?

50

No and as I said it appears to be only limited to iOS safari / chrome from what I see I don’t get errors but my debug tools are limited. I have never come across this issue in any other browsers, I will see if there are other browsers I can test this on the iphone with so I can rule it as being down to a browser specific issue vs device.

EDIT:

Issue effecting firefox as well, might be related to ios more than the browser. Maybe the device I test with is just too old its just weird how I can see them on browser sync / build just not production as if somthing breaks at this point.

EDIT2:

@MWDelaney since working on it more I spotted one other thing which is not working correctly after build:production in iOS for example I added a check for useragent to apply a class to some elements when on iphones this only works on “build” or browser sync as well.

But the font-awesome wasn’t working before this peice of JS was added but this is another thing not working so I am leaning towards this being more a problem with JS being compiled correctly for iOS now. I will dig some more but I think its not related to this method of using font-aweomse itself.

51

Just to let anyone know if they are having issues on build:production with the icons not loading I went into: webpack.config.optimize.js and added to the UglifyJsPlugin options. safari10: true,

2 Likes
52

I don’t know if this belongs here but I was wondering about the FA-Free-License. Do I need to attribute to the CC BY 4.0 license (or any other) using the icons this way?

53

That’s more of a question for the Font Awesome folks. :slight_smile: This might help: https://fontawesome.com/license/free

1 Like
54

I use Font Awesome in pseudo elements as described by marcelo2605:

.toggle-btn {
  &::after {
    content: "\f106";
    font-size: 18px;
    font-family: "Font Awesome 5 Solid", serif;
    display: none;
  }

  &.collapsed::after {
    content: "\f107";
  }
}

In my main.js file:

import fontawesome from '@fortawesome/fontawesome';
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
fontawesome.config = { searchPseudoElements: true };
library.add(faAngleDown, faAngleUp);

All works fine at yarn build or yarn start. Svg icons are rendered into the html. But when running yarn build:production the icons do not get rendered.