Dercni Dercni - 3 years ago 174
CSS Question

Font Awesome with Rails

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download