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! in Rails 4 also you have to explicitly include the "/asset/font-awesome..." in the CSS file! :)