---
title: Working with font icons
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Kentico Xperience 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.

> **Info:** The following files store the system font icons:
>
> - **App\_Themes\Default\Fonts** – folder containing the default _Core-icons_ font files
> - **App\_Themes\Default\bootstrap.css** – administration interface stylesheet including font icon class definitions
> - **App\_Themes\Global\skin.css** – stylesheet for live sites, includes font icons
>
> The font icon definitions in the stylesheets are generated based on _App\_Themes\Global\Skin\icons-core.less_ and other _icon-\*.less_ files in the _App\_Themes\Default\Bootstrap_ folder.

> **Tip:** To view a list of the default font icons in the system, visit the [Xperience icon list](https://devnet.kentico.com/docs/icon-list/index.html) page on the DevNet.

## Assigning and displaying font icons

Font icons serve as visual representations of objects and actions in the administration interface. To assign a font icon to an object, such as a [Page type](https://docs.kentico.com/13/developing-websites/defining-website-content-structure/managing-page-types.md), edit the object and select the icon.

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

```xml

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

```

> **Note:** **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 __. Empty tags are removed by the editor when the source HTML is saved. A workaround is to add a&#x20;**&#xA0;** 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 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, transfer the stylesheet to your live site (MVC) project and 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 objects.

### Example

The following example demonstrates how to generate and add custom font icons using the [IcoMoon](http://icomoon.io/app/) 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:

   ```css title="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:

   ```text

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

   ...

   ```

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

1. Open the **Page types** application.
2. Edit a page type.
3. Select an icon class from the icon picker in the **Page type icon** field.
4. Open the **Pages** application and create a new page (in a content tree section where the modified page type is allowed).

You can see the updated icon in the list of page types available for the new page, and also in the content tree after you create the page.