Replacing the existing font icons

Some of the icons in the application are displayed using icon fonts. Such icons can be replaced with custom icons.

To replace the existing font icons, perform the following steps:
  1. Generate custom icon fonts. You may generate the icon fonts from custom images.
    Note: Ensure that each custom image has the same name as that of the corresponding icon that you want to replace in the application.
  2. Copy all the generated font formats (.ttf, .svg, .eot, .woff) to the <RUNTIME>/theme/fonts folder.
  3. Copy the CSS of the generated icon fonts to the 'extn-app-store.scss' file and ensure that the font URL in the CSS points to the location of the (.ttf, .svg, .eot, .woff) font files.
    Notes:
    • As the icon names used while generating the font are same as the icon names in the application, it is important that you update the CSS with the custom font-family from which the new icon must be picked.
    • Do not replace the default font-family in the CSS with the custom font-family as it will replace the default application font icons.
  4. Test your customization.
Sample code snippet to replace existing font icons:
/* Specifying the custom icon font details */
   @font-face {
    font-family: 'custom-glyphicons';
    src: url('../fonts/custom-glyphicons.eot?uxyslh');
    src: url('../fonts/custom-glyphicons.eot?uxyslh#iefix') format('embedded-opentype'),
    url('../fonts/custom-glyphicons.ttf?uxyslh') format('truetype'),
    url('../fonts/custom-glyphicons.woff?uxyslh') format('woff'),
    url('../fonts/custom-glyphicons.svg?uxyslh#custom-glyphicons') format('svg');
    font-weight: normal;
    font-style: normal;
    }
/* Specifying the font-family to display the icons */ 
    .app-icon-findProducts_generic_02:before{
    content: "\e900";
    font-family: 'custom-glyphicons' !important;
    }