как использовать @ fortawesome / fontawesome для angular стандартным способом SCSS (значки на основе шрифтов)

Недавно я установил npm пакеты версии 0.8 для проекта Angular 11, используя бесплатные значки svg, обычные значки svg и твердые значки svg, предоставляемые установщиком, он не отображал параметр значков на основе шрифтов для установки. Однако, помимо использования этих значков в качестве модуля, я хотел бы иметь их также стандартным способом, например: <span class="fas fa-chevron-left"></span> для использования в таких компонентах Telerik, как:

export const items = {
    parents: [
        {
            text: 'Seguridad',
            icon: 'fa fa-shield',
            expanded: false,
            children: true,
            selected: false
        },

Единственный файл css, установленный с fortawesome, - это styles.css в папке fontawesome-svg-core, в которой нет значков.

В качестве обходного пути я также установил fontawesome следующим образом:

npm install font-awesome –save

затем я добавил ссылки scss в файл styles.scss, но это дублирует библиотеку.

Как я могу этого добиться с помощью Fortawesome?

Благодарность


angular angular11 font-awesome angular-fontawesome
person Aldemar Cuartas Carvajal    schedule 18.06.2021    source источник
comment
Обратите внимание, что font-awesome - это v4, вы, вероятно, захотите использовать вместо этого @fortawesome/fontawesome-free. Но да, @fortawesome/angular-fontawesome поддерживает только значки SVG. Поэтому, если Kendo требует, чтобы вы использовали значки шрифтов, вам, вероятно, придется иметь оба варианта FA с последствиями для размера пакета или использовать только @ fortawesome / fontawesome-free ... Другой подход, который может работать (если библиотека поддерживает его ) заключается в преобразовании значка SVG в строку, как показано здесь, или по возможности встроить значок в разметку в шаблоне компонента.   -  person Yaroslav Admin    schedule 18.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал модульный метод установки / настройки font awesome, но не пробовал использовать метод CSS. Я использовал метод CSS для тем начальной загрузки, поэтому одним из предложений было бы добавить стили в styles.scss следующим образом:

@import "/path-to-fontawesome/css/fontawesome.css";

Затем убедитесь, что ваш стиль находится в Angular.json:

"styles": [
    "src/styles.scss"
],

Если стили мешают установке модуля font awesome, удалите пакет font awesome и попробуйте этот метод и посмотрите, отображаются ли значки.

person Andrew Halil    schedule 18.06.2021