How to inline font icons into css

gistfile1.md

Goal: inline fonts icons to speed up page load

In my case I used only 4 icons from http://fortawesome.github.io/Font-Awesome/ so it's not efficient to include the whole bunch of fortawesome files

1. At http://fontello.com/ selects required icons and export them.

2. Encode required font file (.eot .svg .woff .ttf) into base64

Linux example

$ base64 -w0 fontello.woff > fontello.woff.64

3. Include content of the file in url in @font-face

@font-face {
  font-family: 'FontAwesome';  
  src: url('data:application/x-font-woff;base64, ${filecontent} ') format('woff'),
  url('data:application/x-font-svg;base64, ${filecontent} ') format('svg');
  font-weight: normal;
  font-style: normal;
}

4. Usage is the same as in exported http://fontello.com/ demo

Result

Only content related to 4 icons is loaded and it's inlined into css or html style