SASS @extends for icon fonts

In a project, I use icon fonts, generated from SVGs, for icons instead of images. So, for a down arrow, I can do something like this:

<i class="icon-down-arrow"></i>

And get this:

(Note: it can get a lot sexier than that)

It works by setting the font face for .icon-* to its custom font-face, in this case font-face: icon-font. Then, it uses a character code to pick out that glyph in the icon font, like:

.icon-arrow-down:before
  content: '\f102'

The \f102 is meaning-less to humans but necessary for the font.

If you wanted to use the icon in another tag’s :before or :after, and not use the icon class (i.e., .icon-arrow-down), you could use the character code by itself:

div:before
  content: '\f102'
  font-face: icon-font

And it would work… until you regenerated your icon font, and the character codes got swapped around. Turns out, with SASS, you can leverage @extend to use your icon class name, which persists when the character code does not. Check this:

div
  @extend .icon-arrow-down

It is the same, in CSS and to the browser, as the aforementioned div:before, but it’s future-proof against icon font regeneration.

Another bonus of SASS is you can extend pseudo-selectors:

div:before
   @extend .icon-arrow-down:before

What?! So cool. It’s helpful if you can’t carry the font-face baggage that the icon-font might bring with it, like font-weight and font-style.

– Ian out.