Core: Update to Font Awesome v5

[MichaelBelgium]

A suggestion by Eldenroot from this forum topic

I must say also those icons look very neat! I like that u can have 3 types of the same icon (solid, regular, light)

Font awesome v5

[Eldenroot]

Yes, these new icons are just beautiful. I hope it will be included in v0.1 release

[franzliedke]

@tobscure What do you think?

In any case, version 5 does not seem to be available yet in the shim repository we use for including font-awesome via Composer.

[tobyzerner]

I love the new icons, but I have a couple of issues with this:

1. Font Awesome 5 does not appear to be open-source / on GitHub - hence the Composer repo hasn't been updated. We can't really ship it without being able to pull it in with Composer.

2. Their SVG JS...

Our dash of performant JS replaces your fas fa-icon and CSS :after icon elements with SVG.

Dash of performant JS?! It's 271 KB gzipped. 642 KB uncompressed. That's bigger than all of Flarum's JS.

Not that we'd have to use the SVG JS. We could stick with the icon font. But still, such an outrageous claim 😆

[MichaelBelgium]

The open source thing still needs to happen i think, as well as the changelog

[luceos]

Perhaps we should simply consider allowing icons to be interchangeable? That would allow an extension to switch to FA5 or material icons.

[tobyzerner]

@luceos how would you propose to achieve that?

[luceos]

I haven't considered implementation yet, although I should have. Perhaps by making the icons an extension by itself and only adding references to the pages? Then in the frontend we read a icon map and interchange the icons with their corresponding mapping. Possibly we could (preferably should) achieve this during compilation.

Is this a valid suggestion? Your frontend foo is stronger than mine @tobscure . 😊

[MichaelBelgium]

@tobscure Just noticed FontAwesome 5.0.6 has been released some days ago

[franzliedke]

We need the update to reach this repository, though...

[MichaelBelgium]

I feel like they're waiting for a pull request for that 🤔 Previous updates has been done via that, most of the time if i see correctly.

[franzliedke]

And there it is. :grinning:

If anybody is interested in sending a PR that updates Flarum to the new version, go for it. :+1:

[tobyzerner]

And please include file-size comparisons :D

[afrastgeek]

Hi, everybody!

I've been trying out to implement this for some times, and just now created a PR for this (even though still WIP).

Any comments are welcome, and please let me know if i'm doing something wrong 😀

[franzliedke]

Fixed by @afrastgeek in #1372 and all the companion PRs. :ok_hand:

[MichaelBelgium]

Lovely, great work @afrastgeek !

[luceos]

I'm reopening this because the PR we merged (in all extensions as well) use the fa prefix, which is an invalid prefix. Valid prefixes are:

• far for regular
• fab for brands
• fas for strong
• fal for light

We decided to remove the shim (fallback). And:

---

tl:dr we need to replace all fa prefixes with fas as proposed on their documentation.

[afrastgeek]

@luceos thanks for the heads up. I wasn't notice the deprecation on fa prefix back then, because the upgrade guide say we can use both fa and fas.

anyway from the Font Awesome 5 Upgrade Guide, the new icon prefix are not all fas, some has far prefix. The far prefix are the new syntax for the old icon-name-o open icon.

In some component, like the follow button or the unread thread status, they're using both solid and open (now called regular) icon for toggle. So, I suggest to not replace the far icon prefix.

Let's just change the fa prefix to fas.

[luceos]

@afrastgeek that's a good point, let's stick to those then.

I also noticed the deprecated fa still works, but it would be better to change them to prevent confusion and possible breaks in the future.

[KyrneDev]

@luceos I don't have time to update each and every extension (Thanks AP testing). I did have a minute and made this script here: https://gist.github.com/CDK2020/0583c457f14c6b195bf84903eeed2d0e It should get most, if not all of the fa fa-{icon}s changed to fas fa-{icon}

[luceos]

@CDK2020 thanks 🤗 I've merged your PR to core, now we just need to do all core extensions.

[franzliedke]

@afrastgeek Thanks for all the PRs. I've reviewed them (well, the changes look correct; I did not check whether you caught all of them, but hey...) and merged. :heart:

[datitisev]

Just in case, I'd recommend looking at all the places where icons are used, as the names of some were changed, resulting in breaking changes.

[franzliedke]

If I remember correctly, that was done as part of the original set of PRs related to this issue.

[sijad]

some icons missing, at least in Suspend and Subscribe extensions.

[luceos]

@sijad did you recompile the js for those extensions?

[sijad]

no I didn't, I've cloned flarum/flarum, changed all dependencies version to dev-master, then composer install, installed Flarum, and some icons don't show up.

[luceos]

@sijad yes, then you have to recompile the assets.

You can use this script: https://gist.github.com/luceos/ddc5dc2b43edec7637300db3b29041f0

Make sure you run it from the Flarum root.

[sijad]

is it something that should be fixed somehow? I think users shouldn't have to recompile assets after installation/upgrade.

[luceos]

We decided not to commit the dist files along every single time. In the future there will be a bot (or ci) that does the recompilation for us. The reason for this is that it causes too many issues with merging and resolving conflicts. In addition it just increases the size of a diff.

That you have to recompile is because you're using a non-tagged version. Tagged versions will absolutely have properly compiled dist files.

[ghost]

Is this for beta8 only? What version of FontAwesome is beta7.1 running?

[ardacebi]

What version of FontAwesome is beta7.1 running?

4.6

Is this for beta8 only

Yes

---

Hope these answers are correct 😬