如何在sap.ui.core.Icon中显示glyphicon/font-awesome？

Question

由于SAPUI5/OpenUI5中的图标集非常有限,我想在sap.ui.core.Icon中显示glyphicons和/或font-awesome图标.

怎么能实现这一目标？

Answer 1

要在现有控件中使用外部图标,可以使用sap.ui.core.IconPool控件.该控件提供了一个addIcon方法,用于添加Icon.

1. 项目清单

   在CSS中声明font-face标记

   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;
   };
   

   如果你使用font-awesome,你可以在你的清单中加入font-awesome styleshet.样式表将包含在font-face声明中,其中包括:

   @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;
   }
   

2. 调用sap.ui.core.IconPool.addIcon为你添加Icon.你可以在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" 
       });
     }
    }); 
   });
   

3. 您现在可以在控件中使用此图标

   <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>
   

您也可以参考以下文档:https://help.sap.com/saphelp_uiaddon10/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm