Skip to Content
Author's profile photo Michael Howles

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!

Assigned Tags

      48 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tammy Powlas
      Tammy Powlas

      Nice.

      So it's Fiori-like, but not really Fiori?  I will have to try this too.  Thanks

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      I want to use the font which will give me the " f " symbol so how can i use the html code is &#402.............?

      Author's profile photo Anil Bavaraju
      Anil Bavaraju

      Michael, Thanks for sharing this info, i developed an application which looks like a Fiori app, it looks amazingly professional.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Harald Anton Mueller
      Harald Anton Mueller

      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?

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Did you copy the CSS and font files over to the platform when you published the app?

      Author's profile photo Harald Anton Mueller
      Harald Anton Mueller

      Hi Michael,

      yes, i uploaded all onto the platform and when viewing the application via the Launchpad (using IE10/Chrome), it works as expected.

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Interesting.  I've not tried it myself yet from the BI Mobile app, but if it's falling back to Emoji, I'm wondering if BI Mobile isn't serving up the font files correctly.  Can you temporarily host the .ttf and .eot font files on a different web server and update the CSS to reflect the new URL and see if it then works?  I'm just trying to rule things out.

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Harald,

      Let's try without referencing linked fonts - Can you try this CSS alone and see if any of the sample Icon Classes I have in it work?

      https://gist.githubusercontent.com/anonymous/99231349f0562fab5414/raw/f68d440cc08b2d83f4da670eed85793b1b96f6db/icons.css

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Harald,

      Check my new post here:

      Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work

      Specifically, the MIME content types.  Can you let me know if that solves your issue?

      Author's profile photo Harald Anton Mueller
      Harald Anton Mueller

      Hi Michael,

      thanks for the post. I will check this next week and let you know. Sounds promising.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author
      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Make sure that you have uploaded the fonts.  This takes a few more steps once you are ready to publish to the BI Platform.

      I cover this in detail in this blog post.

      Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work

      Let me know if you still have questions!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Are you running Google Chrome or IE?  And if IE, which version of IE?

      Author's profile photo Former Member
      Former Member

      I tried running on both browsers but same issues..

      chrome version is up to date

      IE version is 9.0

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo pramod k
      pramod k

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author
      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo pramod k
      pramod k

      Micheal ,

      I was able to refer  CSS class but i wasnt able to get fonts .

      Author's profile photo Harald Anton Mueller
      Harald Anton Mueller

      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.

      Author's profile photo Former Member
      Former Member

      Thanks for the response Harald. How do you remove the "Cascading Style Sheet" filter on the dialog to upload the 2 font files. Have tried several things and cant seem to remove it.

      Update: Figured out out how to upload both files from editor, just insert the names of the two font files one at a time and click open, it wont tell it did anything but when you check the folder in the BIP the files will be there.

      Thanks for all your help.

      Author's profile photo pramod k
      pramod k

      MIcheal ,

      I was able to upload both files to BIP but the images in application arent working . Did it work for you ?

      BIP.PNG

      Author's profile photo Former Member
      Former Member

      Yes, was able to see after uploaded both files, try reloading the app in the design tool. Should work after that.

      Author's profile photo Faisal Mehmood
      Faisal Mehmood

      How did you upload files on BIP...

      Well it seems you jsut name the file in CSS upload dialog box, thought it is not visible but it still loads. Is there any other way?

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author
      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo pramod k
      pramod k

      You need to add CSS file name in custom CSS property in applicaton .

      I beleive its <filename>.css

      It should work locally . Just make sur you put css file in same folder of your application

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author
      Author's profile photo Faisal Mehmood
      Faisal Mehmood

      This helped me. Very Useful.

      Author's profile photo Former Member
      Former Member

      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!

      Author's profile photo Former Member
      Former Member

      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
      .

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      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!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Denis Reis
      Denis Reis

      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

      Author's profile photo Denis Reis
      Denis Reis

      P.S. I havent tried it with svg, but it should work the same way.

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      This blog was specifically about SAP's approach which was using a font file approach.  There's nothing wrong using an actual image (base-64 or not.)  I used that approach (or even the sprite sheet approach) a lot.  The nice thing about using a font is that it's scalable with CSS and can be colored with CSS also.  Of course the trade-off is that it's only one color.

      Pros and Cons of both!

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Denis,

      If I understand correctly, it seems that under your suggested approach we are really just embedding a PNG image of the icon as described in the post How to embed images inside of a Design Studio App without uploading to server, which means it is not scalable.  So why not just use the technique described in the Design Studio 1.2/1.3 - New Icons with minimal CSS and no uploading font files! post to embed additional icon fonts?

      Regards,

      Mustafa.

      Author's profile photo Tobias Maier
      Tobias Maier

      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

      Author's profile photo Gabriel Braun
      Gabriel Braun

      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.