How to load and use font icons?

Question

I am using Rails 4.0.2 with ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux] and standard (build-in) rails server and need some help to load and use the following font-icons in my application - http://fontello.com/.

I have downloaded the font files and put them in /vendor/assets/fonts/ folder. Then in /vendor/assets/stylesheets/shared/fonts.css file I have added the code below:

@font-face {
    font-family: 'fontello';
    src: url('fonts/fontello.eot');
    src: url('fonts/fontello.eot?#iefix') format('embedded-opentype'),
    url('fonts/fontello.woff') format('woff'),
    url('fonts/fontello.ttf') format('truetype'),
    url('fonts/fontello.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

It seems everything is getting loaded correctly because there are not any errors in the browser console.

Then, using the HTML below I am trying to get some icons:

<div>
  <span data-icon="0xe800">test</span>
  <span data-icon="icon-emo-happy">test</span>
  <a href="##url##">0xe809</a>
</div>

but now icons arae shown - just text (I am not sure this is the correct way to load them).

In the documentation is said that:

Usually, apache already has necessary settings, but nginx and other webservers should be tuned. Here is list of mime types for our file extentions:

• application/vnd.ms-fontobject - eot
• application/x-font-woff - woff
• application/x-font-ttf - ttf
• image/svg+xml - svg

So, in /config/initializers/mime_types.rb file I have try this:

Mime::Type.register_alias "application/vnd.ms-fontobject", :eot
Mime::Type.register_alias "application/x-font-woff", :woff
Mime::Type.register_alias "application/x-font-tt", :ttf
Mime::Type.register_alias "application/image/svg+xml", :svg

and this:

Rack::Mime::MIME_TYPES['.eot'] = 'application/vnd.ms-fontobject'
Rack::Mime::MIME_TYPES['.woff'] = 'application/x-font-woff'
Rack::Mime::MIME_TYPES['.ttf'] = 'application/x-font-ttf'
Rack::Mime::MIME_TYPES['.svg'] = 'image/svg+xml'

with server restart but nothing has changed.

Has anyone have experience in doing this and could assist me?

Answer 1

The issue was caused by font files not properly loaded. If you are using css file to declare your font class, you need to follow the steps below:

1. In your aplication.rb file add the following line:

   config.assets.paths << Rails.root.join('app', 'vendor','assets', 'fonts')
   

   In the above case, the font files are in app/vendor/assets/fonts folder.

2. When declaring the font class use assets + font name reference in the URL like this:

   @font-face {
       font-family: 'fontello'; 
       src: url('/assets/fontello.eot');
       src: url('/assets/fontello.eot?#iefix') format('embedded-opentype'),
       url('/assets/fontello.woff') format('woff'),
       url('/assets/fontello.ttf') format('truetype'),
       url('/assets/fontello.svg#icons') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   

3. In my case I needed to additionally require the css file holding font class declaration. In my application.css file, I have added the line below:

   *= require shared/fonts.css

   Note: In my case the font.css file is in /vendor/assets/stylesheets/shared/ folder.