Menu
As the collection of icons is pretty limited in SAPUI5/OpenUI5 I would like to display glyphicons and / or font-awesome icons in a sap.ui.core.Icon.
How can this be achieved?
985
Inorder to use an external icon within an existing control, you could use the sap.ui.core.IconPool control. The control provides a addIcon method for adding an Icon.
List item
Declare the font-face tag in your CSS
font-face {
font-family: 'My-Icons';
src: url('_PATH_TO_EOT_FILE_');
src: url('_PATH_TO_EOT_FILE_?#iefix') format('embedded-opentype'), /*?#iefix is required to be added to the end of the path of eot file here*/
url('_PATH_TO_TTF_FILE_') format('truetype');
font-weight: normal;
font-style: normal;
};
Incase if you are using font-awesome, you could include the font-awesome styleshet in you manifest. The stylesheet will be included in the font-face declarations among other things, somewhat like this:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Call sap.ui.core.IconPool.addIcon to add you Icon. You could declare this in you Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/IconPool"],
function(UIComponent, IconPool){
"use strict";
return UIComponent.extend("com.sap.app.Component",{
metadata : {
manifest: "json"
},
init : function(){
//call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
//Init Router
this.getRouter().initialize();
IconPool.addIcon("battery", "fa", {
fontFamily : "FontAwesome",
content : "f241"
});
}
});
});
You can now use this Icon in you control
<mvc:View controllerName="com.sap.app.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<core:Icon src="sap-icon://fa/battery" color="#031E48" ></core:Icon>
<Button icon="sap-icon://fa/battery" press="onPress"></Button>
</mvc:View>
You can also refer to the documentation here : https://help.sap.com/saphelp_uiaddon10/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm
142
Disclaimer: shameless self-promotion.
For Font Awesome (and free version only), I've made a plugin just for this purpose: ui5-fontawesome.
Internally, the plugin calls IconPool.registerFont() for you, or IconPool.addIcon() if on an older UI5 version where IconPool.registerFont() is not available.
Now all you have to do is to include the plugin in your html, and you can start using the icons by calling their icon names directly (e.g. <core:Icon src="sap-icon://fa-brands/font-awesome"/>)
sap.ui.getCore().attachInit(function() {
sap.ui.define([
'sap/ui/core/mvc/Controller', 'sap/ui/core/mvc/XMLView'
], function(Controller, XMLView) {
XMLView.create({
controller: new(Controller.extend('ui5.demo.controller', {}))('ui5.demo.controller'),
definition: jQuery('#view').html(),
}).then(function(oView) {
oView.placeAt('content');
});
});
});<body class="sapUiBody" id="content">
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatversion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"ui5.demo": "./"
}'>
</script>
<script id="view" type="text/xml">
<mvc:View
controllerName="ui5.demo.controller"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<Shell>
<App>
<Page title="UI5-FontAwesome test">
<core:Icon src="sap-icon://fa-brands/font-awesome" size="2.5rem" color="#339AF0" class="sapUiTinyMargin"/>
</Page>
</App>
</Shell>
</mvc:View>
</script>
<script
src="https://unpkg.com/ui5-fontawesome@^1/js/ui5-fontawesome.min.js"
id="ui5-fontawesome"
data-resourceroot="https://unpkg.com/ui5-fontawesome@^1/">
</script>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
