Font-Awesome 5 PRO in rails 5 app

Question

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:

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.

Answer 1

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.

Answer 2

There is also a way to use raw svg without any js and thus avoiding rendering issues and nasty hacks that lead to annoying flickering side effects

It comes in the form of a view helper called faw_icon https://github.com/alexwebgr/faw_icon and it provides three ways to load svg into your application

1. using the icons.json from the metadata
2. using the raw single svg files
3. using the svg sprites

by design it doesn't bundle any icons catering for a small download size and giving the developers the ability to update the icon sets as new ones become available, use custom ones or the PRO collection

Answer 3

If you are using rails which supports Node Modules.

1. Add Configuration

npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
  npm config set "//npm.fontawesome.com/:_authToken" YOUR_AUTH_TOKEN

OR

Save configuration in file .npmrc in app root folder as below

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN

2. Run NPM or YARN to install the package

npm install --save @fortawesome/fontawesome-pro

OR

yarn add @fortawesome/fontawesome-pro

3. Add the packages in app/assets/application.js file

//= require @fortawesome/fontawesome-pro/js/all.min.js

4. Include Node Modules folder in assets path by adding below line in config/application.rb

config.assets.paths << Rails.root.join('node_modules')

Start the server again and you are good to go with font-awesome PRO .

For more details you can visit the below link:

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers