Adding icon fonts to your application
When adding images to controls such as icons, buttons, or links, you typically use binary file records that are in the Image Library. Alternatively, you can use icon fonts, which offer the following advantages:
- Reduced file size
- Availability of Scalable Vector Graphics (SVG) images
- Ability to apply custom colors, sizes, and styles
An icon font set is included in the py-icons CSS text file, which is in the UI-Kit ruleset. You can use the icons in this file to add images to controls. Many of these fonts are used in the standard Pega 7 Platform user portals and forms.
The example used in this article describes how to create a button for submitting a flight reservation. In addition to the button name, Book Flight, the button must also contain an image of an airplane. An icon font is used to provide the image.
To complete this task, do the following steps:
- In the skin rule, add the py-icons font set to your application.
- In the font set, identify the icon that you want to use.
- In your layout, add the button and specify the icon font.
Add the icon font set to your application
To make the icon fonts available, add the py-icons text file to your application skin.
- Open your application skin and click the Included styles tab.
- In the Additional style sheets section, click Add style sheet to create a row.
- In the new row, select py-icons.
- Save the skin record and keep the record open.
Identify the icon font that you want to use
In the skin record, do the following steps:
- Next to the py-icons row, click the magnifying glass to open the text file.
- Scroll through the file until you find the name of the icon that you need. In this example, you use
Add the icon font to the button
To add the icon font to the button, do the following steps:
- Open the section that contains the button, and then open its properties panel.
- On the General tab, select Icon Class from the Image source drop-down menu.
- In the field that is displayed when you select Icon Class, enter the letters "pi", a space, and the name of the icon (
pi-plane), as shown in the following figure:
- Submit the updated panel and save the section.
- To see how the button is displayed on the form, select Preview in the section record's menu.
Refer to the visual reference documents to view the available icons and their names. Remember that when using fonts in the pi-icons file, you must add the letters "pi" and a space before the font name and prefix the name with the letters "pi-".
For instructions about how to add your own icon fonts, see the PegaTube video Implementing icon fonts in Pega applications
Published August 11, 2015 — Updated March 28, 2016