Skip to main content

Adding a new icon font

Configuring the new icon font file

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

Example of the Pega icon font CSS file

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

Note: Using a generic class allows you to specify the font-family using a class selector (like pi) instead of using a search selector like [class^=pi]. This approach is more efficient for the browser but requires you to specify both the base class and the icon class, for example, 'pi pi-star'.

Testing that the icon font is correctly configured

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.

Viewing the icons in the skin rule


Configuring a component to use an icon class

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.

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

Check your knowledge with the following interaction

This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

100% found this content useful

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice