SAPUI5 中的 FontAwesome 图标使用问题？答案

【问题标题】：FontAwesome icon usage issue in SAPUI5?SAPUI5 中的 FontAwesome 图标使用问题？
【发布时间】：2019-07-05 21:08:48
【问题描述】：

我想在我的 UI5 项目中使用 FontAwesome 图标。但无论我做什么，我都不能使用这些图标。我不知道我在哪里做错了。我收到此错误 “集合 'fontawesome-regular' 的字体配置未注册” 这是我的代码；我正在使用一个包含字体图标数据的 json 文件。

oModel.loadData("/resources/datasets/fontawesome.json");
        oModel.attachRequestCompleted(function () {
            var fontAwesomeIcons = oModel.getProperty("/FontAwesomeIcons");
            fontAwesomeIcons.map(function (item, index) {
                sap.ui.core.IconPool.addIcon(item.id, "fontawesome-regular", {
                    fontFamily: "fa-regular",
                    text: item.name,
                    content: item.unicode
                });
            })
        });

此外，我还有一个包含 @font-face 定义的 css 文件。这是图片链接font-face image 请看一下显示字体的图片我应该怎么做才能解决这个问题？

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/43062459/…
谢谢@Jorg。我试过那个方法。但我仍然收到“fontawesome-regular”未注册”错误。我需要使用 registerFont 方法吗？
我从来没有尝试过，但是如果我的错误是“请注册字体”并且我找到了一个说“注册字体”的方法，我会倾向于试一试：P
我一直在研究一种关于registerFont的方法..但是没有那么多东西..非常有限:)我希望我能找到有用的东西
我正在使用循环函数.. 这是代码 if (response.length > 0) { response.map(function (icon) { if (icon.unicode) { sap.ui. core.IconPool.addIcon(icon.name, "normal", "normal", icon.unicode); } }) } . IconPool.addIcon 方法抛出了一个叫做未注册的错误。但是如果我逐行添加图标，它就可以正常工作。不会在循环函数中使用 addIcon 方法吗？

标签： sapui5

【解决方案1】：

首先，您应该将 eot、svg、ttf、woff 和 woff2 文件导入您的项目。在我的测试项目中，我为这个字体创建了一个特殊的文件夹，它看起来像这样：

我还创建了一个包含此内容的 font.css 文件（取自 Font Awesome regular.css 文件）：

@font-face {
    font-family: 'fa-regular';
    font-style: normal;
    font-weight: 400;
    src: url("fa-regular-400.eot");
    src: url("fa-regular-400.eot?#iefix") format("embedded-opentype"), 
        url("fa-regular-400.woff2") format("woff2"), 
        url("fa-regular-400.woff") format("woff"), 
        url("fa-regular-400.ttf") format("truetype"), 
        url("fa-regular-400.svg#fontawesome") format("svg");
}

请注意，url 没有任何前缀，因为它们引用同一文件夹中的文件。然后我添加了 fa-regular.json 文件，其中包含字体中所有已注册的图标。 json文件名必须与css文件中输入的字体名称相同。我的文件只有一个图标：

{
    "smile-wink": "f4da"
}

我从 svg 文件中获取了图标代码：

然后我在 manifest.json 文件中注册了 css 文件：

然后我在我的 Component.js 代码中添加了字体注册代码：

    sap.ui.core.IconPool.registerFont({
        collectionName: "font-awesome-icons",
        fontFamily: "fa-regular",
        fontURI: "font-awesome",
        lazy: false
    });

这里 collectionName 可以是您选择的任意名称，您可以使用它来引用 XML 视图中的图标。 fontFamily 必须与 css 文件中声明的相同。 fontUri 必须指向您的字体所在的文件夹。就我而言，它是文件夹 font-awesome。

最后，我在 XML 视图中使用了新图标：

这就是它在浏览器中的样子：

【讨论】：