angular - Angular Nebular 主题使用 FontAwesome 图标包
问题描述
堆栈:Angular 9.1.7、Nebular 5.0.0、FontAwesome 5.13
我想使用以下指南将 Nebular 使用的默认图标集 (EvaIcons) 更改为 FontAwesome:
https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack
不幸的是,图标没有显示出来。我很接近,因为星云 EvaIcon 不再显示。从 DeveloperTools 中,我可以看到nb-icon
using fa-user
,但没有显示任何内容。
解决方案
您没有提供已安装或配置的内容。
但无论如何,我的答案来了……我已经将 FontAwesome 加载到我的 Nebular 应用程序中。也就是说,不是替换 EvaIcons,而是将它们另外添加到 Eva。
- 安装 FontAwesome。
- 将其包含在您的 angular.json 中
- 在 app.component 中注册图标包
- 在 Nebulas nb-icon 组件中使用 FontAwesome
在代码中:
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 图标,或任何注册包。
Eva: <nb-icon icon="SOME_ICON"> </nb-icon>
FontAwesome: <nb-icon icon="SOME_ICON" pack="fas/far/fab/fal/fad"></nb-icon>
推荐阅读
- r - 按 bin 的密度图的颜色段
- ruby-on-rails - 从 Rails 集合<< 关联分配中查找错误
- c++ - 如何找到 char 数组的大小?
- python - 为什么我会收到此错误 - json.decode.JSONDecodeError:expecting value: line 1 clumn 1 (char 0)?
- plot - DrRacket 情节“无法确定合理的情节界限”
- google-bigquery - 从 2 条重复记录中选择 1 条记录
- c# - 如何通过选定的选项卡控件项更改菜单项标题
- leaflet - 如何在传单中更改 L.imageOverlay 的投影
- android - 从后台任务中删除 Android API v29 中的照片
- html - 以灵活的方式更改 flexbox 子宽度