Support FontAwesome 5.0?

[larryisthere]

https://fontawesome.com/

[rmm5t]

Yes, but it'll take a bit more time than a traditional version bump.

The new package is a shift from the 4.x patterns given it was a complete rewrite, but we should be able to get that worked out.

Things to consider:

1. Do we want to support "Pro" icons? I vote yes for the helper methods, but we can't bundle these extra assets. We might be able to provide an easy way to tack them on to the base "Free" package.
2. Web Fonts and CSS are still available in 5.0, but SVG with JavaScript is the preferred mechanism moving forward. Do we want to go with the newer SVG/JS support, or stick with the classic Web font/CSS approach? The SVG approach comes with some nifty tricks and extra accessibility support out of the box, but Web Fonts have better support for older browsers. My vote is for SVG here.
3. fa is deprecated in favor of fas ("solid" by default), bu there's also far (regular), fal (light), and fab (brands). My thought is that it might be good to keep fa_icon() around, but with an extra prefix option (defaulting to fas) to support the remaining styles. Then add, fas_icon(), far_icon(), fal_icon(), and fab_icon() as wrapper methods.
4. "Stacked" icons have been replaced with a much more powerful "Layering" mechanism. fa_stacked_icon() should probably be deprecated while trying to replicate the same behavior using Layers, but if that's too much work, we might have to punt on it.
5. There's room for adding additional helpers for new features like Layers, Masking, Power Transforms, but we can punt on these until later.

[GBH]

5.x deserves a complete rewrite. There's no reason to keep backwards comparability. SVG/JS is the way to go of course.

Most of functionality comes from class names. So question is how to wrap those without confusing people on their usage. :transform and :mask is a thing now.

Then there's the layering thing...

I'm honestly thinking about just cramming downloaded svg/js into assets and use icon tag directly. In HAML it's pretty short and directly maps to what FA documentation shows:

%span.fa-layers.fa-fw
  %i.fas.fa-play{ data-fa-transform: "rotate--90 grow-2" }
  %i.fas.fa-sun.fa-inverse{ data-fa-transform: "shrink-10 up-2" }
  %i.fas.fa-moon.fa-inverse{ data-fa-transform: "shrink-11 down-4.2 left-4" }
  %i.fas.fa-star.fa-inverse{ data-fa-transform: "shrink-11 down-4.2 right-4" }

Is there a value of wrapping this in a view helper? I'm not so sure.

Edit: Yeah, that was super trivial to get it working

[czj]

Having SVG support without JS would be great. I don't know if it is technically possible, but simply having SVG in the assets pipeline and Ruby helper methods would allow us to avoid downloading hundreds of CSS rules (saves bandwidth + CPU for parsing), avoid downloading the large icon font, and avoid downloading / parsing / executing Javascript code. Slow mobile devices would appreciate it.

We are a Font Awesome 5 early backer, having several sites running v4 including a large e-commerce website. Keeping the same fa_icon(:something) syntax would allow an easy upgrade from 4.0. Maybe people could choose from having inline SVG code or reference SVG assets in the assets pipeline. That would be our preferred method as we have HTTP/2 running websites with proper headers for caching.

[david-a-wheeler]

I also agree that making it possible to easily use the SVG without JavaScript would be great.

[marcamillion]

Just wanted to check on the status of this guys? Looking for an easy way to integrate v5 into my Rails project and I stumbled across this open issue. Any progress?

[GBH]

@marcamillion here's how to get it working in easy way:

• download zip file from https://fontawesome.com/
• extract and copy svg-with-js/css/fa-svg-with-js.css and svg-with-js/js/fontawesome.min.js
• rename those to fontawesome5.css and fontawesome5.js
• put them in your /app/assets
• declare them in application.js and application.css
• now you can use fontawesome5 by creating divs with classes as outlined in the documentation.

[dvergeylen]

FWIW: svg-with-js/js/fontawesome-all.min.js weights 1.6Mb (!), picking only svg-with-js/js/fa-regular.js is 438Kb, if someone doesn't need all the Fontawesome stuff. 😊

[GBH]

Ah, you're right. You'd probably want just fontawesome.min.js. It's 27KB compressed. Massive file has all the brand icons, v4 shims, etc. I can't find documentation on what's what there.

[marcamillion]

Hrmm....great idea.

I actually did something similar, but I just put the font-awesome-all.css file in my vendor/assets/stylesheets and added it to my application.css. Then I copied the webfonts folder into my public/webfonts directory and that got me everything I want.

I know just use the standard CSS classes from the docs.

Thanks for the tip!

[tomkr4l]

Hello, in our company we wanted to use new icons as soon as possible, so I've created gem with new FA5 support and with new functions like animations, layered icons etc. You can find it on tomkra/font_awesome5_rails or through rubygems.

I will appreciate any feedback. Feel free to try it or use some code samples if you want to. :)

[eadbhard]

@GBH Thanks for the detailed instructions. I am very new to Rails so I don't know how to 'declare them in application.js and application.css' Would you please kindly provide some example code? Thanks!