Create Custom Icon-Fonts in 99 Seconds for Web Sites (video)

You really need custom icon-fonts if you're serious about designed content or need buttons in your app. Here's how in 99 seconds, + after that lots of tips, tricks from real life experience.

This is a part of my short series about font icons. Here's the full series

1. Setting up icon-font pickers with search in dynamic content types
2. How to upload fonts and icon-font packages in DNN
3. Creating your own custom icon-fonts
4. The tutorial app for including custom fonts or CDN-hosted fonts in DNN Content

Why we need custom icon fonts

When we started using font-icon libraries instead of common icons, we started with the Glyphicons included in Bootstrap 3. This was fun but very quickly we ran into problems like

1. We needed icons which were missing in a standard library…
2. …we could switch to a larger library like Font-Awesome, but that's often too much weight
3. Sometimes we just needed 2-3 icons, and a large font-set just wasn't cool
4. Sometimes we needed our own illustrations in icon-libraries
5. Sometimes we must limit the choice to a small, corporate-design approved set
6. To help users search the icons we must sometimes rename them, possibly into another language

So we decided to do it better and create a custom font-icon library. It turned out to be very easy to do, so I wanted to share this with you - with all the lessons learned on the way. Watch this video:

Here the most important links to work with if you want to try something from the video

1. The tool to build custom icon-fonts is fontello
2. Here's the blog which shows how to upload and install fonts in DNN
3. Here's the post which explains in detail how to use and configure icon-picker fields in dynamic content
4. Here's the tutorial app with custom icon-fonts and also using font-awesome from a CDN

Hope you love it,
Daniel