How do I configure the Font Icon Picker in 2sxc with FontAwesome 5?

DNN 9.3.1 2sxc 10.25.2

I added a field in a 2sxc content module called "Icon" and made it a Font Icon Picker. My DNN skin has FontAwesome 5 loading via CDN in CSS.

Looking through the 2sxc font icon picker field settings it expects the CSS Prefix, the Preview CSS Classes, and the Files for the fonts. (I get my FontAwesome 5 icons from CDN but I understand that I need to reference them locally - so I downloaded Font Awesome 5 and uploaded it to my server and reference it there).

But Font Awesome 5 (Free) has 3 different prefix classes for fonts: fab, far, and fas. (brands, regular, and solid).

So when I use the picker to choose an icon, it doesn't prefix the icon correctly. I would expect that when I choose the icon, it adds the correct prefixes like "fas fa-user" but it only outputs "fa-user" so the icon doesn't appear.

My razor template looks like this:

<i class="@Content.IconPicker"></i>

Am I setting this up incorrectly or does 2sxc Icon Picker not able to support Font Awesome 5? How can I configure the settings to get Font Awesome 5 to work?

Solution

this is indeed tricky. Let me give some background:

Fontawesome has different font files and different css files for targeting the icons
Unfortunately this causes trouble in the picker, because the picker cannot be configured to show icon previews with different prefixes - so as of now, the picker usually can only be configured to show one set of these icons
The same problem arises with the output as you noticed - in some cases a different prefix would be important, but the picker doesn't give you the prefix, just the icon name

We also had another problem that really bugged us: these icon-fonts really hurt our google page speed rating - ca. 10-20 points depending on the scenario! Because of this, we spent almost 2 weeks to find a better solution. And we have found it :). It's just not well standardized / documented :(.

Here's how it works:

basically all icons have different names anyhow, so the prefix wouldn't matter. This was just an optimization introduced by font-awesome, but it's not good anyhow.
So we need to have a css file which lists all icons, but just correctly uses the right font-file no matter what prefix is used. We can generate such a file and already have some working scripts that do it, but it's not in a state we could share :(
This css file should then be used in the icon picker
And in the page, because then the prefix doesn't matter

That's how we're solving it. Sorry that it's not simpler.

We're going a step further: if you have the commercial license of font-awesome, you can use a JS loader in your page which doesn't use the fonts at all, but just gets the 3-4 SVGs you're actually including in the page. That gives us the extra 10-20 points on PageSpeed! But because it's commercial license only, I can't share this with the public. If you do have the commercial license though, that's the way I would go.