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

To view a list of the default font icons in the system, see: <http://devnet.kentico.com/docs/icon-list/index.html>

> **Info:** 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_.

## 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 [Document type](https://docs.kentico.com/k8/developing-websites/defining-website-data-structure/document-types.md), [Web part](https://docs.kentico.com/k8/custom-development/developing-web-parts/creating-new-web-parts.md), [UI element](https://docs.kentico.com/k8/custom-development/creating-custom-modules/reference-managing-ui-elements.md) or [Page template](https://docs.kentico.com/k8/developing-websites/managing-page-templates.md), edit the object and set the _font icon class name_.

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):

```xml

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

```

## 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:

   - Classes that set the **content** property for individual icons.
   - 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.
3. Place the font files and stylesheet into the project's **CMS\App\_Themes\Default\Custom** folder (create the _Custom_ folder if necessary).
4. 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 class names 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](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 **Custom** folder.
6. Edit **style.css** and add the **cms-bootstrap** class to the general icon selector:

   ```css title="Example"

   /* General icon selector with the addition of the cms-bootstrap class */
   .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-pencil:before {
       content: "\e600";
   }

   ...

   ```

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

1. Open the **Document types** application.
2. Edit a document type.
3. Enter the class name of one of the custom icons into the **Document type icon** field.
4. Create a new document in the **Pages** application. You can see the icon in the list of document types if the custom icons were added successfully.