FontAwesome проблема использования значков в SAPUI5? - PullRequest
Новая
       79

FontAwesome проблема использования значков в SAPUI5?

1 голос
/ 04 июля 2019

Я хотел бы использовать значки FontAwesome в своем проекте UI5.Но я не могу использовать иконки, что бы я ни делал.Я не знаю, где я делаю ошибку.Я получаю эту ошибку "Конфигурация шрифта для коллекции 'fontawesome-регулярно' не зарегистрирована" Вот мои коды;Я использую файл 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 Пожалуйста, посмотрите на изображение, которое показывает font-face Что я должен сделать, чтобы решить эту проблему?

1 Ответ

3 голосов
/ 05 июля 2019

Во-первых, вы должны импортировать файлы eot, svg, ttf, woff и woff2 в ваш проект. В моем тестовом проекте я создал специальную папку для этого шрифта, и она выглядит так:

font folder structure

Также я создал файл font.css с этим содержимым (взят из файла Font Awesome normal.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-регулярно.json файл со всеми зарегистрированными иконками из шрифта. json имя файла должно совпадать с именем шрифта, введенным в файл css. Мой файл имеет одну иконку: 

{
    "smile-wink": "f4da"
}

Я взял код значка из svg файла: SVG file

Затем я зарегистрировал файл css в моем файле manifest.json : enter image description here

Затем я добавил код регистрации шрифта в свой код 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 ont-awesome .

Наконец, я использовал новую иконку в своем представлении XML: XML view

А вот как это выглядит в браузере:

enter image description here

...