zurb foundation icon font with ruby on rails

Question

i am trying to get the zurb foundation icon fonts to work within my rails project, though they dont appear to be working correctly

general_foundicons.css.sass

    /* font-face
@font-face
  font-family: "GeneralFoundicons"
  src: font-url("general_foundicons.eot")
  src: font-url("general_foundicons.eot?#iefix") format("embedded-opentype"), font-url("general_foundicons.woff") format("woff"), font-url("general_foundicons.ttf") format("truetype"), font-url("general_foundicons.svg#GeneralFoundicons") format("svg")
  font-weight: normal
  font-style: normal

i have these files in app/assets/fonts though the fonts dont appear to be getting loaded

The comment /* font-face is not properly ended... can it be the cause of the error ? — Baldrick
Did you check that your saas and font files are on the same directory? src: font-url("general_foundicons.eot") — von v.

Eduardo Eduardo · Accepted Answer · 2014-01-24T00:07:40

I use the foundation-icons-sass-rails gem. Extracting from their README:

Add foundation-icons-sass-rails gem to the assets group in your Gemfile:

group :assets do
  gem 'sass-rails', "  ~> x.x.x"
  gem 'coffee-rails', "~> x.x.x"
  gem 'uglifier'
  gem 'foundation-icons-sass-rails'
end

Then rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss and add:

@import 'foundation-icons';

Now, you can use it as follows:

<i class="fi-[icon]"></i>

Edit

In Rails 4 you don't need an assets group. Additionally, make sure to install the latest version of the gem (3.0.0 as of 2014):

  gem 'sass-rails', "  ~> x.x.x"
  gem 'coffee-rails', "~> x.x.x"
  gem 'uglifier'
  gem 'foundation-icons-sass-rails' ~> 3.0.0

zurb foundation icon font with ruby on rails

2 Answers