2. Creating and Including Custom Icons / Adding an Icon Font to your Skin File

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:

• Designing your own icon in Adobe Illustrator
• Exporting an icon as SVG
• How to add your custom icon to your icon font
• Using your custom icon
• How to include your icon font in all page headers within your skin file
• Locating and editing your skin file