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

Tonina

The comment /* font-face is not properly ended... can it be the cause of the error ? – Quadricycle

its sass its properly ended – Tonina

Did you check that your saas and font files are on the same directory? src: font-url("general_foundicons.eot") – Meow

Answer 1

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

Proglottis

You just saved me a massive headache – Slopwork

Answer 2

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.

Piedadpiedmont