Using ionicons in a rails app

Question

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?

Answer 1

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.

Answer 2

These are the steps I usually take:

1. Add the following to config/application.rb

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

2. Make the directory app/assets/fonts and copy the font files to that directory.

3. Copy ionicons.css to app/assets/stylesheets

4. 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. :)