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
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
- The mixin defines one
$ICON_*constant for each icon. It uses the same names as Font Awesome.
+prepend_iconputs the icon into the
:beforeelement. You can also use
+append_iconto put the icon into the
:afterelement, or simply
+iconto 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.