Working with font icons

Kentico uses a CSS icon font to display graphics in the administration interface. Font icons have better scalability and responsiveness than standard image files, and do not require additional requests when rendering pages.

The following files store the system font icons:

  • CMS\App_Themes\Default\Fonts - folder containing the default Core-icons font files
  • CMS\App_Themes\Default\bootstrap.css - administration interface stylesheet including font icon class definitions
  • CMS\App_Themes\Global\skin.css - stylesheet for live sites, includes font icons

The font icon definitions in the stylesheets are generated based on CMS\App_Themes\Default\Bootstrap\icons-core.less.

To view a list of the default font icons in the system, visit the Kentico icon list page on the DevNet.

Assigning and displaying font icons

Font icons serve as visual representations of objects and actions in the Kentico administration interface. To assign a font icon to an object, such as a Page type, Web part or Page template, edit the object and select the icon.

You can also manually add font icons directly into HTML markup (for live site pages, you need to link the stylesheet that defines the icon font):




<i class="icon-doc-o" aria-hidden="true"></i>


Empty tags in WYSIWYG editors

When editing the content of a text editor using the Source button, you cannot add empty HTML tags, such as <i class=“icon-paragraph-o”></i>. Empty tags are removed by the editor when the source HTML is saved. A workaround is to add a   character entity (a non-breaking space) between the tags.

Adding custom font icons

To extend the default set of available font icons, integrate an additional font into your project:

  1. Prepare the font files that define your icons (.eot, .svg, .ttf, .woff).

  2. Create a stylesheet for your icons, containing the following:

    • A font-face which specifies the font files where the icons are stored.
    • A general selector that sets the font-family and other required CSS properties for all icons. To use the icons in the Kentico administration interface, add the cms-bootstrap class to the selector.
    • Classes that set the content property for individual icons.
  3. Create a custom icon-css-classes.txt file containing custom icon CSS class names, one class per one line. This enables the icons to be displayed in the icon picker.

  4. Place the font files, the stylesheet and the icon-css-classes.txt file into the project’s CMS\App_Themes\Default\Custom folder (create the Custom folder if necessary).

  5. If you wish to use the icons on the live site, manually link the stylesheet on the given pages (the system automatically links the stylesheet on administration interface pages).

You can now assign the font icon classes to Kentico objects or manually add the icons to your HTML markup.

Example

The following example demonstrates how to generate and add custom font icons using the IcoMoon application:

  1. Create the required icon set in the IcoMoon application.

  2. Download the package (Font -> Download).

  3. Open your project’s CMS\App_Themes\Default folder.

  4. Create a Custom sub-folder.

  5. Copy the font folder (containing .eot, .svg, .ttf, .woff files) and the style.css stylesheet from the IcoMoon package into the CMS\App_Themes\Default\ Custom folder.

  6. Edit style.css and add the cms-bootstrap class to the general icon selector:

    Example style.css
    
    
    
     @font-face {
         font-family: 'icomoon';
         src: url('...');
    
         ...
     }
    
     .cms-bootstrap [class^="custom-"], .cms-bootstrap [class*=" custom-"] {
         font-family: 'icomoon';
         speak: none;
         font-style: normal;
         font-weight: normal;
         font-variant: normal;
         text-transform: none;
         line-height: 1;
    
         ...
     }
    
     .custom-icon1:before {
         content: "\e600";
     }
    
     ...
    
    
     
  7. Create the icon-css-classes.txt file containing names of your custom icon classes:

    
    
    
     custom-icon1
     custom-icon2
     custom-icon3
     custom-icon4
    
     ...
    
    
     

You can try out the custom icons by assigning them to an object in Kentico. For example:

  1. Open the Web parts application.
  2. Edit a web part.
  3. Select a icon class from the icon picker in the Thumbnail field.
  4. Open the Pages application and switch to the Design tab.
  5. Search for the modified web part in the web part panel on the right side of the interface. The web part should have a updated icon.