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:
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'
\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.