Adding icon fonts for a new view

You can stylize a new view by adding icon fonts.

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 STYLE_EXTENSIONS_HOME/fonts directory.
   Note: It is recommended to create the fonts folder within the STYLE_EXTENSIONS_HOME location.
3. Copy all the generated CSS inside the custom_glyphicons.scss file and place it in STYLE_EXTENSIONS_HOME, ensuring that the font URL in the CSS points to the location of the (.ttf, .svg, .eot, .woff) font files. (STYLE_EXTENSIONS_HOME/fonts). Add a reference to the custom_glyphicons.scss file in the <WORKSPACE>/store-frontend/store-extensions-src/styles_extn.scss file.
   Note: Ensure that all your CSS class names are prefixed with custom-icon-.

   A sample code snippet to use custom icon font:

   /* 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;
       }
       
       .custom-glyphicons {
           font-family: 'custom-glyphicons' !important;
           speak: none;
           font-style: normal;
           font-weight: normal;
           font-variant: normal;
           text-transform: none;
           line-height: 1;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }
   /* Specifying the font-family to display the icons */ 
       .custom-icon-test-icon_20:before {
         content: "\e900";
       }

4. Test your customization.