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

Question

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

我按照以下步骤操作：

1. 导入离子库

   @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>