CODEWITHSUNDEEP
ruby-on-railssassruby-on-rails-5font-awesome
Qu4k3
Qu4k3

Reputation: 185

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.

Upvotes: 4

Views: 4840

Answers (3)

Realms AI
Realms AI

Reputation: 101

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
  1. Run NPM or YARN to install the package
npm install --save @fortawesome/fontawesome-pro

OR

yarn add @fortawesome/fontawesome-pro
  1. Add the packages in app/assets/application.js file
//= require @fortawesome/fontawesome-pro/js/all.min.js
  1. 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

Upvotes: 2

alex
alex

Reputation: 644

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

Upvotes: 1

Adam21e
Adam21e

Reputation: 791

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.

Upvotes: 9

Related Questions