Font-Icons Cheat Sheet. (Based on http://filamentgroup.com/lab/bulletproof_icon_fonts/) (Assumes Ruby/Rails env w/ Bourbon, Modernizr, Fontello, etc)

fonts.scss

// Icon-Font Cheat Sheet
// Based on http://filamentgroup.com/lab/bulletproof_icon_fonts/


// Non-Critical icon
// ---
// <a href="#">
//   <span class="icon-x" aria-hidden="true"></span> Menu
// </a>


// Critical icon
// ---
// <a href="#" class="critical-icon">
//   <span class="icon-x" aria-hidden="true"></span>
//   <span class="fallback">Facebook</span>
// </a>


// Import Fontello
@include font-face(Fontello, 'fontello/fontello', normal, $asset-pipeline: true);


// This triggers a redraw in IE to Fix IE8's :before content rendering.
.mdzr-fontface:hover [class^="icon-"] {
  -ms-zoom: 1;
}

// Critical fallback styling
.mdzr-fontface .critical-icon .fallback {
  @include visuallyhidden;
}


// Styles
.mdzr-fontface { // only if supports font-face
  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    @include inline-block;
    font-family: "fontello";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    margin-right: 0.2em;
    speak: none;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    width: 1em;
  }
  .icon-users:before { content: '\e803'; } /* '' */
  .icon-menu:before { content: '\e802'; } /* '' */
  .icon-export:before { content: '\e800'; } /* '' */
  .icon-phone:before { content: '\e805'; } /* '' */
  .icon-calendar:before { content: '\e804'; } /* '' */
  .icon-up:before { content: '\e801'; } /* '' */
}


