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, May 12 '13 at 13:41
Did you check that your saas and font files are on the same directory? `src: font-url("general_foundicons.eot")` — von v., May 15 '13 at 01:44

score 9 · Answer 1 · edited Jul 11 '14 at 01:36

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

You just saved me a massive headache – Jonathan Sep 03 '14 at 21:04 — Jonathan, Sep 03 '14 at 21:04

score 0 · Answer 2 · answered Jan 11 '14 at 03:12

Have you added your new fonts folder to the asset pipeline in config/application.rb? After that, I would try putting the block after @font-face in curly brackets and adding semicolons to the end of the other lines. If that doesn't do it, rewrite the src lines to src: url(font-path("general_foundicons.eot")) and so on, all as recommended at this helpful link.

zurb foundation icon font with ruby on rails

2 Answers2