SAPUI5中的FontAwesome图标使用问题？

Question

我想在我的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
                });
            })
        });

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

Answer 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 必须指向字体所在的文件夹。就我而言，它是文件夹f 很棒。

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

这是它在浏览器中的外观：