A "pick and choose" method for using fontello icons in rails

gistfile1.md

Initial installation and rails-ification of fontello assets

Make a fonts asset dir

cd to your rails app and mkdir app/assets/fonts

Choose your icons and download them

• Browse to fontello.com
• Choose your fontello icons
• Click 'Download webfont'

Move the assets into your rails app

Unzip the fontello download then:

cp ~/Downloads/fontello-#{hash}/font/* app/assets/fonts/ cp ~/Downloads/fontello-#{hash}/config.json app/assets/fonts/ (Optional, but recommended) cp ~/Download/fontello-#{hash}/css/fontello.css app/assets/stylesheets/fontello.css.scss cp ~/Download/fontello-#{hash}/css/fontello-codes.css app/assets/stylesheets/

If you want to support IE 7 or animations, move the approriate CSS files into your app, too.

Make fontello's css work with the asset pipeline

Replace all instances of url in fontello.css.scss with asset-url.

For example: change url('../font/fontello.eot?37927143') to asset-url("fontello.eot", "fonts")

There should be a block at the bottom like this:

.icon-emo-devil:before { content: '\e805'; } /* '' */
.icon-emo-sunglasses:before { content: '\e809'; } /* '' */
.icon-emo-angry:before { content: '\e80d'; } /* '' */

Delete it! Those same lines are in fontello-codes.css that we copied earlier. (This will make adding and removing icons easier)

There's an example fontello.css.scss at the bottom of this gist.

Use your icons!

i.icon-emo-angry %i.icon-emo-angry <i class="icon-emo-angry"></i>

gistfile2.md

Adding/removing icons

Pick the new icons

• Browse to fontello.com
• From the wrench menu, choose 'Import config.json'
• Upload the config.json you saved in your rails project
• Choose your new icons (or deselect existing icons)
• Click 'Download webfont'

Copy over the new fontello assets

Unzip the fontello download then:

cp ~/Downloads/fontello-#{hash}/font/* app/assets/fonts/ cp ~/Downloads/fontello-#{hash}/config.json app/assets/fonts/ (Optional, but recommended) cp ~/Download/fontello-#{hash}/css/fontello-codes.css app/assets/stylesheets/

If you want to support IE 7 or animations, move the approriate CSS files into your app, too.

Use your icons!

i.icon-emo-angry %i.icon-emo-angry <i class="icon-emo-angry"></i>

gistfile3.md

Notes

Class collision

If you are putting this in a project with bootstrap or font-awesome, you will want to change the CSS prefix. This is most easily accomplished by changing the prefix option (clicking the wrench icon before downloading).

Don't wanna do all this?

Check out the fontello-rails gem: https://github.com/blackxored/fontello-rails

gistfile4.scss

@font-face {
  font-family: 'fontello';
  src: asset-url('fontello.eot', 'fonts');
  src: asset-url('fontello.eot?#iefix', 'fonts') format('embedded-opentype'),
       asset-url('fontello.woff', 'fonts') format('woff'),
       asset-url('fontello.ttf', 'fonts') format('truetype'),
       asset-url('fontello.svg#fontello', 'fonts') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: asset-url('fontello.svg#fontello', 'fonts') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - magrins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

Note: In rails 4 there is a helper method font-url

So this:

For example: change url('../font/fontello.eot?37927143') to asset-url("fontello.eot", "fonts")

Can be changed to this

For example: change url('../font/fontello.eot?37927143') to font-url("fontello.eot")