Need Some Help Configuring Font Awesome 5

[hfloyd]

Based on the other Font Awesome discussions/help notes, I wrote up a little API to process the JSON file from the Cheatsheet to generate separate "rules source" css files for each group of icons (brands, regular, solid, etc.) into a format like this for each icon:

.fa-500px:before { content: "\f26e";}
.fa-accessible-icon:before { content: "\f368";}
.fa-accusoft:before { content: "\f369";}
...

Using the RegEx provided in the "preconfigured" options for Font Awesome 5, and pointing to my generated file...

The "Preview" doesn't display properly, but otherwise it seems to work. (The configuration saves successfully and shows a count of "extracted icons"):

However, when using it in the back-office, it only displays some of the icon images, and they all appear slanted, like they are italicized:

And if I select an "invisible" icon, it does save the class name - but doesn't display the icon:

Does it appear something is wrong with my generated "rules source" css? Should I be selecting a different CSS file for the styling? (I was using the group-specific css for each (ex: brands.min.css).) I just unzipped the full font awesome web package into a single folder, leaving all the subfolders in place, assuming that the references would all work properly, but perhaps something else needs to be done?

Once I get this functioning, I'll be happy to provide the working rules files for others to use as-is.

[hfloyd]

Hmm I've managed to fix it for the "Brands" group... I though I could perhaps get rid of the slanted-look if I changed it from using "i" to using "span" for the HTML template. I am using Umbraco 9... I'm not sure if the back-office CSS has changed at all such that this now conflicts, but I was able to get it working when I did this:

Use "Override back-office template" with a span and a font size:

<span class="fab {icon}" style="font-size: 30px;"></span>

I also changed the "Css File" property to use the "all.css" file for each of the configurations. Now all the "Brands" icons appear, and it looks like the "Solid" ones as well... But the "Regular" are still problematic.

Investigating what might be different between the icons appearing and those NOT appearing, I noticed that the ones appearing also are referencing an Umbraco stylesheet:

/umbraco/lib/font-awesome/css/font-awesome.min.css

Which is a Font Awesome 4.7 sheet:

Whereas those NOT appearing only are referenced in the one I added:

So, I'm not sure why the "far" class isn't being picked up properly...

[hfloyd]

Okay... So I've no idea why this is... but when I edited the "all.css" file to change the .far class from this:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

to

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 600; }

All the regular icons appeared. 😵🤷‍♂️

[hfloyd]

As promised... #14 :-)

[skartknet]

That's a really strange issue!. Glad you solved it, and thanks for the PR.

[ronaldbarendse]

Changing the backoffice template to <span class="far {icon}" style="font-size: 30px; font-weight: 600;"></span> also fixed this issue (without having to manually edit the file) 👍🏻

[kristoflagae]

I'm testing this package at the moment based on this documentation, but the hack above is not working correctly.
It does show the icons again inside the backoffice, but when you change the font-weight to 600 when working with the 'regular' icons, the style of the icons change to the solid style.