Q:

Using ionicons in a rails app

I have a rails app I'd like to use these in. Following the instructions, I ensured the font path in .css was assets/fonts/ionicons... but it doesn't seem to be working. Anyone ever use these before?

A:

If anyone else has trouble to use ionicons in your rails projects, I suggest to use the gem font-ionicons-rails that I built.
It's very simple to use, as below:
Installation:
Add this to your Gemfile:
gem "font-ionicons-rails"

Usage:
In your application.css, include the css file:
/*
 *= require ionicons
 */

Sass Support
If you prefer SCSS, add this to your application.css.scss file:
@import "ionicons";

If you use the Sass indented syntax, add this to your application.css.sass file:
@import ionicons

Then restart your webserver if it was previously running.
That's all. Now you are ready to use ionicons in your project using the tag i or using the gem helper to improve use.
Helpers
ion_icon "camera"
# => <i class="ion-camera"></i>

ion_icon "camera", text: "Take a photo"
# => <i class="ion-camera"></i> Take a photo

ion_icon "chevron-right", text: "Get started", right: true
# => Get started <i class="ion-chevron-right"></i>

content_tag(:li, ion_icon("checkmark-round", text: "Bulleted list item"))
# => <li><i class="ion-checkmark-round"></i> Bulleted list item</li>

It's pretty ease now, yay.

A:

These are the steps I usually take:

Add the following to config/application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Make the directory app/assets/fonts and copy the font files to that directory.
Copy ionicons.css to app/assets/stylesheets
Edit ionicons.css file and update the url() calls to work with the asset pipeline:
src: font-url("ionicons.eot?v=1.3.0");
src: font-url("ionicons.eot?v=1.3.0#iefix") format("embedded-opentype"),
     font-url("ionicons.ttf?v=1.3.0") format("truetype"),
     font-url("ionicons.woff?v=1.3.0") format("woff"),
     font-url("ionicons.svg?v=1.3.0#Ionicons") format("svg");

Restart webrick/thin/whatever and you should be good. :)

