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
- Setting up icon-font pickers with search in dynamic content types
- How to upload fonts and icon-font packages in DNN
- Creating your own custom icon-fonts
- 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
- We needed icons which were missing in a standard library…
- …we could switch to a larger library like Font-Awesome, but that's often too much weight
- Sometimes we just needed 2-3 icons, and a large font-set just wasn't cool
- Sometimes we needed our own illustrations in icon-libraries
- Sometimes we must limit the choice to a small, corporate-design approved set
- 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
- The tool to build custom icon-fonts is fontello
- Here's the blog which shows how to upload and install fonts in DNN
- Here's the post which explains in detail how to use and configure icon-picker fields in dynamic content
- Here's the tutorial app with custom icon-fonts and also using font-awesome from a CDN
Hope you love it,
Daniel