1

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

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

所以我的 node_modules 中确实有 nebular-icons 并作为依赖项包含在我的 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 图标的行（“|”），但看不到图标本身。

谢谢你的帮助！

4

1 回答 1

-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;
}

你可以在这里查看完整的演示

于 2019-03-26T12:31:09.413 回答