При обновлении до Nebular 4 перестали отображаться значки с потрясающим шрифтом. Пакет настроек тоже не работает

После обновления Angular версии 8, Nebular был обновлен до версии 4. После обновления я не могу видеть иконки моего шрифта awesome, которые отображались ранее.

Я пробовал просмотреть этот документ nebular, который просит нас зарегистрировать font awesome в качестве пакета по умолчанию. Но даже это не сработает. https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack.

Не удалось найти достаточного обсуждения этого вопроса. Font awesome уже включен, и я добавил его в свой файл angular.json

constructor(private iconService: NbIconLibraries) {
    this.iconService.registerFontPack('font-aweome');
    this.iconService.setDefaultPack('font-aweome');
}

Nebular должен принимать иконки с отличным шрифтом.


angular8 nebular font-awesome-5
person Rohit Dubey    schedule 25.07.2019    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Чтобы отображать потрясающий шрифт, вам необходимо зарегистрировать пакеты значков и обновить версию Nebular до 4.6.0. Чтобы зарегистрировать набор иконок, вам нужно сделать это в app.component.ts.

constructor(private iconLibraries: NbIconLibraries){ this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fa' }); }

затем в меню Items вы можете использовать это так

{ title: 'wallet', icon: { icon: 'fa-eur', pack: 'font-awesome' }, link: '/home/dashboard', }

Надеюсь, это поможет.

person Agha Ali Abbas    schedule 04.05.2020

arrow_upward
3
arrow_downward

Создайте файл .npmrc и добавьте:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<TOKEN>

С [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro]

Установить пакет npm

Бесплатно

npm i -D @fortawesome/fontawesome-free

Для PRO

npm i -D @fortawesome/fontawesome-pro

Теперь, например, в ngx-admin необходимо зарегистрировать FontPacks и установить один из них по умолчанию в app.component.ts.

(ПРИМЕЧАНИЕ ИЗМЕНИТЬ: изначально я указывал, что нужно добавить ниже в файл pages.component.ts, это неправильное место, как если бы в компоненте заголовка есть меню, которое находится за пределами компонента страниц, даже если в меню нет ' не используйте значки FA, веб-приложение будет зависать в браузере, когда вы щелкаете по этому меню, поэтому обязательно добавьте в app.component.ts, чтобы убедиться, что все меню теперь об этом.)

import '@fortawesome/fontawesome-pro/css/all.css';
import '@fortawesome/fontawesome-pro/js/all.js';

...

  constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerFontPack('solid', {packClass: 'fas', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('regular', {packClass: 'far', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('light', {packClass: 'fal', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('duotone', {packClass: 'fad', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('brands', {packClass: 'fab', iconClassPrefix: 'fa'});

    this.iconLibraries.setDefaultPack('duotone');
  }

С [https://github.com/akveo/nebular/issues/1677]

И на этом этапе, скажем, в pages.menu.ts для настройки nb-menu можно просто добавить имена значков FA к атрибутам значков, например:

export const MENU_ITEMS: NbMenuItem[] = [
    {
        title: 'Some Title',
        icon: 'location',
        link: '/your/link'
    }
];

что приводит к отображению 'fad fa-location', потому что дуотон является набором пакета шрифтов.

person karlmnz    schedule 07.10.2019

arrow_upward
1
arrow_downward

Проблема открыта здесь: https://github.com/akveo/ngx-admin/issues/1524

У кого-нибудь есть другая идея, как включить значки Font Awesome PRO ?!

person user2282197    schedule 30.07.2019
comment
Я все еще сталкиваюсь с проблемой. Даже после регистрации пакет не принимается. В консоли я получаю сообщение об ошибке, так как fa fa-home не является частью пакета значков eva. Это означает, что моя регистрация пакета по умолчанию не работает. - person Rohit Dubey; 05.08.2019
comment
Вы нашли решение этой проблемы? - person Sunny; 29.10.2019

arrow_upward
0
arrow_downward

Я думаю, у вас просто орфографическая ошибка - измените формулировки на это:

this.iconService.registerFontPack('font-awesome');
this.iconService.setDefaultPack('font-awesome');
person Tim    schedule 24.04.2020