1 of 9

Icon Fonts

With fontello.com & fontello_rails_converter

2 of 9

Outline

  • Why icon fonts are awesome?
  • Why fontello.com icon fonts are even more awesome?
  • Streamlined workflow integration

3 of 9

What’s an icon font?

4 of 9

The icon font package

Font files

CSS

5 of 9

Icon font advantages

  • Scalable
  • Compact
  • Styleable

6 of 9

Icon font problems

  • Multicolor icons are hard/impossible
  • Big file size of comprehensive fonts (40-200k*)
  • Proper scaling (font-size, line-height, …)
  • Classitis (e.g ”fa fa-arrow-circle-o-left fa-2x pull-left fa-border”)

* Font Awesome 4.0: eot: 38k, ttf: 80k, woff: 44k, otf: 63k, svg: 202k

7 of 9

fontello.com

A free, open-source, online service to build your custom icon font: http://fontello.com

8 of 9

fontello_rails_converter

  • Ruby CLI gem
  • Uses fontello API
  • Open, download & copy icon fonts
  • Convert for convenient Sass+Rails usage

​

github.com/railslove/fontello_rails_converter

9 of 9

Technology behind fontello

github.com/fontello

  • font-builder�ttf2eot, svg-font-create, ttf2woff, svgpath, svg2ttf, ...