Convert the font files that contain application icons to ensure that the mobile app
is displayed properly with the Mobile – Slide Up layout, when you do not add the latest UI Kit
to your application stack.
When you upgrade Pega Platform or import applications from previous
Pega Platform releases, upgrade the UI Kit to the most recent version, to
avoid displaying incorrect icons in your mobile app. However, if you choose not to upgrade to
the latest UI Kit, convert your icon font to the .ttf format, and then
upload the font to Pega Platform. For more information about upgrading
applications, see Performing application validation after upgrades.
-
Determine the font that the application uses by displaying the CSS file of the skin
rule for the application:
-
In the header of Dev Studio, click the name of the application, and then click
Skin.
-
Expand the Actions menu, and then click Preview
JSON.
-
Look for a snippet of code that contains the font family attribute.
For example:
@font-face {
font-family: "UIKitIcons";
src: url("webwb/uikit-icons.woff2?") format("woff2"), url("webwb/uikit-icons.woff?") format("woff");
}
-
In the navigation pane of Dev Studio, click .
-
In the list of instances, search for and open the woff binary file
that corresponds to the icon font for your application.
-
On the Binary File form, click Download
file, and then download the .woff file with the icon
font for your application.
-
Save the values of two parameters:
-
Determine and note down the path to the CSS file of the skin rule for the
application, for example, webwb/py-icons.css.
-
Display the metadata of the font file by opening the file with a tool of your
choice, and then note down the value of the fontFamily
parameter, for example, pega-uik-13.
You need these parameters to customize the fonts.
-
Convert the .woff file to the .ttf format by
using a tool of your choice.
What to do next: Upload the font files to Pega Platform. For more information, see Uploading custom font files.