如何在有角项目中添加星状图标？

Question

我正在尝试使用Angular 7和Nebular创建一个Webapp。

因此，我使用原理图来安装Nebular： ng add @nebular/theme nebular ng add @nebular/theme

所以我在node_modules中确实有星云图标，并作为依赖项包含在package.json中：

"dependencies": {
    ...
    "nebular-icons": "^1.1.0",
    ...
  },

我还尝试将nebular-icons添加到angular.json的样式中：

"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图标的行（“ |”），而看不到图标本身。

谢谢你的帮助！

Answer 1

我试图复制该问题，并遇到与您相同的问题。

进一步的搜索显示我必须安装更多的依赖项 ，因此在安装这些依赖项后，出现以下错误：（请查看下面的屏幕截图）

该错误只是说明我们无法访问包含实际字体的ttf，woff，svg文件，因此在我的

因此，在我的styles.css文件中，我只是将CDN路径插入了这些文件...

@font-face{
font-family:nebular;
src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq");src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq#iefix")format("embedded-opentype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.ttf?4ozerq") format("truetype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.woff?4ozerq") format("woff"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.svg?4ozerq#nebular") format("svg");
font-weight:normal;
font-style:normal;
}

您可以在此处查看完整的演示