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:
$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.