Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rails: Using Font Awesome

My web designer has provided me with updated fonts/icons that have been added to font awesome - he placed this in a local fonts folder. I was also given a font-awesome.css file.

I copied the fonts folder into my assets directly and put font-awesome.css in assets/stylesheets.

The css is referenced correctly in my code, but none of the icons from the font folder get loaded.

Is there something I need to do to ensure everything gets loaded correctly and/or that the fonts folder is referenced?

like image 947
user464180 Avatar asked Jun 15 '12 14:06

user464180


People also ask

How to add font awesome to rails?

Another common way to install Font Awesome is to place the source files in the vendors/assets/javascripts directory and then modify the app/assets/javascripts/application. js to include //= require fontawesome/all . Font Awesome will then get included in the application bundle that your Rails layout already includes.

How do I add fonts to rails 6?

In your Rails application, create a new folder in app/assets and name it 'fonts. ' Then, drag your font files from your computer into this folder. (Using VS Code, I could just drag a . ttf file from my finder into my sidebar directory.)

How do I use Font Awesome SCSS?

Adding Font Awesome to Your CompileOpen your project's scss/variables. scss and edit the $fa-font-path variable to point to where you placed the webfonts folder. $fa-font-path: "../webfonts"; In your main SCSS compile file, import Font Awesome by adding the core styles file, @import "scss/fontawesome.


2 Answers

first: add app/assets/fonts to the asset path (config/application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts") 

then move the font files into /assets/fonts (create the folder first)

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: change:

@font-face {   font-family: "FontAwesome";   src: url('../font/fontawesome-webfont.eot');   src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');   font-weight: normal;   font-style: normal; } 

to this:

@font-face {   font-family: "FontAwesome";   src: url('<%= asset_path("fontawesome-webfont.eot") %>');   src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');   font-weight: normal;   font-style: normal; } 

Finally: check all resources are loaded correctly (with Firebug or Chrome Inspector)

like image 182
VMOrtega Avatar answered Sep 24 '22 19:09

VMOrtega


There is now an easier way, just add gem "font-awesome-rails" to your Gemfile and run bundle install.

Then in your application.css, include the css file:

/*  *= require font-awesome  */ 

It includes the font-awesome into your asset pipeline automatically. Done. Start using it :)

For more information, check the font-awesome-rails documentation.

like image 24
nathanvda Avatar answered Sep 25 '22 19:09

nathanvda