Icofont

I love icons, and I love icons created with web fonts. They are so easy to style and animate with CSS and can be adapted to the theme of any site.

To build them, I use icomoon a lot, but fontastic is a great tool too.

The issue I have with them though, is that I use the icons on multiple websites. And I also want to use only the fonts I need, to avoid needless weight to my pages.

This is why icofont came to live. It's a small Rails engine that you can mount on your Rails app and access at /icofont route. It comes bundled with more than 450 icons to choose from and looks like the screenshot above:

But let's start from the beginning.

Dependencies

Icofont depends on the awsome fontcustom for building the fonts. It uses Fontforge and some nice python scripts to generate the icons. Please check their README for instructions on how to install it.

Installation

After installing fontcustom's dependencies, add the gem to the Gemfile of your Rails app:

gem 'icofont'

and run

bundle install

Usage

1. Start by running the icofont generator, which will copy the SVG glyphs from the [icofont-glyphs] repository into your machine, usually at ~/.icofont/glyphs:

The generator will also mount the icofont engine by injecting the following line into your routes.rb file:

mount_icofont

Now you can access the web interface of icofont at /icofont URL (e.g. http://localhost:3000/icofont). There you can select/unselect the glyphs you wish to be included on your font. Click on UPDATE to persist your changes, and create the font.

The class names can be found below the fonts.

The names of the fonts used are saved in the [rails_root]/.icofont/icofont.txt file, which was generated and added to your git repository automatically by the generator.

2. Include icofont.css.erb in your application.css file:

*= require icofont

Once the font is created, the selected class names are ready to use on your views.

This way you will include only the icons you need on your font.