Font Awesome 5 & 6

Is there a stack that supports, makes it easy to use Font Awesome 5 & 6?

Suggestions appreciated

Bill

None that spring to mind. Support has been added by some devs to their own products, I.e. Foundation 6 has FA5 Pro built in.

Is their specific icons you need to use or do you want them all?

Are you using them in particular theme/framework?

FA5 grew into a bit of a monster IMHO with ~2000 icons in each of the Light, Regular, etc. families and I can’t see any sense in adding these huge libraries to a web page to just use a few of them. This only makes sense if you create your own reduced subset of FA5 with their subsetting tool but then this goes beyond teh effort most RW users want to invest. FA6 is even bigger AFAIK with over 11,000 symbols and growing. To make the situation worse, many stacks and frameworks will still add in the already big FA4 symbols (all of them).

A stack that added FA5 and FA6 to a framework or using with another old stack that adds FA4 would be adding megabytes of unused symbols.

Even though I invested in FA5 Pro when it was a good deal, I find them a dated blocky set of icons and there are better alternatives avaiable as SVG’s.

I think a far better approach is to:

  1. Use only use stacks that do not use any FA symbols, and instead use their own SVG for code for open, close, up, down, etc, symbols. These can look better, sharper and easier to align than FA symbols.
    OR
  2. Download free symbols from Font Awesome or elsewhere and use these as lightweight SVGs using an SVG stack.
2 Likes

Agreed, putting selected ones into a SVG stack was going to be my next suggestion as adding the full library is usually way more than needed.

Thank you for your input, had not looked at it that way. Well taken and makes a lot of sense to me now.

Easily the most efficient way is to take the SVG icons you want for a site and make them into your own icon font using a simple tool like glyphter.

This is a lot better than inserting repetitive XML (SVG code) into a page each time you use an icon. I’m surprised that an efficiency argument has been used let alone the slow down on edit mode that inline XML causes. Your own tiny icon font will also be cached across the whole site instead of being loaded fresh for every page. It also keeps all the assets for a particular site/project together.

On the contrary argument, inline SVG’s are a lot more semantic, quicker and easier to implement and can be directly styled by CSS.

Which should you choose.? … it depends on how many different icons you want to use and the amount of them across your site.

First choice would be inline SVG’s but don’t kick out icon fonts for the sake of it.

Very good point.

I think we need very icons few beyond the angle/chevron up & down, plus, minus and X for close. Beyond that we really very infrequently need more symbols/icons in normal situations.

It was quite the rage from about 2015, to include an FA4 icon just because it was so easy to do so, and because FA4 icons looked new and trendy. Did we really need to add a shopping cart icon before the word BUY in a buy button? No, but we could and so we all did and thought it was awesome.

Some unscrupulous developers even pandered to the Weaver requests to add the icon to either side of a button, add alternative colours, hover effects, background colours, etc… Utter madness.

Imagine that!

If Henry Ford listen to his customers the first car wouldn’t work, but it’d have 18 cup holders, 26 “stowage” areas and metallic black paint.

;-)