如何在角项目中添加星云图标?

问题描述 投票:1回答:1

我正在尝试使用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图标的行(“|”),而不是图标本身。

谢谢你的帮助!

angular icons nebular ngx-admin
1个回答
0
投票

我试图复制这个问题并遇到和你一样的问题。

进一步搜索显示我必须install some more dependencies,所以安装后,我得到以下错误:(查看下面的截图)

enter image description here

该错误只是表明我们无法访问包含实际字体的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

© www.soinside.com 2019 - 2024. All rights reserved.