Skip to Content

Design Studio 1.2/1.3 – SAP Fonts Usage for Icons

UPDATE:

Anyone struggling with CSS/Font/Icon/Image issues, please read this additional blog entry – Design Studio 1.3 – Making Adhoc Analysis Template, Images, and CSS Work

Original Post:

As we can see in the new 1.3 Ad-hoc Analysis Template, there seems to be a push to make things look more and more like Fiori.  We see this with the SAP Blue Crystal theme showing up, as well as usage of SAP Icons, and flat, clean design principles.

After looking under the hood at the approaches used in the adhoc template, I observed a few funny things:

  1. A heavy reliance on CSS to make the app have the look and feel like a Fiori-esque app.
  2. A heavy reliance on absolute positioning and dynamic visibility to simulate contextual pop-overs/menus.
  3. Usage of CSS pseudo-elements for iconography (which is where I’m going to explore in this post)

I think there’s a big divide on the legitimacy of the whole CSS pseudo-element thing.  Basically the argument can be made CSS shouldn’t carry content, but the :before and :after kinda cheat.  But whatever, looks like SAP has taken their stance that for Design Studio, this may be ok.  (This is just all conjecture, by the way 🙂 )

So what exactly is going on in the Ad-hoc template’s CSS?  A lot of cosmetic/formatting stuff I mentioned in bullet 1 which I won’t cover, but also pseudo-elements for icons that I want to shed more light on:

First, I noticed they are using @font-face to use a web font approach for referencing their SAP-Icons font files:


/* Formating Style in Fiori Style */
/* BEGINNING */
@font-face {
font-family: 'SAP-icons';
src: url('SAP-icons.ttf'),
url('SAP-icons.eot'); /* IE9+ */
font-weight: normal;
font-style: normal;
}

Then around line 148 or so, we see a lot of these CSS Classes:


/* Icons */
.ICON_BOOKMARK:before {
font-size: 22px;
font-family: 'SAP-icons';           
content: "\e19b";        
speak: none;
}
.ICON_PLAN:before {
font-size: 22px;
font-family: 'SAP-icons';           
content: "\e0ba";        
speak: none;
}
.ICON_COPY:before {
font-size: 22px;
font-family: 'SAP-icons';           
content: "\e039";        
speak: none;
}

(and so on)

These are the CSS Classes being applied to Text components in the Ad-hoc template.  The content fragments are escaped character codes for certain characters in the font.  It’s an interesting approach, if a little “unconventional”.

So anyways – How many of these Icons could we as dashboard authors use and do our own icons?  Let’s visit this SAP page: Icon Explorer

It appears that there are 507 icons at our disposal, according to the Icon Explorer.  So armed with this information, we can derive a few important things to make our own icon CSS classes:

By using the Icon Explorer, let’s look at adding this icon:

/wp-content/uploads/2014/05/sapfont_464285.png

You’ll notice on the bottom right, it gives you an id with a code of ‘e116’.  This is the same code that is used in the CSS selector for the examples mentioned earlier.  So let’s make our own.


.ICON_MONEY:before {
  font-family: 'SAP-icons';
  content: "\e116";
}

You’ll notice I left out the font-size and speak stuff.  I want to show just the bare bones of what you need for this to work, but you can leave the extra stuff or customize if you want.

So next, let’s drop in a Text Item, remove its default Text, and assign it the CSS Class ‘ICON_MONEY’.  If you do this, you’ll notice the icon is pretty small (like an average letter in a text box):

/wp-content/uploads/2014/05/sapfont2_464286.png

Let’s use the CSS Style property to size it how we wish:  ‘font-size: 3rem;line-height: 3rem;’

/wp-content/uploads/2014/05/sapfont3_464287.png

There, that looks better…  And there you have it.  By using SAP’s pseudo-element approach, along with their supplied SAP-Icons font family, you can use over 500 icons without having to use image files.

Enjoy!

48 Comments
You must be Logged on to comment or reply to a post.
    • Tammy,

      I’ve continued to hear SAP refer to Fiori as either an ‘intent’ to deliver consumer-grade quality experience, also a ‘design principle’ in how that experience looks, and also more and less accurate, a manifestation of what SAPUI5 and sap.m components do to make this all happen.  It’s of course also a product they will sell as apps, but so I guess it’s just who is saying ‘Fiori’ and/or how it’s used in a context.  🙂   Maybe it’s just me, but it’s one of those confusing ever-changing terms.

      This is a great site about Fiori Design Principles:

      https://experience.sap.com/fiori-guidelines/index.html#SAPFiori

      Then of course there’s the product perspective:

      http://www.experience.sap.com/fiori/

      And then a SAPUI5 app inspired by those Fiori Design Principles (like the Fiori Launchpad)

      SAPUI5 SDK – Demo Kit

  • Hi Michael,

    that’s an interesting topic. Thanks a lot.

    By using the SDK I have an own symbol component, now. The application builder has just to chose the id as a property value and gets the depending icon.

    For your information, not all Icons are included in the files SAP-icons.ttf and SAP-icons.eot.


    Kind regards


    Patrick

  • It seems the icon approach in the AdHoc Template is not working on iPad (at least if one consumes the application via the Mobile BI App). It looks as the iDevice replaces the icon-fonts with Emoji 😉

    Any idea on that?

  • Hi Michael,

    Nice blog!! And I am bit confused as I am not much favour of this tool. Could you please tell me how to add css class(script) to design studio. If it is css style we can write the script in particular place (css style ) But What about css class? Do i need to save those scripts somewhere and use the file name?

    Regards

    Mathivanan

      • Hi Michael,

        Thanks for the blog! It helped me. In design studio I am working in SAP Businessobjects BI platform mode and I have uploaded CSS eot and ttf files in launchpad. I can see all three files in launchpad. I used some Chart ICON’s and I am able to see those chart Icons in design time

        ds mode.png

        and I can see those ICON”s if i execute in local mode also, But If I open saved application from launchpad I couldn’t see the ICON’s Instead its just displaying a rectangle

        run mode.png

        I thought it is loading for a while, But till end it is just as above screenshot.. Could you please help me!! I am able to see icons in design time but not when i execute in launchpad

        Using Design studio 1.3

        Regards

        Mathivanan

          • Yes!! I have uploaded the font files and I can see three files(.css, .eot, .ttf) in launchpad. I did as you demonstrate in that blog

            I am working in BI platform. that is tools-> preference -> SAP businessobjects BI platform. not in local mode. So whenever i save application it saves in BI launchpad too. correct me if I’m wrong.!


            I am able to see ICON’s before i execute(design time). Its just displaying rectangle box (instead icon) only when i execute on BI launchpad


            Regards,

            Mathivanan

          • Hi Michael,

            I got it. All working fine now. The mistake what i did is Design studio 1.3 was not updated in BI server. Actually it was till Design studio 1.2(previous version)

            Thanks for all your help and blogs!! Really did help!!

            Regards,

            Mathivanan M

  • Micheal ,

    Great blog!

    Do i have to upload NEW_FONT_Design.css ,SAP_icons.eot , SAP-icons ttf  to BO repository to launch  DS application from BI launchpad   , while uploading content.biapp ?

    Thanks,

    pramod

  • Great Blog, As those above are saying, cant seems to get this to work with BI Platform Startup. I copied the CSS file up to the platform via the Design Studio but when i reference a class in the CSS file it shows blank in the text box. Any ideas, or do you mind sharing the process on getting the right files into the BOBJ platform.

    Thanks

      • You need to upload the two font-files to the same folder on the BIP, as the CSS file.

        You can do it from Design Studio via the Applications CSS Selector (where you select/upload the CSS File too). You need to use a little trick and remove the file type filter on “cascading style sheet” and the you can select the two files (.ttf and .eot). You will not be able to see these file after uploading them, but upload works.

  • Hi

    Great article

    I fount the 3 files under the folder

    “C:\Program Files\SAP BusinessObjects\Design Studio\plugins\com.sap.ip.bi.zen.content_13.0.3.201405141058\templates\Desktop\TEMPLATE_ADHOC_ANALYSIS”

    But I don’t know how and where to upload them to the server???

    When I try to build a new app from a template, I get error messages like:

    “MIME object “ADGPC05ZUOFDPFAAIRP01_Q/NEW_DESIGN_FONT.css” does not exist”

    Please help

    Shlomi

  • Hi,

    Will this work in local mode? I have saved .eot, .ttf and .css in local repository folder. But when I use ICON_MONEY in css class of text component its just blank. I am not able to see any ICON. and do i have to add css file name in custom css of application properties. if so can you please tell me the format? I am new to this tool. Please help me

    Thanks in advance

    Regards

    Mathivanan

  • Hi Michael,

    Great article!

    I have a small issue, it seems that i don’t have all the icons from SAP-ICONS

    I don’t even have your .ICON_MONEY example and I also check if we have the same version of files and it seems the size and date are the same (21-03-2014 for .eot and .ttf; 22-04-2014 for .css file).

    Would be really nice if there is a way to have all the icons (or most of them) from SAP-ICONS. (i guess i need them in .eot file and then add them in .css file?will be really helpful if there is any .eot and .css which already have most of them)

    Thanks!

  • Hi Michael,

    Thanks for this article!

    Is it possible to create also an mouse-over text for this Buttons?

    many thanks in advance.
    Best regards,

    Markus
    .

  • Hi Michael,

    Great Post, really help me.

    Now I wanted to know if it is possible to use ICONS inside the crosstab when we use the alerts.

    How to show status icons for BEx Exceptions in Design Studio

    Insted of using the backgroung-image or that image, use the ICON_ARROW_UP

    .myAlerting .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background

    {

    color: rgba(0,0,0,0.0);

    background-image: url(‘status_1.gif’) !important;

    background-repeat:no-repeat !important;

    background-position:center top !important;

    }

    • .ICON_ARROW_UP:before { 
    • font-family: ‘SAP-icons’;             
    • content: “\e1e4”;     
    •  

    Hope someone can help me with this, I think is going to be very usefull for everybody.

    Thanks and best regards,

    Matias

    • Matias,

      That’s a really good idea.  I don’t have time this week to figure out if we can do this but I’d really like to try to get that to work.  I agree that would be a useful approach.

      • Hi,

        Well with the help of a friend we were able to make it work.

        .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before
        {
        color:green;
        font-size: 15px;
        line-height: normal;
        text-align: center;
        font-family: ‘SAP-icons’;
        content: “\e1c1”;
        speak: none;

        }

        .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv
        {
        display: none;

        }

        the only thing missing is to fix the width of the columns

        .

        sapzencrosstab.PNG

        If someone got any clew how to fix this, I will be grateful

        Thanks and best regards

        • That looks awesome 🙂   I think resizing the header cells will prove to be tricky but don’t let me discourage you!  (The reason being I think the width measurements are done in JS and then applied inline to the TD cells themselves, but I might be off-base here)

          I’d love to see you get it working!

          • Well got it working

            Change the Display:none with visibility:hidden; because it broke the format of the columns

            .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before
            {
            color:green;
            font-size: 15px;
            line-height: normal;
            text-align: center;
            font-family: ‘SAP-icons’;
            content: “\e1c1”;
            speak: none;

            }

            .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv
            {
            visibility:hidden;
            text-align: center;
            height:0px;
            }

            .sapzencrosstab-DataCellAlert1Background.sapzencrosstab-DataCellDefault {

            text-align: center;

            }

            But to a friend of mine it worked with the display none like this, don’t know why it didn’t with me. Maybe because I was using the Blue Crystal template

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background

            {

            width: 65px;

            }

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before

            {

            font-size: 14px;

            font-family: ‘SAP-icons’;            

            content: “\e1c1”;      

            speak: none;

            color: yellow;

            }

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv

            {

            display: none;

            }

            Michael, I am having troubles hiding the folder where I put all the images and css. If I hide it with Access to the subobjects. The dashboard doesn’t show the images and the icons., everything else Works even links to reports in that folder. 

            When I grant Access to the folder the images and icons work.

            User security for the Hide folder

            Security.PNG

            This is how I want it to look, but the images and icons dont work

            Folders.PNG

            Changing the security to allow access to the object and not only the Subobjects, everything works but I want it to be hidden

            Hide_Folder.PNG

            How you guys do it, leave a folder with access to everybody on the bottom?

            Cheers Matt

  • Hi Michael, great post. Thank you.

    By the way, you can easily create your own icons using css.

    For instance, we want to use the world icon from Earth – Free Shapes icons instead of SAP’s icon.

    Just add following css to your element (or create a correspong class):

    max-width:            16px;

    max-height:           16px;

    background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABAklEQVR4AYXRoUskAQBG8d8MWEwLY1BYw4qT1rRBBKsmNZptK1gmeDBcuYObgSsHB8vVKxeOy7rDgoYNhsU/4Noa1jKuGDYJLsq4aap88b3wwQMglimUSoVMDAAEEqWvdkXWffPPs0Sgxn1zTcAvlVeVSl8AJCq/wZLIZ1W9hFDs3KFTNN149AUA38WBTOQMbItMDOW6tgB5qOMvSI38tKltRRtAJ1C61LXhDjDTAMBDiDGWATRw4cix1AwKOyD1VL+fuwWfFGR+ANirlX2Qy4hNrAL4b4ENQGQshsS1EPDHQnCC0EBCiJ4XQy0wAldaht70UMeayh1Yk7qXm9axPsr9DgweWHFP23znAAAAAElFTkSuQmCCcdf96efa4c63b6b285a45a466e0d497e’);

    This principle allows you to add a ton of different icons.

    Best regards

    Denis

  • Hi,

    i built a design studio application using the CSS with the SAP Fonts. When i open the application from the BI Launch Pad with an Administrator account i can see the icons. If i try it with a user account i cannot see them.

    Which kind of acces rights  should a user have to the folder where the CSS an the fonts files are stored ?

    Regards,

    Tobias

  • Lumira Designer 2.2

    I needed change SAP icon dynamically with script and CSS. Only URI is provided in SAP icon component properties no Unicode.

    The Icon Explorer link above is not active. Found another Fiori Icon Explorer link to lookup unicode
    New Icon Explorer

    .arrow_ico {
    	background-color:transparent;
    	color: #808080;
    	width:auto!important;
    	display:inline-block!important;
    }
    
    /* Down Arrow */
    .dn {
    transform: rotate(180deg);
    }
    
    /* No Change */
    .nc:before {
    	font-family: SAP-icons;
    	content: "\e069";
    }
    

    THANKS Mike for the Inspiration from your post.