Add new icons to OpenUI5?
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 ;)
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