Icon Fonts

Icon fonts are fonts, that instead of letters or numbers, containing symbols and glyphs. You can style icon fonts with CSS, in the same way you style regular text. SAPUI5 includes some icons in the SAP Icon Pool. You access them and use them in your applications and Neptune configuration by using the sap-icon://* scheme.

The advantage of icon fonts over bitmap images like .gif, .jpg and .png images are:

  • You can apply any CSS effects to them.

  • Because they are vector graphics, they’re scalable. That means you can scale them up or down without losing their quality.

  • You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require.

  • They load fast because of their small size.

  • They’re supported in all browsers.

Use in App Designer

icons properties

Use in the Cockpit

icons explorer
icons tile

Settings

When you create a font icon set, you have to add ID and description. If you enable the icon font, it will be loaded in all applications, every launchpads and in all mobile clients. It will also be exported to mobile builds.

icons settings

Icons

Icons are stored in font files, like .eot, .woff & .ttf files. The font files are referenced in a CSS stylesheet. But that’s not enough! To use font icons in UI5, they have to be loaded into the UI5 Icon Pool.

Neptune does this automatically for you, but we need to have a list of the icons in a very specific format. You need to create this list in JSON format. To be more specific, a JSON array with font objects Neptune will not do any validation of the JSON file, get it right!

The format goes like this:

[{
    "f": "font-family", "t": "icon-name", "c": "icon-id"
},{
    "f": "font-family", "t": "icon-name", "c": "icon-id"
}]

There are a lot of services that makes it possible to create your very own icon font collections. I’ve created a small collection on Icomoon: https://icomoon.io]

2 icons showing containers suitable for delicious beverages:

icons beverages

Each service is different, somehow you need to get the icon-name and the icon-id for each icon. FontAwesome has both in configuration files found in the downloaded files, Icomoon does not, you’ll find icon-name and icon-id in the CSS file, or directly on their website when you build the icon font.

icons mug

Based on this information this is the resulting JSON string. Very important that both key and value are embraced in double quotes!

[{
    "f": "icomoon", "t": "glass", "c": "e9a0"
},{
    "f": "icomoon", "t": "mug", "c": "e9a2"
}]
icons css

The font-family will become a "sub" set in the UI5 icon pool: sap://<font-family/<icon-name>. Example: sap://icomoon/mug.

Font Files

An Icon Font consist of a CSS stylesheet and some font files. In the CSS file, the font files are referenced, so that the browser knows where to find them in the file system. Here’s example from our Icomoon project (not all properties are show). Notice that the font files are referenced using a relative path, you might need to adjust this according to you project. The icons themselves are also presented nicely in this font

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.woff?j7mhp7') format('woff');
}
.icon-glass:before {
  content: "\e9a0";
}
.icon-mug:before {
  content: "\e9a2";
}

You can store the icon font files where you want, but we recommend to store them in the SAP MIME repository. Then the files will be added to mobile client builds and can be used in Native Android and iOS hybrid applications build with PhoneGap.

The CSS file will be added to HTML header, the font files will only be used when building a mobile client. Running online in a desktop launchpad, the font files will be fetched by the browser automatically based on the paths in the CSS file.

icons fontfile

MIME repository:

icons mime

App Designer

The icons can now be used in the App Designer and in your applications. But if you want them to show up in categories and be searchable in the App Designer, they must be added to the Neptune Icon Explorer. For this to happen, you need to create additional JSON configuration files.

[{
    "c": "category-id-1", "t": "category-name-1"
},{
    "c": "category-id-2", "t": "category-name-2"
}]

Likewise, you need to create a JSON list of icons and their categories.

[{
    "i": "icon-id-1",
    "c": ["category-id-1","category-id-2",category-id-3","category-id-4"]
},{
    "i": "icon-id-2",
    "c": ["category-id-1","category-id-2",category-id-3"]
}]
icons designer