Font Awesome with Rails

0
votes

I am trying to get Font Awesome working with my rails app following: http://fontawesome.io/get-started/

I do not wish to use the CDN as I also want to use other fonts that have no CDN so I want to understand how to get non CDN fonts working: https://github.com/540co/govicons

I have downloaded and extracted Font Awesome into:

/app/assets/fonts/font-awesome-4.7.0

I don't know if I am using CSS or SASS? In my stylesheets folder I have files with both css and sass extensions. I have an application.css file and an empty application.scss file. All my other files have the scss extension.

If I follow the scss instructions then step 2 is:

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

This file is located in:

/app/assets/fonts/font-awesome-4.7.0/scss/_variables.scss

This variable currently reads:

$fa-font-path: "../fonts" !default;

What should this be updated to?

1
cssruby-on-railsfontsfont-awesome

1 Answers

2
votes

I would move these into vendor/assets instead of app/assets because (source)

vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks

mkdir -p vendor/assets
mv font-awesome-4.7.0/ vendor/assets/
ls vendor/assets/font-awesome-4.7.0/
# css       fonts       less        scss

and then if you're using application.css, you can just:

  1. Edit app/assets/stylesheets/application.css
  2. Add: *= require css/font-awesome in the list of requires
  3. Restart the server and load the page

and everything should be working fine

If you want to use this in SCSS:

  1. Add app/assets/stylesheets/font_awesome.scss with the contents:

    $fa-font-path: "fonts";
@import "scss/font-awesome";

  2. Add @import "font_awesome"; to application.scss

The purpose of doing it this way is now you don't have any custom changes to the files in vendor/assets. Those are exactly what you downloaded from the site and can be updated at any time without worrying about whether you're going to remember that $fa-font-path was changed to a custom path because that was done in your files, not theirs.

Note: Usually you'd want to use one of the helpers (like asset-path) for the paths in assets, but it doesn't seem to like being used with a folder as a placeholder with files given later. So, without wanting to hunt through font-awesome and replace $fa-font-path with asset-path, we can do this, which will look from the current folder (in the address bar, which will be something like #{host}/assets/application-#{cache-buster}.css so the current folder is /assets and it will look for /assets/fonts which is what we want (read: what works for me going through this example).

Govicons, looks like you'd follow the exact same steps above and should work out fine.