Quick hint: Sass-Maps for icon-fonts

Make it easier to handle your classes for icons with a config. If you have a new one, then you update the config and you get it! I will show you a quick solution with a sass-map – my generator for icon-font is Fontastic. Easy peasy!

Include font

After you generated the icon-font in your generator, you can download it. Put in a folder like  fonts and include it via  font-face in Sass.

Basic styles

The basic class for the icon must have the same name as in the font-face. If you do this, then all icons are available.

Sass-Map as configuration

No magic, only sass-maps help us to get more structure for the code. I gave them the name  $icons  and put two icons in it. The first one is for the name of an icon and the second is the value for  content

Generate class for each icon

Loop through your Sass-Map to get for each icon a class. No magic.

Generated CSS

This is all. Now we have our CSS and can use the icons in the project.

Usage in html

This is a quick example to use it in html. Add only the basic class and the modifier for the icon which you want.

Play with it on Sassmeister

How do you work with fonticons? Which generator is the tool of your choice or how do you handle it? Let it me know!

How do you work with fonticons? Which generator is the tool of your choice or how do you handle it? Let me know it here or at Twitter!