// Classes
.mdzr-fontface { // only if supports font-face
  .icon-note:before { content: '\e913'; } /* '' */
  .icon-logo-db:before { content: '\e912'; } /* '' */
  .icon-music:before { content: '\e915'; } /* '' */
  .icon-search:before { content: '\e916'; } /* '' */
  .icon-flashlight:before { content: '\e917'; } /* '' */
  .icon-mail:before { content: '\e918'; } /* '' */
  .icon-heart:before { content: '\e919'; } /* '' */
  .icon-heart-empty:before { content: '\e91a'; } /* '' */
  .icon-star:before { content: '\e91b'; } /* '' */
  .icon-star-empty:before { content: '\e800'; } /* '' */
  .icon-user:before { content: '\e801'; } /* '' */
  .icon-users:before { content: '\e802'; } /* '' */
  .icon-user-add:before { content: '\e803'; } /* '' */
  .icon-video:before { content: '\e804'; } /* '' */
  .icon-picture:before { content: '\e805'; } /* '' */
  .icon-camera:before { content: '\e806'; } /* '' */
  .icon-layout:before { content: '\e807'; } /* '' */
  .icon-menu:before { content: '\e808'; } /* '' */
  .icon-check:before { content: '\e809'; } /* '' */
  .icon-cancel:before { content: '\e80a'; } /* '' */
  .icon-cancel-circled:before { content: '\e80b'; } /* '' */
  .icon-cancel-squared:before { content: '\e80c'; } /* '' */
  .icon-plus:before { content: '\e80d'; } /* '' */
  .icon-plus-circled:before { content: '\e80e'; } /* '' */
  .icon-plus-squared:before { content: '\e80f'; } /* '' */
  .icon-minus:before { content: '\e810'; } /* '' */
  .icon-minus-circled:before { content: '\e811'; } /* '' */
  .icon-minus-squared:before { content: '\e812'; } /* '' */
  .icon-help:before { content: '\e813'; } /* '' */
  .icon-help-circled:before { content: '\e814'; } /* '' */
  .icon-info:before { content: '\e815'; } /* '' */
  .icon-info-circled:before { content: '\e816'; } /* '' */
  .icon-back:before { content: '\e817'; } /* '' */
  .icon-home:before { content: '\e818'; } /* '' */
  .icon-link:before { content: '\e819'; } /* '' */
  .icon-attach:before { content: '\e81a'; } /* '' */
  .icon-lock:before { content: '\e81b'; } /* '' */
  .icon-lock-open:before { content: '\e81c'; } /* '' */
  .icon-eye:before { content: '\e81d'; } /* '' */
  .icon-tag:before { content: '\e81e'; } /* '' */
  .icon-bookmark:before { content: '\e81f'; } /* '' */
  .icon-bookmarks:before { content: '\e820'; } /* '' */
  .icon-flag:before { content: '\e821'; } /* '' */
  .icon-thumbs-up:before { content: '\e822'; } /* '' */
  .icon-thumbs-down:before { content: '\e823'; } /* '' */
  .icon-download:before { content: '\e824'; } /* '' */
  .icon-upload:before { content: '\e825'; } /* '' */
  .icon-upload-cloud:before { content: '\e826'; } /* '' */
  .icon-reply:before { content: '\e827'; } /* '' */
  .icon-reply-all:before { content: '\e828'; } /* '' */
  .icon-forward:before { content: '\e829'; } /* '' */
  .icon-quote:before { content: '\e82a'; } /* '' */
  .icon-code:before { content: '\e82b'; } /* '' */
  .icon-export:before { content: '\e82c'; } /* '' */
  .icon-pencil:before { content: '\e82d'; } /* '' */
  .icon-feather:before { content: '\e82e'; } /* '' */
  .icon-print:before { content: '\e82f'; } /* '' */
  .icon-retweet:before { content: '\e830'; } /* '' */
  .icon-keyboard:before { content: '\e831'; } /* '' */
  .icon-comment:before { content: '\e832'; } /* '' */
  .icon-chat:before { content: '\e833'; } /* '' */
  .icon-bell:before { content: '\e834'; } /* '' */
  .icon-attention:before { content: '\e835'; } /* '' */
  .icon-alert:before { content: '\e836'; } /* '' */
  .icon-vcard:before { content: '\e837'; } /* '' */
  .icon-address:before { content: '\e838'; } /* '' */
  .icon-location:before { content: '\e839'; } /* '' */
  .icon-map:before { content: '\e83a'; } /* '' */
  .icon-direction:before { content: '\e83b'; } /* '' */
  .icon-compass:before { content: '\e83c'; } /* '' */
  .icon-cup:before { content: '\e83d'; } /* '' */
  .icon-trash:before { content: '\e83e'; } /* '' */
  .icon-doc:before { content: '\e83f'; } /* '' */
  .icon-docs:before { content: '\e840'; } /* '' */
  .icon-doc-landscape:before { content: '\e841'; } /* '' */
  .icon-doc-text:before { content: '\e842'; } /* '' */
  .icon-doc-text-inv:before { content: '\e843'; } /* '' */
  .icon-newspaper:before { content: '\e844'; } /* '' */
  .icon-book-open:before { content: '\e845'; } /* '' */
  .icon-book:before { content: '\e846'; } /* '' */
  .icon-folder:before { content: '\e847'; } /* '' */
  .icon-archive:before { content: '\e848'; } /* '' */
  .icon-box:before { content: '\e849'; } /* '' */
  .icon-rss:before { content: '\e84a'; } /* '' */
  .icon-phone:before { content: '\e84b'; } /* '' */
  .icon-cog:before { content: '\e84c'; } /* '' */
  .icon-tools:before { content: '\e84d'; } /* '' */
  .icon-share:before { content: '\e84e'; } /* '' */
  .icon-shareable:before { content: '\e84f'; } /* '' */
  .icon-basket:before { content: '\e850'; } /* '' */
  .icon-bag:before { content: '\e851'; } /* '' */
  .icon-calendar:before { content: '\e852'; } /* '' */
  .icon-login:before { content: '\e853'; } /* '' */
  .icon-logout:before { content: '\e854'; } /* '' */
  .icon-mic:before { content: '\e855'; } /* '' */
  .icon-mute:before { content: '\e856'; } /* '' */
  .icon-sound:before { content: '\e857'; } /* '' */
  .icon-volume:before { content: '\e858'; } /* '' */
  .icon-clock:before { content: '\e859'; } /* '' */
  .icon-hourglass:before { content: '\e85a'; } /* '' */
  .icon-lamp:before { content: '\e85b'; } /* '' */
  .icon-light-down:before { content: '\e85c'; } /* '' */
  .icon-light-up:before { content: '\e85d'; } /* '' */
  .icon-adjust:before { content: '\e85e'; } /* '' */
  .icon-block:before { content: '\e85f'; } /* '' */
  .icon-resize-full:before { content: '\e860'; } /* '' */
  .icon-resize-small:before { content: '\e861'; } /* '' */
  .icon-popup:before { content: '\e862'; } /* '' */
  .icon-publish:before { content: '\e863'; } /* '' */
  .icon-window:before { content: '\e864'; } /* '' */
  .icon-arrow-combo:before { content: '\e865'; } /* '' */
  .icon-down-circled:before { content: '\e866'; } /* '' */
  .icon-left-circled:before { content: '\e867'; } /* '' */
  .icon-right-circled:before { content: '\e868'; } /* '' */
  .icon-up-circled:before { content: '\e869'; } /* '' */
  .icon-down-open:before { content: '\e86a'; } /* '' */
  .icon-left-open:before { content: '\e86b'; } /* '' */
  .icon-right-open:before { content: '\e86c'; } /* '' */
  .icon-up-open:before { content: '\e86d'; } /* '' */
  .icon-down-open-mini:before { content: '\e86e'; } /* '' */
  .icon-left-open-mini:before { content: '\e86f'; } /* '' */
  .icon-right-open-mini:before { content: '\e870'; } /* '' */
  .icon-up-open-mini:before { content: '\e871'; } /* '' */
  .icon-down-open-big:before { content: '\e872'; } /* '' */
  .icon-left-open-big:before { content: '\e873'; } /* '' */
  .icon-right-open-big:before { content: '\e874'; } /* '' */
  .icon-up-open-big:before { content: '\e875'; } /* '' */
  .icon-down:before { content: '\e876'; } /* '' */
  .icon-left:before { content: '\e877'; } /* '' */
  .icon-right:before { content: '\e878'; } /* '' */
  .icon-up:before { content: '\e879'; } /* '' */
  .icon-down-dir:before { content: '\e87a'; } /* '' */
  .icon-left-dir:before { content: '\e87b'; } /* '' */
  .icon-right-dir:before { content: '\e87c'; } /* '' */
  .icon-up-dir:before { content: '\e87d'; } /* '' */
  .icon-down-bold:before { content: '\e87e'; } /* '' */
  .icon-left-bold:before { content: '\e87f'; } /* '' */
  .icon-right-bold:before { content: '\e880'; } /* '' */
  .icon-up-bold:before { content: '\e881'; } /* '' */
  .icon-down-thin:before { content: '\e882'; } /* '' */
  .icon-left-thin:before { content: '\e883'; } /* '' */
  .icon-right-thin:before { content: '\e884'; } /* '' */
  .icon-note-beamed:before { content: '\e914'; } /* '' */
  .icon-ccw:before { content: '\e886'; } /* '' */
  .icon-cw:before { content: '\e887'; } /* '' */
  .icon-arrows-ccw:before { content: '\e888'; } /* '' */
  .icon-level-down:before { content: '\e889'; } /* '' */
  .icon-level-up:before { content: '\e88a'; } /* '' */
  .icon-shuffle:before { content: '\e88b'; } /* '' */
  .icon-loop:before { content: '\e88c'; } /* '' */
  .icon-switch:before { content: '\e88d'; } /* '' */
  .icon-play:before { content: '\e88e'; } /* '' */
  .icon-stop:before { content: '\e88f'; } /* '' */
  .icon-pause:before { content: '\e890'; } /* '' */
  .icon-record:before { content: '\e891'; } /* '' */
  .icon-to-end:before { content: '\e892'; } /* '' */
  .icon-to-start:before { content: '\e893'; } /* '' */
  .icon-fast-forward:before { content: '\e894'; } /* '' */
  .icon-fast-backward:before { content: '\e895'; } /* '' */
  .icon-progress-0:before { content: '\e896'; } /* '' */
  .icon-progress-1:before { content: '\e897'; } /* '' */
  .icon-progress-2:before { content: '\e898'; } /* '' */
  .icon-progress-3:before { content: '\e899'; } /* '' */
  .icon-target:before { content: '\e89a'; } /* '' */
  .icon-palette:before { content: '\e89b'; } /* '' */
  .icon-list:before { content: '\e89c'; } /* '' */
  .icon-list-add:before { content: '\e89d'; } /* '' */
  .icon-signal:before { content: '\e89e'; } /* '' */
  .icon-trophy:before { content: '\e89f'; } /* '' */
  .icon-battery:before { content: '\e8a0'; } /* '' */
  .icon-back-in-time:before { content: '\e8a1'; } /* '' */
  .icon-monitor:before { content: '\e8a2'; } /* '' */
  .icon-mobile:before { content: '\e8a3'; } /* '' */
  .icon-network:before { content: '\e8a4'; } /* '' */
  .icon-cd:before { content: '\e8a5'; } /* '' */
  .icon-inbox:before { content: '\e8a6'; } /* '' */
  .icon-install:before { content: '\e8a7'; } /* '' */
  .icon-globe:before { content: '\e8a8'; } /* '' */
  .icon-cloud:before { content: '\e8a9'; } /* '' */
  .icon-cloud-thunder:before { content: '\e8aa'; } /* '' */
  .icon-flash:before { content: '\e8ab'; } /* '' */
  .icon-moon:before { content: '\e8ac'; } /* '' */
  .icon-flight:before { content: '\e8ad'; } /* '' */
  .icon-paper-plane:before { content: '\e8ae'; } /* '' */
  .icon-leaf:before { content: '\e8af'; } /* '' */
  .icon-lifebuoy:before { content: '\e8b0'; } /* '' */
  .icon-mouse:before { content: '\e8b1'; } /* '' */
  .icon-briefcase:before { content: '\e8b2'; } /* '' */
  .icon-suitcase:before { content: '\e8b3'; } /* '' */
  .icon-dot:before { content: '\e8b4'; } /* '' */
  .icon-dot-2:before { content: '\e8b5'; } /* '' */
  .icon-dot-3:before { content: '\e8b6'; } /* '' */
  .icon-brush:before { content: '\e8b7'; } /* '' */
  .icon-magnet:before { content: '\e8b8'; } /* '' */
  .icon-infinity:before { content: '\e8b9'; } /* '' */
  .icon-erase:before { content: '\e8ba'; } /* '' */
  .icon-chart-pie:before { content: '\e8bb'; } /* '' */
  .icon-chart-line:before { content: '\e8bc'; } /* '' */
  .icon-chart-bar:before { content: '\e8bd'; } /* '' */
  .icon-chart-area:before { content: '\e8be'; } /* '' */
  .icon-tape:before { content: '\e8bf'; } /* '' */
  .icon-graduation-cap:before { content: '\e8c0'; } /* '' */
  .icon-language:before { content: '\e8c1'; } /* '' */
  .icon-ticket:before { content: '\e8c2'; } /* '' */
  .icon-water:before { content: '\e8c3'; } /* '' */
  .icon-droplet:before { content: '\e8c4'; } /* '' */
  .icon-air:before { content: '\e8c5'; } /* '' */
  .icon-credit-card:before { content: '\e8c6'; } /* '' */
  .icon-floppy:before { content: '\e8c7'; } /* '' */
  .icon-clipboard:before { content: '\e8c8'; } /* '' */
  .icon-megaphone:before { content: '\e8c9'; } /* '' */
  .icon-database:before { content: '\e8ca'; } /* '' */
  .icon-drive:before { content: '\e8cb'; } /* '' */
  .icon-bucket:before { content: '\e8cc'; } /* '' */
  .icon-thermometer:before { content: '\e8cd'; } /* '' */
  .icon-key:before { content: '\e8ce'; } /* '' */
  .icon-flow-cascade:before { content: '\e8cf'; } /* '' */
  .icon-flow-branch:before { content: '\e8d0'; } /* '' */
  .icon-flow-tree:before { content: '\e8d1'; } /* '' */
  .icon-flow-line:before { content: '\e8d2'; } /* '' */
  .icon-flow-parallel:before { content: '\e8d3'; } /* '' */
  .icon-rocket:before { content: '\e8d4'; } /* '' */
  .icon-gauge:before { content: '\e8d5'; } /* '' */
  .icon-traffic-cone:before { content: '\e8d6'; } /* '' */
  .icon-cc:before { content: '\e8d7'; } /* '' */
  .icon-cc-by:before { content: '\e8d8'; } /* '' */
  .icon-cc-nc:before { content: '\e8d9'; } /* '' */
  .icon-cc-nc-eu:before { content: '\e8da'; } /* '' */
  .icon-cc-nc-jp:before { content: '\e8db'; } /* '' */
  .icon-cc-sa:before { content: '\e8dc'; } /* '' */
  .icon-cc-nd:before { content: '\e8dd'; } /* '' */
  .icon-cc-pd:before { content: '\e8de'; } /* '' */
  .icon-cc-zero:before { content: '\e8df'; } /* '' */
  .icon-cc-share:before { content: '\e8e0'; } /* '' */
  .icon-cc-remix:before { content: '\e8e1'; } /* '' */
  .icon-github:before { content: '\e8e2'; } /* '' */
  .icon-github-circled:before { content: '\e8e3'; } /* '' */
  .icon-flickr:before { content: '\e8e4'; } /* '' */
  .icon-flickr-circled:before { content: '\e8e5'; } /* '' */
  .icon-vimeo:before { content: '\e8e6'; } /* '' */
  .icon-vimeo-circled:before { content: '\e8e7'; } /* '' */
  .icon-twitter:before { content: '\e8e8'; } /* '' */
  .icon-twitter-circled:before { content: '\e8e9'; } /* '' */
  .icon-facebook:before { content: '\e8ea'; } /* '' */
  .icon-facebook-circled:before { content: '\e8eb'; } /* '' */
  .icon-facebook-squared:before { content: '\e8ec'; } /* '' */
  .icon-gplus:before { content: '\e8ed'; } /* '' */
  .icon-gplus-circled:before { content: '\e8ee'; } /* '' */
  .icon-pinterest:before { content: '\e8ef'; } /* '' */
  .icon-pinterest-circled:before { content: '\e8f0'; } /* '' */
  .icon-tumblr:before { content: '\e8f1'; } /* '' */
  .icon-tumblr-circled:before { content: '\e8f2'; } /* '' */
  .icon-linkedin:before { content: '\e8f3'; } /* '' */
  .icon-linkedin-circled:before { content: '\e8f4'; } /* '' */
  .icon-dribbble:before { content: '\e8f5'; } /* '' */
  .icon-dribbble-circled:before { content: '\e8f6'; } /* '' */
  .icon-stumbleupon:before { content: '\e8f7'; } /* '' */
  .icon-stumbleupon-circled:before { content: '\e8f8'; } /* '' */
  .icon-lastfm:before { content: '\e8f9'; } /* '' */
  .icon-lastfm-circled:before { content: '\e8fa'; } /* '' */
  .icon-rdio:before { content: '\e8fb'; } /* '' */
  .icon-rdio-circled:before { content: '\e8fc'; } /* '' */
  .icon-spotify:before { content: '\e8fd'; } /* '' */
  .icon-spotify-circled:before { content: '\e8fe'; } /* '' */
  .icon-qq:before { content: '\e8ff'; } /* '' */
  .icon-instagram:before { content: '\e900'; } /* '' */
  .icon-dropbox:before { content: '\e901'; } /* '' */
  .icon-evernote:before { content: '\e902'; } /* '' */
  .icon-flattr:before { content: '\e903'; } /* '' */
  .icon-skype:before { content: '\e904'; } /* '' */
  .icon-skype-circled:before { content: '\e905'; } /* '' */
  .icon-renren:before { content: '\e906'; } /* '' */
  .icon-sina-weibo:before { content: '\e907'; } /* '' */
  .icon-paypal:before { content: '\e908'; } /* '' */
  .icon-picasa:before { content: '\e909'; } /* '' */
  .icon-soundcloud:before { content: '\e90a'; } /* '' */
  .icon-mixi:before { content: '\e90b'; } /* '' */
  .icon-behance:before { content: '\e90c'; } /* '' */
  .icon-google-circles:before { content: '\e90d'; } /* '' */
  .icon-vkontakte:before { content: '\e90e'; } /* '' */
  .icon-smashing:before { content: '\e90f'; } /* '' */
  .icon-sweden:before { content: '\e910'; } /* '' */
  .icon-db-shape:before { content: '\e911'; } /* '' */
  .icon-up-thin:before { content: '\e885'; } /* '' */
}