6

We need to add new icons to OpenUI5. The icons are already defined as a vector-based font.

I know that it's possible to add the icons to the SAP standard font through a service like https://icomoon.io/. However, I want to have to be able to maintain them outside in a separate file (so that we do not need to do redo the task when a new OpenUI5 version comes).

Is it possible to define an additional font to use for icons?

2 Answers 2

11

As you already mentioned it's not a good idea to extend the UI5 font for future compatibility reasons. If you already have your own font you can easily register it with UI5 and reference it using a similar url-schema. Instead of sap-icon://funny-icon you could say sap-icon://dparnas-icon/funny-icon.

Here is a sample implementation:

jQuery.sap.require("sap.ui.core.IconPool");
jQuery.sap.require("sap.ui.thirdparty.URI");

(function() {
  var aIconNames = [ "funny-icon", "another-icon" ], // the icon names
    sCollectionName = "dparnas-icon", // the collection name used in the url-schema
    sFontFamily = "DarnasIcons", // the icon font family like defined in your css
    aIconContents = [ "E003", "E004" ]; // the unicode characters to find aIconNames under, same order

  // add the icons the your icon pool
  for (var i = 0; i < aIconNames.length && i < aIconContents.length; i++) {
    sap.ui.core.IconPool.addIcon(
      aIconNames[i], 
      sCollectionName, 
      sFontFamily, 
      aIconContents[i]
    );
  }
}());

Furthermore you will have to define the font-family in your CSS. That's it! It's easy but hard to find ;)

2
  • Thanks, got it implemented now. The icon path for the new ones are sap-icon://dparnas-icon/funny-icon (I expected dparnas-icon://funny-icon)
    – dparnas
    Apr 1, 2015 at 8:50
  • Well, I got that wrong... Just wrote from my memories without trying again... I've edited my answer accordingly.
    – cschuff
    Apr 2, 2015 at 6:29
2

I tried adding fontawesome icons into my application hope this helps you in generating and using custom icons

 @font-face {  
  font-family: 'fontAwesome';  
  src:url('./css/font-awesome/fonts/fontawesome-webfont.eot?5qvb9g');  
  src:url('./css/font-awesome/fonts/fontawesome-webfont.eot?5qvb9g#iefix') format('embedded-opentype'),  
  url('./css/font-awesome/fonts/fontawesome-webfont.ttf?5qvb9g') format('truetype'),  
  url('./css/font-awesome/font-awesome/fonts/fontawesome-webfont.woff?5qvb9g') format('woff'), 
  url('./css/font-awesome/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');       
  font-weight: normal;  
  font-style: normal;  
}  
[class^="icon-"], [class*=" icon-"] {  
  font-family: 'fontAwesome';  
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}  
.icon-bell:before {  
  content: "\f0f3";  
}

//initialize the icon in Init()
sap.ui.getCore().attachInit(function () {
  //sap.ui.core.IconPool.addIcon(iconName, collectionName, font-family, unicode char code )//icon definition 
  sap.ui.core.IconPool.addIcon('register', 'customfont', 'fontAwesome', 'f0f3'); //adding new icon
})   

//Using the icon
sap-icon://customfont/bell

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.