CLI gem for comfortably working with icon fonts from http://fontello.com for usage in Rails apps.
- Open up your current fontello font in the browser from the command line
- Copy & convert files from the zip into rails app (inclusively Sass enhancements)
Rails app setup
Add the gem to your Gemfile
gem 'fontello_rails_converter' and run
Read the note below to decide whether to put the gem into the
development group in your Gemfile.
Get your icon font
Download your initial
.zipfile from http://fontello.com and save it to
bundle exec fontello convert --no-downloadinside your app's root directory
It will copy all the assets from the
fontello.zip file into the appropiate places in your app's
Use the font in your app
To use your font in your app you will need to
@import the main stylesheet
vendor/assets/stylesheets/fontname.css.scss in your
You can check if the icon font is working correctly by visiting http://localhost:3000/fontello-demo.html.
Updating your existing fontello font
When you want to add new icons to your existing fontello font you can open it in the browser by using
fontello open and select all the additional icons you want to add.
Next you click the 'Save session' button on the fontello website. After that you can download, copy and convert the changed font by running
bundle exec fontello convert (it has persisted the session id in
tmp/fontello_session_id and will used that to pull down your changed font).
Alternatively, you can download & save the
.zip file just like in the initial setp and run
bundle exec fontello convert --no-download to use the manually downloaded file instead of pulling it down from fontello.
convert]: generate the stylesheets for use with webpack, prefixing the font file names with the tilde (~). Es:
src: url('~fontello.eot?99999999');. See Webpack.
For more help run
The conversion process will do a couple of things to make working with the main fontello stylesheet easier in Rails/Sass:
- It will convert font paths to use
font-url(unless you use the
- It will create Sass placeholder selectors (e.g.
%icon-foofor all the icons) so you have the choice to use the CSS classes in your markup or to
@extendthe placeholders in your Sass code
You can convert the fontello stylesheets for use with Webpack instead of Sprockets.
If you have not alreday done it, you must
- add the vendor paths to the resolve roots of Webpack
- add optional parameters to the
testkey for the loader of the fonts files
Additional fontello stylesheets
Besides the main stylesheet (
fontname.css.scss) fontello also provides a couple of additional stylesheets that you might want to
@import in your app for special use cases:
If you don't want to load this gem in your app's production environment to save a tiny bit of memory, you can also just add it to the
:development group in your Gemfile. The only thing you might need to change is to tell rails to add
vendor/assets/fonts to the precompile load paths see: https://github.com/railslove/fontello_rails_converter/blob/master/lib/fontello_rails_converter/railtie.rb
By default the gem will look in
Rails.root.join("config", "fontello_rails_converter.yml") for configuration options. You can use this to set default options for the tool.