Read more

Embed Font Awesome icons from your CSS

Henning Koch
December 17, 2013Software engineer at makandra GmbH

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.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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.
Posted by Henning Koch to makandra dev (2013-12-17 12:57)