可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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

回答2:

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>