Skip to main content

Blog Post

Adding Your Own Icon Fonts to Your Drupal Theme

Icon fonts are a flexible solution for adding icons to your website. Having the icon contained in the font allows you to switch size and scale, color and add effects easily without having to redraw an image. In addition a font needs to be only loaded once, rather than 1 call per image (unless you are using a sprite like a fancy person, but sprites don't have the previously mentioned font benefits)...

Do you need customized icons?

Probably not, there are several robust solutions already available, fontawesome, iconic and many others. (weloveiconfonts.com).  Most of these libraries include almost all of the icon applications that you can imagine a use for, facebook, twitter, friendster, myspace.

However, if you are going to add a font library, why not your own? Or if you want to add a precreated icon library, but only want to include 5 icons, you can create a smaller leaner version.

Software tools you will need:

• Illustrator, Photoshop, or another shape creation software.

• Font creation software, such as glyphs or forge.

You will need some kind of software for creating the shapes that you would like to use, I suggest illustrator, but you could probably use photoshop or any one of the many others, although I think vectors work better. I have found that layered images have a way of rendering unusually in the font creator, so pay attention to layers, strokes and outlines. Ideally you want one solid shape.  Whitespace should be cut out, so the background will show through. In this example I have created a cake icon.

Cake Icon

I am using a font creation tool called 'Glyphs Mini', which at $44.99 is a steal.

There are a couple of good tutorials out there for using this software, however it is is actually pretty easy to guess at how it works.

Importing your icons is as easy as cut and paste. Each icon aligns to a keyboard character. The font can be as large or small as you wish. We want to keep the font file sizes as low as possible, so don't include blank characters. (here visible so you can see what they look like).

glyphs mini

Once you have created the otf by exporting the font, use a web based font package generator to create all of the font versions that you may need, including an internet explorer eot and also svg backup.

Integrating the font into your site.

In your theme, add your fonts to your 'font' folder, or wherever you would like them to live. In this example I am assuming you are using sass. (use sass).

You can load the fonts in various ways, over time I have defaulted to using a sass mixin that was constructed from various examples I found around the web. You can build a mixin to include any parts of the font information that you need. It is a good idea to see how this out puts as css to make sure that you get all of the items you require. Sass meister example here.

//a variable to contain any extra path information required for the mixin
$base: path to font folder

//mixin (using shorthand) for fontface integration
=fontFace($family, $src, $weight: normal, $style: normal)
 @font-face
 font-family: $family
 src: url("#{$base}/fonts/#{$src}.eot")
 // IE9 compat
 src: url("#{$base}/fonts/#{$src}.eot?#iefix") format("embedded-opentype"), url("#{$base}/fonts/#{$src}.woff") format("woff"), url("#{$base}/fonts/#{$src}.ttf") format("truetype"), url("#{$base}/fonts/ {$src}.svg") format("svg")
 // legacy iOS
 font-style: $style
 font-weight: $weight

// Load Font Example, how you would use the above mixin
 +fontFace(tobias-regular, tobias-regular-folder)

Once you see that the font is loaded in your css file, you can start using it.

Probably a good idea to add a mixin to control the font, an example would be:

//a variable that contains the family name of the font
$tobias-icon-font: "tobias-regular"

//mixin that uses the new font
=new-icon-font
 font-family: $tobias-icon-font
 speak: none
 font-style: normal
 font-variant: normal
 text-transform: none
 line-height: 1
 font-size: 32px 

Now you can start adding your font to selectors on your site, but there is a way that you can make your font even more useful.

Notice in glyph, when a character is highlighted, there are a lot of details provided to you, perhaps the most exciting for us is the unicode.

Unicode example

By assigning the unicode values to a variable we can call the icons easier, in a way that makes a little more sense.

So in our cake icon example, the unicode value is 0061, so we could set our variable as $cake: "/0061", and then call it.

.test-class
 +new-icon-font
 &:after
   content: $cake
   etc
   etc

That is it for adding icon fonts. Here are some links I find useful: 

What is Unicode? 

Web Fonts Performance: Making Pretty Fast 

Tutorial: Reducing the File Size of Custom Web Fonts 

CSS Tricks: Icon Fonts 

Web Font Generator 

Tobias Williams

Meet team member, Tobias Williams

In his role as Front End Engineer at Mediacurrent, Tobias Williams strives to learn something new every day, and keep an open mind to new methods for front-end solutions. He...

Learn more about Tobias >
Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow