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

Question

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

font-awesomesapui5glyphicons

4

由于SAPUI5 / OpenUI5中的图标集相当有限，因此我想在sap.ui.core.Icon中显示glyphicons和/或font-awesome图标。

如何实现这一点？

- AntonSack

2个回答

3

免责声明: 无耻的自我宣传。

针对 Font Awesome（仅限免费版本），我制作了一个插件，专门用于这个目的：ui5-fontawesome。

在内部，该插件为您调用 IconPool.registerFont() ，或者如果您使用的是旧版本的 UI5，IconPool.registerFont() 不可用，则调用 IconPool.addIcon() 。

现在，您只需将插件包含在 html 中，直接调用它们的图标名称即可开始使用这些图标（例如： <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>

- zypA13510

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephen S · Accepted Answer

为了在现有控件中使用外部图标，您可以使用sap.ui.core.IconPool控件。该控件提供了一个addIcon方法来添加图标。

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>

您还可以参考此处的文档：https://help.sap.com/saphelp_uiaddon10/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm