Mapping Icon Fonts with Sass

I love Sass, and I love using icon fonts.

However, I do not like the limitations of using inline non-semantic, presentational markup to place these wonderful symbols, e.g. [snippet slug=font-icon-non-semantic lang=html line_numbers=false]

What if we could keep the embellishments in our stylesheet, minimize the HTML markup, and keep things a bit more semantic?

I think we can, and this is what we’ll accomplish in a few steps. I first came across this approach from Jayden Seric’s post, Fun With Sass & Font Icons.

We’ll be using the Font Awesome icon library for this example. Font Awesome offers a comprehensive library of icons, and they’re all free and GPL compatible.

Set a Sass variable for font-family of icon font

Let’s say we want to set up a social nav, and a Search bar icon as featured on our site.

We’ll assume we already have Font Awesome enqueued properly in our WordPress theme (see wd_s for example). First, let’s declare our Font Awesome font-family as a Sass variable:

[snippet slug=font-awesome-sass-font-variable lang=css line_numbers=false]

Sass @mixin for icon fonts

We can use our newly defined $font-icon variable (line 18 below) within our new handy mixin to Kiss It Simple, Stupid (K.I.S.S.):

[snippet slug=font-awesome-icon-font-mixin lang=css]

Map Unicode Characters to Custom Aliases

Now here is where it gets interesting, because typically Font Awesome gives us icon classes with unicode characters, like:

• .fa-search / Unicode: f002
• .fa-facebook / Unicode: f09a
• .fa-twitter / Unicode: f099
• and so on…

But now we can create our own mapping, and use any semantic, or non-semantic aliases:
[snippet slug=icon-map-using-font-awesome lang=css]

And now we use our mixin to assign our custom magnifying-doohickey icon to our Search, like so:

[snippet slug=using-font-icon-mixin lang=css]

At first, this may seem like a bit of extra overhead because you’re having to manage the font mapping. However, this opens up the ability to mix-and-match your own custom SVG icons with existing libraries, like Font Awesome. Tools like Font Custom can auto-magically generate the icon mapping for you.

How often do we see icons that do not align with their contextual information, like the bullhorn icon sitting next to “Contact” in a main navigation?

Now we can map an alias so in our project we can use @include icon(before, contact); instead of @include icon(before, bullhorn);, or better yet put it all in an @each loop

[snippet slug=custom-unicode-mapping-font-awesome lang=css]

[snippet slug=loop-font-awesome-icons lang=css]

I find this easier to manage in the long run, and hope you find it useful!

Further Reading

• Sass Documentation: @each
• “Font Icons Like a Boss with Sass and Font Custom” by Jayden Seric