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. 

Another common example is creating designed feature lists like the one we use in the DNN store to explain features of 2sxc. Such content is extremely hard to create without an assisting tool. If you also want to be responsive etc. it's actually impossible for a mere mortal to edit this - without tools providing such icon-search features.

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

Adding a font-picker is fairly simple. In technical terms it's just a string-field in your content-type, with a special input type called font-icon-picker - like this: 

To get the field to work, you must do a few things

1. Ensure that the font is loaded in the edit-dialog
2. Ensure that a CSS-file containing all the icon-names is loaded in the dialog
3. Tell the UI which CSS-Classes it should look for, when building a list of icons to show to the user
4. Optionally provide additional CSS-Classes to use for the icon-preview

Here you can see a simple use case where we tell the system that it needs to load 1 CSS file containing the font-definition and all icon-classes. In this case, the files are all stored in this 2sxc-app. You can also see that we told the field that all CSS rules beginning with ".icon-xyz-" are to be used when automatically creating a list of all icons. 

Modern icon-fonts can be applied like this

• <i class="icon-globe"></i>

This is because newer browsers support CSS-rules which allow them to say "anything beginning with icon-xyz has font-size X, font-name Y and a bunch of other settings" which is important to keep the CSS files small.

Older concepts worked as follows:

• <i class="glyphicon glyphicon-globe"></i>

This was necessary, to put the big set of rules on the first class glyphicons and only put the character globe on the second class glyphicon-globe. This is important, because the UI must also write the second helper class in the preview element, otherwise the icon won't show. To support this, we added a setting called Preview CSS Classes. In this example you see a font-awesome implementation, note that the preview-classes does not use a dot at the beginning, while the CSS-Prefix does.  

In many cases you will want to use fonts from a CDN because it's faster. You can do this, but there is one catch: the UI wants to create the list of all icons and for this the javascript must check all CSS-rules which are in the CSS-file. 

This only works, if the CSS is from the same domain (browser security). So you can use CDN hosted files for the font-files and for the output but for the UI you must provide a CSS-file on the local system. 

We recommend to include a copy of the CDN CSS with your app. You'll have to adjust the folders in the CSS so that the fonts are actually loaded. The image on the right shows a font-awesome from CDN, as you can see the CSS file (only the one used in the UI) is stored in DNN.

Check out a full example in the Tutorial App below. 

Everything here is fairly simple, but we know that most people would appreciate a working example. Because of this we prepared a demo and a tutorial app showing all common use cases. You can download the Tutorial for Font-Icons for both Custom-Fonts and Cloud hosted fonts in the app catalog.