Skip to main content
Home  ›  Blog

Using Font-Icon Pickers and Icon Search in Dynamic Content Types

Providing content-editors with icon-pickers helps create awesome content. Use it to create designed tiles showing features or linking pages, or to spice up any kind of content.

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

This is what we'll cover in this brief tutorial

  1. Examples why you would want to do this
  2. How the font-picker works
  3. Configuring the font-picker to your needs
  4. Understanding special scenarios with CDN hosted fonts and 2-class font systems

Example: Link-Tiles

This is a very common use case: the editor would like to create nicely designed tiles to show features or to link to other pages. The following example is from our own web site

Understanding the Font-Picker

The font-picker is a fully automatic field which provides the editor with

  1. a preview of the selected icon
  2. a list of all possible icons in the current icon-font
  3. a fast search feature to shorten the list, which is often extremely long


I hope this will help you, help your editors to provide awesome content to all our users. I'm convinced that font-icons are here to stay and will be a core pillar in modern design for the next 5 years. I would love to hear your feedback, and don't miss the tutorials on creating a custom icon font. 

With love from the content-guys,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler