我正在尝试使用Angular 7和Nebular创建一个Webapp。
因此我使用原理图来安装Nebular:ng add @nebular/theme
所以我在node_modules中有nebular-icons,并作为依赖包含在我的package.json中:
"dependencies": {
...
"nebular-icons": "^1.1.0",
...
},
我还尝试在angular.json中为样式添加nebular-icons:
"styles": [
"src/styles.scss",
"node_modules/nebular-icons/scss/nebular-icons.scss"
],
现在,如果我尝试使用图标,它仍然不会显示。例如:
<nb-layout-header subheader>
<nb-actions>
<nb-action icon="nb-home"></nb-action>
<nb-action icon="nb-search"></nb-action>
<nb-action icon="nb-edit"></nb-action>
</nb-actions>
</nb-layout-header>
不幸的是,图标没有显示出来。我只能看到分隔nb-actions图标的行(“|”),而不是图标本身。
谢谢你的帮助!
我试图复制这个问题并遇到和你一样的问题。
进一步搜索显示我必须install some more dependencies,所以安装后,我得到以下错误:(查看下面的截图)
该错误只是表明我们无法访问包含实际字体的ttf,woff,svg文件,所以在我的
所以,在我的styles.css文件中,我只是将CDN路径插入到这些文件中......
@font-face{
font-family:nebular;
src:url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/nebular.eot?4ozerq");src:url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/nebular.eot?4ozerq#iefix")format("embedded-opentype"),url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/nebular.ttf?4ozerq") format("truetype"),url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/nebular.woff?4ozerq") format("woff"),url("https://cdn.jsdelivr.net/npm/[email protected]/fonts/nebular.svg?4ozerq#nebular") format("svg");
font-weight:normal;
font-style:normal;
}
你可以查看complete demo here