Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

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

      Example: Feature List

      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.

        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

          Adding an Icon-Picker to your Dynamic Content Type

          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: 

            Configuring the Icon-Search Field

            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. 

              Supporting old 2-class icon-fonts like Glyphicons and Font-Awesome

              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.  

                Using CDN hosted fonts

                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. 

                  Tutorial App

                  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. 


                    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 forge), an open source module for creating attractive content and DNN Apps.

                    Read more posts by Daniel Mettler


                    There are currently no comments, be the first to post one.

                    Comment Form

                    Only registered users may post comments.


                    2sic Daniel Mettler (124)
                    Aderson Oliveira (15)
                    Alec Whittington (11)
                    Alex Shirley (10)
                    Andrew Nurse (30)
                    Anthony Glenwright (5)
                    Antonio Chagoury (28)
                    Ash Prasad (21)
                    Ben Schmidt (1)
                    Benjamin Hermann (25)
                    Benoit Sarton (9)
                    Beth Firebaugh (12)
                    Bill Walker (36)
                    Bob Kruger (5)
                    Brian Dukes (2)
                    Brice Snow (1)
                    Bruce Chapman (20)
                    Bryan Andrews (1)
                    cathal connolly (55)
                    Charles Nurse (163)
                    Chris Hammond (203)
                    Chris Paterra (55)
                    Clinton Patterson (28)
                    Cuong Dang (21)
                    Daniel Bartholomew (2)
                    Dave Buckner (2)
                    David Poindexter (3)
                    David Rodriguez (2)
                    Doug Howell (11)
                    Erik van Ballegoij (30)
                    Ernst Peter Tamminga (74)
                    Geoff Barlow (6)
                    Gifford Watkins (3)
                    Gilles Le Pigocher (3)
                    Ian Robinson (7)
                    Israel Martinez (17)
                    Jan Blomquist (2)
                    Jan Jonas (3)
                    Jaspreet Bhatia (1)
                    Jenni Merrifield (6)
                    Joe Brinkman (269)
                    John Mitchell (1)
                    Jon Henning (14)
                    Jonathan Sheely (4)
                    Jordan Coopersmith (1)
                    Joseph Craig (2)
                    Kan Ma (1)
                    Keivan Beigi (3)
                    Ken Grierson (10)
                    Kevin Schreiner (6)
                    Leigh Pointer (31)
                    Lorraine Young (60)
                    Malik Khan (1)
                    Matthias Schlomann (15)
                    Mauricio Márquez (5)
                    Michael Doxsey (7)
                    Michael Tobisch (3)
                    Michael Washington (202)
                    Mike Horton (19)
                    Mitchel Sellers (28)
                    Nathan Rover (3)
                    Navin V Nagiah (14)
                    Néstor Sánchez (31)
                    Nik Kalyani (14)
                    Peter Donker (52)
                    Philip Beadle (135)
                    Philipp Becker (4)
                    Richard Dumas (22)
                    Robert J Collins (5)
                    Roger Selwyn (8)
                    Ruben Lopez (1)
                    Ryan Martinez (1)
                    Salar Golestanian (4)
                    Sanjay Mehrotra (9)
                    Scott McCulloch (1)
                    Scott S (11)
                    Scott Wilkinson (3)
                    Scott Willhite (97)
                    Sebastian Leupold (80)
                    Shaun Walker (237)
                    Shawn Mehaffie (17)
                    Stefan Cullmann (12)
                    Stefan Kamphuis (12)
                    Steve Fabian (31)
                    Timo Breumelhof (24)
                    Tony Henrich (3)
                    Torsten Weggen (2)
                    Vicenç Masanas (27)
                    Vincent Nguyen (3)
                    Vitaly Kozadayev (6)
                    Will Morgenweck (37)
                    Will Strohl (163)
                    William Severance (5)
                    Try Evoq
                    For Free
                    Start Free Trial
                    a Demo
                    See Evoq Live
                    CONTACT US
                    Need More Information?
                    EMAIL US