Font Awesome shortcode has some non-obvious behaviours

[N-Parsons]

I've identified a few potential issues with the Font Awesome shortcode. Once I've had some feedback from you with regard to the desired behaviour, I will put together a PR that fixes them and adds support for the new duotone icons. If you would prefer each part of this as a separate PR, just let me know.

extras prepends fa-

Currently the README only includes examples where classes in extras start with fa-, with the exception of margin-bottom, however fa-margin-bottom does not appear to be a standard FA class. This implies both that it's necessary to give the full class name for FA classes, and that arbitrary classes can be specified here. Obviously, the documentation should be updated to reflect the functionality.

Changing the current behaviour of extras is obviously impractical, just in case someone is using the shortcut, but should we add an additional option for including non-FA classes?

FA5 support is disabled by default

It was noted in #46 that there are some compatibility issues between FA4 and FA5, and so when support for FA5 was added in #56, it was set to be disabled by default. Currently, the only effect of this option is to set the style ($fa_class) to fas, far, fal, or fab if those are entered in extras. I'm unable to think of any realistic situation where this behaviour would be an issue for FA4 users, particularly since they would need to be explicitly included by the user (eg. they would have to add extras=fas with the intention of getting the class fa-fas).

Does support for FA5 really need to be disabled by default?

[rhukster]

While it's possible to add FA5 by default with the new deferred block logic that has been added to core Grav 1.5+, it relies on the theme being updated to properly do so. This is because it will still break users that upgrade shortcode-core that do NOT have the deferred block setup in their theme that we have outlined as the new default approach: https://getgrav.org/blog/important-theme-updates

I'm all for improving the FA5 support though. I have not really used it myself as it has not really added anything of note for the 'free/opensource' version. In fact, it really makes things more complicated and with additional shims to be compatible (which we need), it makes things slower and heavier.

All the good stuff is in the paid version, unfortunately :( . I personally have bee using ForkAwesome, which is basically a forekd vesion of FA4, with new icons.

[N-Parsons]

Sorry for the delay in replying - I wrote a response but apparently didn't post it.

I'm not sure that I can see how the deferred block logic is relevant here. Currently, the only thing that the option does is change the behaviour of the extras option - it doesn't change anything about what is being loaded, and it is entirely up to the user to ensure that they load the version that they want.

Even if someone is using FA4, having support for FA5 enabled shouldn't cause an issue for them, unless they want to include a class called fa-fas and want to do so by adding extras=fas (and similar for the other variants). But I can't think of a reason why a FA4 user would include fas in extras, since neither fas nor fa-fas are meaningful for that version. The same is of course true of far, fal, fad, and fab.

For clarity, the current behaviour is as follows:

With FA5 disabled:
[fa icon=cog /] => <i class="fa fa-cog"></i>
[fa icon=cog extras=fas /] => <i class="fa fa-cog fa-fas"></i>.

With FA5 enabled:
[fa icon=cog /] => <i class="fa fa-cog"></i>
[fa icon=cog extras=fas /] => <i class="fas fa-cog"></i>.

[onetrev]

Just a sidebar @rhukster but I'd say FA5, even the free version, offers some serious improvements. The SVG + JS version is pretty "awesome" I think -- way more modern than using a font to represent an icon.

Plus, with using tree shaking you can very include include only the icons you are using, have them inserted as SVGs. As such, you end up with a tiny file (~10kb) instead of a huge font file you are barely using. Also, a bonus of using the SVG + JS setup you can do very cool stuff like layering, text and counter overlays.

[LivingWithHippos]

Just wanted to add that if someone wants to use Fontawesome 5 aside from enabling it in the plugin's option menu you also need to change the Fontawesome URL from //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css to //use.fontawesome.com/releases/v5.14.0/css/all.css (get the latest version from here).

This also solved #81 for me, adding the missing icons.