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

4/23/2016

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

This is what we'll cover in this brief tutorial

Examples why you would want to do this
How the font-picker works
Configuring the font-picker to your needs
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

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

tl;dr

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,
iJungleboy

font icons Fonts 2sxc v8 Content Management customize-edit-ui High-Resolution New feature

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.