gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 04:55:16 24 4
gpt4 key购买 nike

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

如何实现这一目标?

最佳答案

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

  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,您可以在 list 中包含 font-awesome 样式表。样式表将包含在字体声明中,有点像这样:

    @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添加您图标。你可以声明这在你的 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

关于font-awesome - 如何在 sap.ui.core.Icon 中显示 glyphicon/font-awesome?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43062459/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com