1. Creating and Implementing an Icon Font for DNN

In this tutorial we will walk you through how to implement and use icon fonts in DNN.

Icon fonts can be an invaluable resource for web developers, they are scalable, so we can make icons as large or small as necessary and absolutely no degradation will occur.

Icon Fonts have a really small file size, so our users on slow connections won’t have to wait for lots of images to download.

Any styling that can be applied to standard text, can be applied to icon fonts.

Firstly, we cover the process of creating an icon font using the services of fontastic.me. We then demonstrate the basic process of including the icon font in a DNN page and how to use the icons in your content.

Next, we walk you through how to include your own icons in the icon font and how to add an icon font to your skin file for use throughout your site.

This video contains:

• Introduction to Icon Fonts
• The advantage of online icon font services
• Signing up to Fontastic.me
• Selecting icons for inclusion in your font
• Advantages and disadvantages of hosted icon fonts
• Publishing your icon font
• How to include your icon font in the page header
• How to use your icon font and add icons in your content
• How to resize icons