Close popover

Table of Contents

Converting the icon font for imported applications

Version:

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 .

  1. Determine the font that the application uses by displaying the CSS file of the skin rule for the application:

    1. In the header of Dev Studio, click the name of the application, and then click Skin.

    2. Expand the Actions menu, and then click Preview JSON.

    3. Look for a snippet of code that contains the font family attribute.

      @font-face { font-family: "UIKitIcons"; src: url("webwb/uikit-icons.woff2?") format("woff2"), url("webwb/uikit-icons.woff?") format("woff"); }
  2. In the navigation pane of Dev Studio, click Records Technical Binary File .

  3. In the list of instances, search for and open the woff binary file that corresponds to the icon font for your application.

  4. On the Binary File form, click Download file, and then download the .woff file with the icon font for your application.

  5. Save the values of two parameters:

    1. Determine and note down the path to the CSS file of the skin rule for the application, for example, webwb/py-icons.css.

    2. 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.

  6. Convert the .woff file to the .ttf format by using a tool of your choice.

Upload the font files to Pega Platform. For more information, see Uploading custom font files.

  • Replacing the icon font in imported applications

    Ensure that your mobile app is displayed properly with the Mobile – Slide Up layout, by replacing the font for icons on the header or the bottom bar. Complete this procedure when the UI Kit in your application is in an earlier version than version 14, and you do not add the latest UI Kit to your application stack.

  • Mobile app branding and layout

    Before you build a mobile app, you can customize its branding and layout to meet your company's specific requirements. Upload images to Pega Platform, and then use them to customize the splash screen, application icon, and other branding assets.

  • Keystores

    A keystore is a file that contains keys and certificates that you use for encryption, authentication, and serving content over HTTPS. In Pega Platform, you create a keystore data instance that points to a keystore file.

  • CSShelper classes

    Rather than creating a new skin format, apply standard, predefined Cascading Style Sheet (CSS) helper classes to make a minor formatting change to a cell or dynamic layout. Using CSS helper classes saves development time, reduces maintenance by limiting the number of customized skin formats, and improves the consistency of the look and feel of you

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.