Embed Font Awesome icons from your CSS

An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.

It doesn't have to be that way.

Copy the attached file font-awesome-sass.css.sass to your assets (we recommend /vendor/asset-libs/font-awesome-sass).

You can now use Font Awesome icons from your Sass files:

@import font-awesome-sass

.delete_link
  +prepend_icon($ICON_REMOVE)
  color: red
  
.create_link
  +prepend_icon($ICON_PLUS_SIGN)
  color: red

Some notes:

• The mixin defines one $ICON_* constant for each icon. It uses the same names as Font Awesome Show archive.org snapshot .
• +prepend_icon puts the icon into the :before element. You can also use +append_icon to put the icon into the :after element, or simply +icon to replace the current selector with the requested icon.
• The icon constants are compatible with Font Awesome 3.2.1. Font Awesome has recently released version 4 und WTF THEY RENAMED ALL THE ICONS. You will need to adjust the Sass files to make it work with Font Awesome 4. The attached Ruby script to convert a Font Awesome cheatsheet to a list of Sass variables.