angular - 如何在 Angular 4 cli 项目中导入 ionicons (sass)

Question

如何在运行 ng serve (npm start) 的 Angular 4 cli 项目中添加 ionicons (Sass)？

我遵循了这些步骤:

1. 导入 ionicons 库

   @import "~ionicons/dist/scss/ionicons";

2. 在 variables.scss 中:

   $ionicons-font-path: "~ionicons/dist/fonts";

控制台没有报错，但是字体没有加载，图标也没有出现。

使用

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

工作正常。

Answer 1

我能够通过将 package.json 中的 ionicons 版本更改为 2.0.1 版来解决此问题。它在最新版本的 Ionicons 中不起作用。

所以，在 package.json 中

"ionicons": "2.0.1"

这就是我在主 SCSS 文件中导入的方式。

$ionicons-font-path: "../../../node_modules/ionicons/fonts";

@import "~ionicons/scss/ionicons";

这是 HTML 代码。

<i class="ion-location"></i>