How to: Use Font Awesome 5 in your Sage theme

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?

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?

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

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

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.

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

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?

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

1 Like

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.

Hey @Jan-Klaas,

I believe you’re mixing an old, deprecated package (@fortawesome/fontawesome) with the newer, current packages.

FYI, Font Awesome doesn’t really recommend that putting icons in pseudo-elements, but if you’ve considered the pros and cons and it’s the best choice. The below works for me in IE and Chrome, but not Firefox–not going to invest in troubleshooting icons in pseudo-elements further, since I don’t use that method myself and it’s not recommended. Best of luck getting it fully working!

main.js

// ...

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

dom.watch();

// ...

mystyle.scss

.icon-here::before {
  display: none;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Solid", serif;
  font-weight: 900;
  content: "\f107";
}

mytemplate.blade.php

<div class="icon-here">
  An icon will appear on this.
</div>

Cf. https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

3 Likes

Thanks for your suggestion mmirus. I got it to work in Chrome following your suggestions, but still not Firefox (at least not in yarn production build, yarn build still works as expected).

I’m going to fix it without pseudo elements, since it’s not too much of a change:

HTML

<button class="toggle-btn collapsed">
  projecttype <i class="fas fa-angle-up"></i><i class="fas fa-angle-down"></i>
</button>

CSS

.toggle-btn {
  .fa-angle-down {
    display: none;
  }

  &.collapsed {
    .fa-angle-down {
      display: inline-block;
    }

    .fa-angle-up {
      display: none;
    }
  }
}
1 Like

Just to let you know:

config.searchPseudoElements = true ruins performance on one of my websites. The animations for my menus and stuff get really choppy. This may be due to the fact that the website in question has a massive menu with a lot of nested nodes.

I find It’s much better to append icons using JavaScript and dom.watch(), e.g.:

$('.special-list li a').append('<span class="icon"><i class="fas fa-angle-right"></i></span>');
2 Likes

I’m having the same issue where font awesome icons added as pseudo element are working everywhere except in Firefox after using yarn build:production. Any ideas on why this happens or how I can (help to) resolve it?

The reason why I need pseudo elements is because I want to add specific icons to each item in a menu. The menu is created using wp_nav_menu. In the WordPress admin menu settings I add specific classes to each menu item which I then use to add the specific font awesome icon. If someone knows a different approach to do this, please let me know :slight_smile: (NB: preferably without javascript)

Is possible to create a shared CONST for the icons? Instead, we have to duplicate the icons every time when we need to update the list.

example:

const iconList = [
  faTimes,
  faBars,
  faCheck,
  faPhoneAlt,
  faCaretDown,
  faMapMarkerAlt
...
];

import {
  iconList  -> seems import statement not support template string
} from '@fortawesome/free-solid-svg-icons';

library.add(
  iconList 
);

Also, Pseudo Elements config.searchPseudoElements = true; would not show up on Firefox.

Works like charm. thanks @mmirus

1 Like

This is amazing, thank you for this because now I don’t have to load the entire icon set.

1 Like

Btw, building this balloons main.js to 1.5mb. Is this normal?

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

                    Asset     Size  Chunks                    Chunk Names
          scripts/main.js   1.5 MB       0  [emitted]  [big]  main
    scripts/customizer.js  3.24 kB       1  [emitted]         customizer
          styles/main.css   387 kB       0  [emitted]  [big]  main
      scripts/main.js.map  1.69 MB       0  [emitted]         main
      styles/main.css.map   616 kB       0  [emitted]         main
scripts/customizer.js.map  3.08 kB       1  [emitted]         customizer
       images/favicon.png  13.3 kB          [emitted]         

That looks like your dev build. How big is it when you build it for production?

129kB when built for production. No issues here. Thanks for this.

1 Like

I am using FontAwesome Pro as suggested here, and experiencing an issue with duotone icons.

I manage to import them successfully, but they only show the primary part of the icon, not the secondary, and neither the selectors (e.g. --fa-secondary-opacity) nor the duotone-specific classes (e.g. fa-swap-opacity) do anything.

Does anybody has similar issues or knows what could be going on?

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

import { faDna } from '@fortawesome/pro-duotone-svg-icons/faDna';

library.add(
  faDna,
  ...
)

dom.watch();

It does work perfectly with light and solid icons, just not as it should with duotone:

22