Question

我使用npm install --save ionicons安装了ionicons，以便我的package.json更新为：

"dependencies": {
    "ionicons": "^3.0.0"
}

接下来，我在/resources/assets/sass/app.scss中添加了以下内容：

// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";

成功运行npm run dev后，我最终得到了

/public
    /css
        app.css
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2

如果浏览器控制台没有错误，则不会显示单个 ionicon（例如<i class="icon ion-home"></i>）。我检查了public/css/app.css，发现它引用了离线字体，如：/fonts/vendor/ionicons/dist/ionicons，这似乎符合上面的文件夹结构。

我尝试调整@import，在url(...)更改app.css参考，移动字体目录 - 没有运气。最后，我尝试通过CDN引用离子，它就像魅力一样。

我在这里做错了什么？感谢

Answer 1

事实证明，我使用的文档是错误的离子版本：

v2.0.0 ionicons.com
v3.0.0 ionicframework.com/docs/ionicons

如果你像我一样用NPM安装离子导体，你将获得最新版本;如果你从github repository克隆它们，你将获得v2.0.0。事实证明，在v3.0.0中，许多图标类被删除/更改，因此我看不到<i class="icon ion-home"></i>，这是多么浪费时间！

Answer 2

面向其他面临此问题的人。这就是为我解决的问题：slight_smile：

npm uninstall ionicons

npm install ionicons

Answer 3

现在，Ionicons已更新至v4.x。（答案写于2019-06-24）

尝试这样：

在安装后导入scss之前，请设置$ionicons-font-path的值：

$ionicons-font-path: "~ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons.scss';

使用图标标签时，请写入ion-icon标签：
```
<ion-icon name="add"></ion-icon>
```

安装npm后Ionicons没有显示

3 个答案: