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:
- Follow the same steps as the web font by uploading woff and woff2 files as rule-file binary.
- 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.
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.
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.
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:
Want to help us improve this content?