Adding a new icon font

 UI-Kit and the Theme-Cosmos skins already provide a default icon font.

To use a different icon font, perform the following steps:

1. Follow the same steps as the web font by uploading woff and woff2 files as rule-file binary.
2. Upload a new CSS rule-file text and attach it to your skin as an additional file. This file loads the font files and provides support for the different CSS selectors and classes.

Make sure that you define a generic class that applies the icon font-family. In the UI-Kit font, the file that is used to render the icons is called py-icons.css and uses a generic class called pi.

All the other icon classes should use the same generic class as starting name (for example, pi-star). 

It is important to follow this convention so that the icon font CSS file can be parsed to display the icon picker.

To check that the icon font is correctly loaded, in the skin ruleform access Action > Launch > Skin Preview, and then click Icons. Make sure that all of your icons are correctly rendered.

To use an icon font with a button link or image, select the icon class option in the Image source list and then open the icon picker.

It is also possible to use a property reference to render an icon font by setting the value of the property to the icon classes including the prefix (for example pi pi-star). This approach is recommended when rendering the icons inside a long list of items that are rendered conditionally based on the type of the item. Instead of using visible when to change the icon font, using a property reference greatly improves the performance and reduces maintenance.