font-awesome-rails
font-awesome-rails copied to clipboard
Support FontAwesome 5.0?
https://fontawesome.com/
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:
- 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.
- 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.
-
fa
is deprecated in favor offas
("solid" by default), bu there's alsofar
(regular),fal
(light), andfab
(brands). My thought is that it might be good to keepfa_icon()
around, but with an extraprefix
option (defaulting tofas
) to support the remaining styles. Then add,fas_icon()
,far_icon()
,fal_icon()
, andfab_icon()
as wrapper methods. - "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. - There's room for adding additional helpers for new features like Layers, Masking, Power Transforms, but we can punt on these until later.
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
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.
I also agree that making it possible to easily use the SVG without JavaScript would be great.
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?
@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
andsvg-with-js/js/fontawesome.min.js
- rename those to
fontawesome5.css
andfontawesome5.js
- put them in your
/app/assets
- declare them in
application.js
andapplication.css
- now you can use fontawesome5 by creating divs with classes as outlined in the documentation.
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. 😊
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.
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!
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. :)
@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!
@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
@eadbhard I suggest you just use the gem from @tomkra instead of fiddling with it manually.
@tomkra Thanks man ! Worked like a charm !
@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.
@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.
@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.
Since no one has mentioned the inline_svg gem, I figured I'd mention my team's solution, which uses inline_svg
.
- We copied Font Awesome's SVGs to
vendor/assets/images/font-awesome/
. - We copied fa-svg-with-js.css to
vendor/assets/stylesheets/font-awesome/
. - 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.
Hi guys, is there support for Font Awesome 5 new release at this point?
Just wondering why not use font-awesome-sass gem for getting version 5.0 support if code migration isn't an issue.
@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?
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.
@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.
@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.
@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.
@vpaul08 Thank you switching to font-awesome-sass
@tomkra I just installed your gem in one of my Rails apps. It works like a charm!
The README should reflect the fontawesome-version (4). Should this go into an own ticket?
@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.
icons like money-bill-alt
are not working, are these FA5 related?