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:

1. In the skin rule, add the py-icons font set to your application.
2. In the font set, identify the icon that you want to use.
3. 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.

1. Open your application skin and click the Included styles tab.
2. In the Additional style sheets section, click Add style sheet to create a row.
   
3. In the new row, select py-icons.​
   
4. 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:

1. Next to the py-icons row, click the magnifying glass to open the text file.
2. Scroll through the file until you find the name of the icon that you need. In this example, you use pi-plane.
   

Add the icon font to the button

To add the icon font to the button, do the following steps:

1. Open the section that contains the button, and then open its properties panel.
2. On the General tab, select Icon Class from the Image source drop-down menu.
3. 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:
   
4. Submit the updated panel and save the section.
5. To see how the button is displayed on the form, select Preview in the section record's Actions menu.
   ​

For instructions about how to add your own icon fonts, see the PegaTube video Implementing icon fonts in Pega applications