This content has been archived and is no longer being maintained.

Table of Contents

Article

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:

  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.
    Click Add style sheet to add a row
  3. In the new row, select py-icons.​
    py-icons selected in the Add style sheet list
  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.
    The pi-plane font in the py-icons file

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:
    Icon Class and icon font name specified in button properties panel
  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.
    Button displaying icon font image
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


100% found this useful

Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.