CustomFontsSAC

OUTDATED - Please use official UI5 CDN instead of this repository: While hosting the font file yourself will still work, meanwhile there is a much simpler way using the official UI5 CDN. The font definition file is included in the UI5 shipment and can be linked directley from SAC. Please use this URL to link the font: https://ui5.sap.com/resources/sap/ui/core/themes/base/SAP-icons.css

Demo repository to showcase usage of custom icon fonts in SAC.
The gh-pages branch hosts the SAP Fiori icon font released with OpenUI5.

Note: For demonstration purposes only, we use the gh-pages branch to host the custom font definition files. Be advised that this is not recommended for productive use. You can host the files similarly on any kind of publicly available webserver or cloud infrastructure, though.

Instructions

1. To use the SAP Fiori Icon Font in SAP Analytics Cloud, host a simple font definition file on a public server:

/* SAP Fiori Icons */
@font-face {
  font-family: 'SAP Fiori Icons';
  src:
    url('https://<yourserver>/path/to/SAP-icons.woff2') format('woff2'),
    url('https://<yourserver>/path/to/SAP-icons.woff') format('woff'),
    url('https://<yourserver>/path/to/SAP-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. Download the three font files sap-icons.ttf, sap-icons.woff, sap-icons.woff2 from the latest UI5 shipment and put it right next to the definition file.

   • SAP-Icons.woff2
   • SAP-Icons.woff
   • SAP-Icons.ttf

3. Add the font definition URL to the SAC custom web font settings (see documentation link below).

   

OUTDATED - Please use official UI5 CDN instead of this repository: While hosting the font file yourself will still work, meanwhile there is a much simpler way using the official UI5 CDN. The font definition file is included in the UI5 shipment and can be linked directley from SAC. Please use this URL to link the font: https://ui5.sap.com/resources/sap/ui/core/themes/base/SAP-icons.css

4. Add the hostname where the font is located to the Trusted Origins in the SAP Analytics Cloud Administration page.

   

5. Done! You are now ready to use the SAP Fiori icon font in your SAP Analytics Cloud stories:

   

Related Information

• SAP Fiori Iconography: The SAP Fiori design guidelines for icons
• UI5 Icon Explorer: A handy tool to browse the SAP Fiori icon font
• SAP Analytics Cloud Help: Instructions for loading custom fonts

License

This repository licensed under the Apache Software License, v.2 except as noted otherwise in the LICENSE file.

Enjoy!