Search code examples
ruby-on-railssassruby-on-rails-5font-awesome

Font-Awesome 5 PRO in rails 5 app

In order to access to the benefits of the pro package, adding font-awesome 5 from the gem is not possible.

Tried diferent ways to add the files provided to the project. Following Official guide

Package content:

enter image description here

I saw in other stackoverflow posts, that the correct way to add it to the app is in

vendor/assets/

But after that, puting /on-server/'s css, js, and font or the /web-fonts-with-css/ files still didn't work.

Tried adding custom stylesheet link, require and import in scss. No way to achieve it.

Hope I've been clear.

Solution

  • Using the 'Web Fonts with CSS' approach has a wrinkle because the font url is hardcoded into the CSS file, but it can be done.

    CSS:

    Copy the fontawesome-all.css to the 'vendor/assets/stylesheets' folder.

    Update your app/assets/stylesheets/application.css file with

     *= require fontawesome-all

    Fonts:

    Then copy the webfonts folder to the public dir so all the fonts are in the public/webfonts folder.

    Restart your server and you should now be able to see your FA5 fonts.

    SVG with JS

    If you want to make it even easier (only 1 file to track) then you can do the 'SVG with JS' approach.

    JS:

    Copy the fontawesome-all.js to the 'vendor/assets/javascripts' folder.

    Update your app/assets/stylesheets/application.js file with

     //= require fontawesome-all

    Restart your server and you are good to go.