如何在sap.ui.core.Icon中显示glyphicon/font-awesome? [英] How to display glyphicon/font-awesome in sap.ui.core.Icon?

问题描述

由于SAPUI5/OpenUI5中图标的集合非常有限，我想在sap.ui.core.Icon中显示字形图标和/或超棒的字体图标.

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.

如何实现?

推荐答案

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

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.

1. 列表项

1. List item

在CSS中声明font-face标记

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

如果使用的是font-awesome，则可以在清单中包含font-awesome样式表.样式表将包含在字体声明中，如下所示:

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

致电 sap.ui.core.IconPool.addIcon 添加您的图标.你可以声明 这在您的Component.js中

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

You can also refer to the documentation here : https://help.sap.com/saphelp_uiaddon10/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm

这篇关于如何在sap.ui.core.Icon中显示glyphicon/font-awesome?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！