Skip to Content

A customer has recently asked me to integrate their custom Font Type and home grown icon gallery not only in a set of custom made Fiori Applications but also into the standard SAP Fiori Launchpad. After investigating for a while and reading great posts like Fiori Icon logic by Jerry Wang I reached following conclusions:


1. A custom Font Type can be exposed via url as mime object within a BSP

BSP.png

The Font Type will be accessible thru an url as following:

https://<host>.<domain>:<port>/ sap/bc/bsp/sap/<bsp_name>/<font_type.ttf>


2. Theme Designer allows referencing a custom Font via url using CSS font-face :

@font-face {
font-family: <FontType>;
src: url(https://<host>.<domain>:<port>/sap/bc/bsp/sap/<bsp_name>/<FontType.ttf>;);
}

See w3s documentation in http://http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp.


3. When defining a Launchpad tile only SAP standard icons can be selected:


/wp-content/uploads/2015/12/launchpad_tile_creation_854949.png

/wp-content/uploads/2015/12/list_of_standard_icons_854950.png


4. Each SAP icon has an icon code associated. For instance, sap-icon://course-book has E096 linked to it


/wp-content/uploads/2015/12/icon_code_854951.png

The complete SAP icon list can be found in the Icon Explorer.

5. As Jerry explains in  Fiori Icon logic, SAP uses attribute data-sap-ui-icon-content which is filled by the IconRenderer, which itself brings icon name and icon code together. At that point, icon name course-book is linked to icon code E096.

If we check in the browser debugger, we can see the font family used is the standard “SAP-icons” and the icon name is “course-book”.

icon_debuggerPNG.PNG


6. For my research I’ve taken few icons from the open Fontello collection and customized them to make them fit the UI5 icon codes and I’ve created a custom Font Type called “euro.ttf”.  So in my example, the Fontello icon-heart has been given icon code E096, which attached to course-book in Fiori.

/wp-content/uploads/2015/12/icon_heart_854953.png

You can find more information about Fontellon on http://fontello.com/

7. As we already know, we can define a custom font via CSS. That means we can link the icon code E096 to another custom icon when setting up our custom Font Type and reference it in the Theme Designer CSS tab.

/wp-content/uploads/2015/12/theme_designer_854960.png

So whenever the Launchpad pulls the configuration for our tile, font name “course-book” associated to icon code E096 will now fetch the icon-heart defined in our custom Font Type. Same happens with other icons I’ve also defined in the custom Font Type “euro.ttf”:

/wp-content/uploads/2015/12/launchpad_854961.png

I hope this trick can help those willing to use custom fonts and custom icons in the SAP Fiori Launchpad. Your comments are highly welcome! 🙂

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Florian Henninger

    Hi Jaime,

    but that mean you need to kill some of the SAP-Logo’s. Nice to know about the logic behind, but I highly recommend not doing things like that.

    Imagine a simple situation A new developers join you company and do not know about some scret-stuff… Some years later this will end in a mess and what about an upgrade. Are the custom-logos overwritten all the time, or is my original lost forever?

    A lot of questions not answered. Just because you can do it, doesn’t mean you should do it 😉

    ~Florian

    (0) 
    1. Jaime Ojeda González Post author

      Hi Florian,

      Indeed custom icons/fonts won’t be overwritten because it is part of your company’s brand. Does you custom theme get overwritten on each upgrade? Not really. We would be on serious trouble if our custom CSS would get messed after normal upgrades. If a new developer joins and there is no documentation describing your company’s Theme/CSS then troubles will be same serious sooner or later 🙂

      Cheers,

      Jaime

      (0) 
      1. Florian Henninger

        Hi Jaime,

        don’t say that you aren’t allowed to do it, just want to give another view on the situation. If you got it handled your one of the lucky guys. I got a lot of customers which aren’t that sure about things like that…

        ~Florian

        (0) 
  2. Grahame Collins

    Hello Jaime,
    Firstly this is a great guide.
    Just wondering if you know if there is a guide that details how to create a custom icon?
    this guide explains how to use them but not how to create them?
    Any information you have would be greatly appreciated.

    Regards,
    Graham

    (0) 
  3. Naseem Vadakke Peediyekkal

    Hello all,

    I tried to follow this method and is not getting the icons displayed.

    When i apply the theme with the mentioned changes, all the icons present are seen appeared by square boxes as shown below.

    I think, the applied css is changing the font family to the custom one for all tiles. Any suggestions?

    Regards,
    Naseem

    (0) 

Leave a Reply