0151 294 3384

Font Icon Aliases in Sass

The advent of font icons was well received by the web community, who quickly sprinkled the scalable symbols masquerading as web fonts, across the web.

Since web fonts are commonplace, sites making prolific use struggle to gain their own identity. That said, we still find them useful in web applications, where icons for creating, saving, deleting and such can be handled with an efficient font implementation.

There are a number of great font icon libraries out there. To name some top hitters:

Screen Shot 2015-07-09 at 07.33.11


Now it’s straightforward to embed these font libraries and just add the relevant classes, but their interfaces are relatively ugly, disparate, and can result in tightly coupled template/HTML code right across a project. The following snippet gives you an example of how different font icons are coded in the wild.

Code full of that looks like dog meat, so we’ve built a small but powerful little SCSS mixin to unify the awkward classes as shown below.

The mixin churns through an array of icons you wish to use and inherits their classes under an alias of your choice. Now let’s see that font icon example again, using our new font aliases.

Much smarter – happy coding! 😉

Font Icon Aliases in Sass