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!

[tomkra]

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!

[jnfaerch]

@tomkra This works like a charm. Nice feature with the indication of a missing icon instead of just the usual weird square (don't know if it's the gem or fontawesome 5?). Installed in a small Rails 5.1 project and was up and running in about 10 minutes. completely overrides fontawesome 4 without removing that version, but I have since removed it and that works flawlessly too. So far only used in the fontawesome free version but will use the Pro version later. Thanks for your work

[jnfaerch]

@eadbhard I suggest you just use the gem from @tomkra instead of fiddling with it manually.

[pandabamboo90]

@tomkra Thanks man ! Worked like a charm !

[parterburn]

@tomkra is there anyway to add the Pro icons locally and still use your awesome gem to call them? I'll purchase the Pro version to support the development, so I'd love an easy way to utilize this backward-compatible gem for those icons, too.

[ishields]

@tomkra Is there a way to use your gem without using the JS version? The SVG version of font awesome 5 would be slightly more performant since it doesn't need t execute anything in js.

[tomkra]

@jnfaerch Thank you. Indication of missing icons is FA5 new feature.

@parterburn I can't include FA5 pro icons in my gem due to licence policy. The way how to use pro version is to install gem and include files provided by FA in your assets. That way you will be able to use helpers from my gem and you will have access to all FA icons.

@ishields Currently working on the option to use old style as font without javascript included or include them directly in view as svg image.

[activearts]

Since no one has mentioned the inline_svg gem, I figured I'd mention my team's solution, which uses inline_svg.

1. We copied Font Awesome's SVGs to vendor/assets/images/font-awesome/.
2. We copied fa-svg-with-js.css to vendor/assets/stylesheets/font-awesome/.
3. We wrote a simple Rails helper that converts any Font Awesome SVG to an inline SVG using inline_svg. The helper accepts the same arguments as the icon() method that's included with FontAwesome::Sass.

[alexventuraio]

Hi guys, is there support for Font Awesome 5 new release at this point?

[vpaul08]

Just wondering why not use font-awesome-sass gem for getting version 5.0 support if code migration isn't an issue.

[alexventuraio]

@vpaul08 I'm not sure if the migration should be the way to go. But anyway to considere migrating, I think the official gem is FortAwesome/font-awesome-sass but why it has less downloads than this one? I think that's why they used this version in the project I'm working right now. Do you know why it has more downloads than the official one?

[vpaul08]

I guess the reason for its popularity might be its age. The font-awesome-sass gem was released later than this one and the task of migrating code is very daunting. I tried using it in my project and it broke a lot of things so reverted back.

However, I need the new icons so will be redoing the migration with more time in hand. Not sure when font-awesome-rails will support version 5.0 icons.

[alexventuraio]

@vpaul08 Make sense! That's why I need to think migrating before doing anything because it may brake different stuffs as you said. But overall, thank you so much for clarifying this topic for me. I hope this gem support version 5.0 soon.

[vpaul08]

@alexventura I've migrated successfully without issues the second time. However migration wasn't a straightforward task and it required me to replace one module at a time and then test it fully for satisfactory results.

I'm personally very happy with the new icons and would suggest migrating to the font-awesome-sass gem if icons are showstoppers instead of waiting for an update from font-awesome-rails.

The older version icons were very limited and didn't meet our requirements.

[alexventuraio]

@vpaul08 Yeah, I'm agree. I definitely migrate to the font-awesome-sass gem from now and progressively as you mentioned. Thank you for your advices and support.

[SaimonL]

@vpaul08 Thank you switching to font-awesome-sass

[lightbe]

@tomkra I just installed your gem in one of my Rails apps. It works like a charm!

[fwolfst]

The README should reflect the fontawesome-version (4). Should this go into an own ticket?

[rmm5t]

@fwolfst We pretty much do that already:

• https://github.com/bokmann/font-awesome-rails#versioning
• https://github.com/bokmann/font-awesome-rails/blob/master/CHANGELOG.md
• https://github.com/bokmann/font-awesome-rails/releases

The versioning of font-awesome-rails maps directly to the underlying version of font-awesome. i.e. When/if a font-awesome-rails 5.x is released, it will map to the same version of FA.

[krtschmr]

icons like money-bill-alt are not working, are these FA5 related?

[rmm5t]

icons like money-bill-alt are not working, are these FA5 related?

Correct.

You can search Font Awesome 4.7.x icons here: https://fontawesome.com/v4.7.0/icons/

You'll likely want to use the money icon in FA4.

[rhuanbarreto]

Too late... These repositories already did the job:

https://github.com/tomkra/font_awesome5_rails https://github.com/krtschmr/font_awesome_pro5_rails

Maybe could be a good idea to merge the job with them?

[krtschmr]

@rhuanbarreto i don't know about merging. @tomkra stated he doesn't want to integrate PRO into his gem so i had to fork and convert it. the helpers obvious work but i didn't want to integrate it the way he suggested. we own a valid license so let me have all assets in the pipeline. of course my gem makes it easier for all the lurkers to steal fontawesome pro and use it illegally without a license but that has been the case all the time anyways.

if you have an idea on how to merge tomkras and mine together i'm happy to do it but right now i don't see how. however we could take my fork and push it into a pro branch so you would have to gem "font_awesome5_rails", github: "tomkra/font_awesome5_rails", branch: "pro"

// edit: ouch, this is the other gem. i thought this comment was in the gem of tomkra. hehe.

[snecklifter]

Hello, is there any intention to support FA 5 as this is now broken in Fedora: https://bugzilla.redhat.com/show_bug.cgi?id=1853936