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>