Using Font Icons and Making Your Own
By: Paul Moore

So by now you’ve probably heard of font icons but, in case you’ve been away for the past couple years, let me tell you about them.  Font icons are a way of importing and using a library of icons all within the same font file.  They’ve been gaining popularity fast in recent years on the web, and for good reason.  Besides looking great they provide some great benefits to fast and efficient web development:

  • Styleable - since these icons are font, you can manipulate color and add css effects
  • Scalability - changing the size of an icon is as easy as changing its font size
  • Resolution - these icons are made from vectors, so they’ll look sharp on any device in any dimension
  • Speed - downloading one font file through one request is much faster than multiple images

Like I said, they’re great.  One way to get started with them is by simply pulling down some of the existing fonts from any one of some great font icon tools out there.  FontAwesome is easily one of my favorite.  FontAwesome provides a downloadable font file with 470+ pre-made icons ready to go.  They look great, are styleable and are super easy to use.  Only a few steps will have you up and running.

Font Awesome Logo

Download the font files from FontAwesome

If you’re using Rails - there are a couple of great gems available (font-awesome-rails & font-awesome-sass).  Throw them in your Gemfile, ‘bundle install’, and require them in your application.css.

If not using Rails - Simply download the font from the FontAwesome site and include them in your project.  They provide you with all the font files you would need (ttf, eot, otf, woff, and svg) and with the necessary css files to define the font face.

Start using them in your views

The syntax to display an icon couldn’t really be simpler.  Just reference their documentation to find the icon you want and its class name.  Then use away:

 <i class="fa fa-anchor"></i>

While FontAwesome provides you with some amazing icon capability it does come with a cost.  Chances are you’re only using a handful of their fonts but you’ll be forced to download their enormous font library across your site.  Also you may eventually feel the need to branch out and incorporate some of your own custom icons.

IcoMoon is one commonly used tool to help you generate custom font icons, however it is a rather involved and tedious process.  With IcoMoon you have to:

  1. Create your font on their site
  2. Upload your custom SVGs
  3. Download the resulting rolled up font files 
  4. Import them into your project

This is fine unless you are frequently updating or adding new fonts to your list, in which case you may find yourself frustrated with the above process.  It really should be automated.

Enter Font Custom.  Font Custom is one of my favorite utilities I’ve found for creating and easily maintaining a custom icon font set in my Rails apps.  With a little bit of set up, you’re off to the races adding new icons will be as simple as dropping the svg in a folder and running a rake task.

Install Font Forge (necessary utility for fontcustom compilation)

brew install fontforge ttfautohint

Add the fontcustom gem to your Gemfile

gem ‘fontcustom’

Set up font custom configuration via command line

Below command will add a fontcustom.yml ot your config directory of the rails app:

fontcustom config

Configure font custom

Within the generated config/fontcustom.yml you can set the font_name and even define the format of the generated icon css classes.  Font custom defaults the css_selector to .icon-{{glyph}} in order to fit in with Bootstrap’s glyph icon set.

 # --------------------------------------------------------------------------- #  
 # Project Info  
 #  Defaults shown. Learn more about these options by running  
 #  `fontcustom help` or visiting <http://fontcustom.com>.  
 # --------------------------------------------------------------------------- #  
 font_name: weddingwire  
 css_selector: .ww-icon-{{glyph}}  
 preprocessor_path: ""  
 autowidth: false  
 no_hash: true  
 force: false  
 debug: false  
 quiet: false  
 # --------------------------------------------------------------------------- #  
 # Input Paths  
 # --------------------------------------------------------------------------- #  
 input:  
  vectors: lib/fontcustom/vectors     # tells font custom where to look for svgs  
 # --------------------------------------------------------------------------- #  
 # Output Paths  
 # --------------------------------------------------------------------------- #  
 output:  
  fonts: app/assets/fonts             # where to dump the generated font files  
  css: app/assets/stylesheets         # where to dump the generated font files  
  preview: app/views/style_guide      # where to dump preview html file (optional)  
 # --------------------------------------------------------------------------- #  
 # Templates  
 #  Included in Font Custom: preview, css, scss, scss-rails  
 #  Custom templates should be saved in the INPUT[:templates] directory and  
 #  referenced by their baserame.  
 # --------------------------------------------------------------------------- #  
 templates:  
  - _weddingwire-font.css.scss        # tells font custom what to name the generated css file  
  - preview                           # tells font custom to also generate a preview html file   

One thing that I really love is that you can configure a preview option in this yml that will, when you compile using the fontcustom utility (below), generates a preview.html file where you can preview all of the font icons generated.

Run font custom compilation on command line

The above yml configuration will allow us to drop our svg files for our fonts in lib/fontcustom/vectors.  The below command will then output the necessary font files and css to the locations defined by output:

fontcustom compile

Create rake task for automation (optional)

This will allow you to fully compile new and updated svgs with a simple rake glyphs:compile which can them be included in build processes and cron jobs.

 namespace :glyphs do  
   task :compile do  
     require 'fontcustom'  
     Fontcustom::Base.new({}).compile  
   end  
 end

Use font icons in your views

The preview file I mentioned above is great for determining what icons you have in your set and figuring out which class names to use.  Once you’ve found your icon, it’s as simple as:

 <i class="ww-icon-alert"></i>

Here at WeddingWire, we use our generated custom font class in tandem with the FontAwesome set, as we’ve found we use a great deal that they already have available for us while also feeling the desire to create some of our own.  Now go create some custom fonts!

SHARE:

Meet Paul:
Paul is an Engineering Lead at WeddingWire.