Using Font-Awesome with Rails 3.1 using CSS

font-Awesome.markdown

#Using Font-Awesome with Rails 3.1 using CSS

1. Download font-awesome from https://github.com/FortAwesome/Font-Awesome

2. Put the font folder in the app/assets. I renamed the folder from font to fonts to make it clearer

3. Add config.assets.paths << "#{Rails.root}/app/assets/fonts" to config/application.rb. This is to include the apps/assets/fonts folder in the asset pipeline

4. Put the font-awesome.css file in the app/assets/stylesheets folder

5. The first part of the css should be:

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

---

You should then be able to use:

<div style="font-size: 24px;">
    <i class="icon-camera-retro"></i> icon-camera-retro
</div>

Thank you for this! I was screwing up the paths to the fonts in the font-awesome.css and this saved me.

Awesome ! Thanks for this Gist !

With Rails 3.2 we needed to explicitly include the "/asset/font-awesome..." in the CSS file like so:

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

Great gist! I just took the stock style sheet and removed "../font/" from the urls. Don't for get to restart your server if the font isn't loading.

You guys rock. Perfect solution to my problem!

Hey I'm using Mou on Mac, and it opens with a nice kitchen sink markdown template that shows how to use font-awesome. Trouble is closing Mou I can't find where to refer to how to use icons and font-awesome. ANy help would be crazy awesome.

Thank you! in Rails 4 also you have to explicitly include the "/asset/font-awesome..." in the CSS file! :)