Тема Angular Nebular с использованием пакета значков FontAwesome

Стек: Angular 9.1.7, Nebular 5.0.0, FontAwesome 5.13

Я хочу изменить набор значков по умолчанию (EvaIcons), используемый Nebular, на FontAwesome, используя это руководство:

https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

К сожалению, значки не отображаются. Я близок, потому что Nebular EvaIcons больше не отображаются. В DeveloperTools я вижу nb-icon с помощью fa-user, но ничего не отображается.


angular ngx-admin font-awesome nebular
person n002213f    schedule 23.05.2020    source источник
comment
вы импортировали файлы шрифтов css в angular.json?   -  person Aakash Garg    schedule 23.05.2020
comment
Не могли бы вы поделиться ссылкой на конфигурацию, в официальных документах я не видел шаг импорта CSS.   -  person n002213f    schedule 23.05.2020

Ответы (2)


arrow_upward
7
arrow_downward

Вы не предоставили то, что вы установили или настроили.

Но вот мой ответ в любом случае ... Мне удалось загрузить FontAwesome в свое приложение Nebular. Тем не менее, не заменяя EvaIcons, а добавляя их дополнительно к Eva.

  1. установить FontAwesome.
  2. Включите его в свой angular.json
  3. Зарегистрируйте пакет значков в app.component
  4. Используйте FontAwesome в компоненте Nebulars nb-icon

В коде:

1. npm install --save @fortawesome/fontawesome-free

2. "styles": [..., "node_modules/@fortawesome/fontawesome-free/css/all.css", ...],
   "scripts": [..., "node_modules/@fortawesome/fontawesome-free/js/all.js", ...]

3. import { NbIconLibraries } from '@nebular/theme';
   @Component({
     selector: 'ngx-app',
     template: '<router-outlet></router-outlet>',
   })
   export class AppComponent implements OnInit {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerFontPack('fas', { packClass: 'fas', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('fab', { packClass: 'fab', iconClassPrefix: 'fa' });
       this.iconLibraries.setDefaultPack('far');
   ...

4. <nb-icon icon="arrow-right" pack="fas"></nb-icon>

(Maybe there is a better way of doing this, maybe loading the js isn't required idk...)

Таким образом, вы можете использовать либо Eva, либо FontAwesome Icons, либо из любого зарегистрированного пакета.

Eva:         <nb-icon icon="SOME_ICON">                           </nb-icon>
FontAwesome: <nb-icon icon="SOME_ICON" pack="fas/far/fab/fal/fad"></nb-icon>
person Albin Pettersson    schedule 26.10.2020
comment
Это должен быть правильный ответ - с этой реализацией значки font awesome будут загружаться правильно. - person Aaron Lavers; 04.12.2020

arrow_upward
0
arrow_downward

Используйте метод ниже,

  1. Установить font-awesome
npm install --save @fortawesome/fontawesome-free
  1. Добавить стили в файл angular.json
"styles": [
     "node_modules/@fortawesome/fontawesome-free/css/all.css",
 ],
  1. импорт в модулях
import { NbIconModule } from '@nebular/theme';

imports: [
    NbIconModule,
],
  1. В component.ts
 constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fab', iconClassPrefix: 'fa' });
  }
  1. В Component.html
<nb-icon icon="instagram" pack="font-awesome"></nb-icon>

Я надеюсь это сработает

person Udhayakumar    schedule 03.12.2020