Font Awesome Sass for Rails 5: Utilizing a CSS Gem

– Choose one of the following options:
– Add Configuration
– Save configuration in a file named .npmrc, located in the app root folder, as shown below.
– Install the package by running NPM or YARN.
– Add the packages to the app/assets/application.js file.
– Include the Node Modules folder in the assets path by adding the following line to the config/application.rb file.
– Restart the server and you will be ready to use font-awesome PRO.
– Update your app/assets/stylesheets/application.css file with the following:
– Fonts:
– Finally, copy the webfonts folder to the public directory so that all the fonts are in the public/webfonts folder.


Solution 1:

There is a complication when employing the ‘Web Fonts with CSS’ method due to the hardcoded font url in the CSS file, but it is still achievable.


CSS:

Move the fontawesome-all.css file to the ‘vendor/assets/stylesheets’ directory.

Make sure to update the application.css file located in app/assets/stylesheets.

 *= require fontawesome-all


Fonts:

Subsequently, transfer the webfonts directory to the public directory, thereby consolidating all the fonts within the public/webfonts folder.

After restarting your server, you will be able to view your FA5 fonts.

SVG with JS

To simplify the process and have only one file to keep track of, you can opt for the ‘SVG with JS’ method.


JS:

Move the fontawesome-all.js file to the ‘vendor/assets/javascripts’ directory.

Make sure to update your application.js file located in app/assets/stylesheets.

 //= require fontawesome-all

Simply restart your server and you’re all set.


Solution 2:


If your Rails version is compatible with 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 the configuration in the app’s root folder as a file named .npmrc.

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN
  1. Execute NPM or YARN to install the package.
npm install --save @fortawesome/fontawesome-pro

OR

yarn add @fortawesome/fontawesome-pro
  1. Include the packages within the app/assets/application.js file.
//= require @fortawesome/fontawesome-pro/js/all.min.js
  1. To add the Node Modules folder to the assets path, include the following line in the config/application.rb file.
config.assets.paths << Rails.root.join('node_modules')

After restarting the server, you will be ready to use font-awesome PRO.

To obtain additional information, please visit the link provided below:

Check out the Font Awesome website for instructions on how to set up and use the package managers for web development.


Solution 3:


Another approach is to utilize raw svg without javascript, which eliminates rendering problems and the need for cumbersome workarounds that cause irritating flickering consequences.

The solution is in the form of a view helper named

faw_icon

that can be found at https://github.com/alexwebgr/faw_icon. It offers three different methods for loading SVG into your application.

  1. Utilizing the metadata’s icons.json file.
  2. using the raw single svg files
  3. using the svg sprites

The icon set in this design is intentionally not bundled to keep the download size small and allow developers to easily update the icons with new ones, use custom icons, or access the PRO collection.

Frequently Asked Questions