安装 npm 后 Ionicons 不显示

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

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

我尝试调整 @import，更改 app.css 中的 url(...) 引用，移动字体目录 - 没有成功。最后，我尝试通过 CDN 引用 ionicons，它非常有效。

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

Answer 1

事实证明我使用的 ionicons 版本错误：

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

如果您使用 NPM as I did, you'll get the latest version; if you clone them from their github repository 安装 ionicons，您将获得 v2.0.0。原来在v3.0.0中，很多图标类都是removed/changed，所以我看不到<i class="icon ion-home"></i>，真是浪费时间！

Answer 2

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

这样试试：

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

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

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

Answer 3

对于面临此问题的任何其他人。这就是为我修复它的原因：slight_smile:

npm uninstall ionicons

npm install ionicons

Answer 4

将这两行粘贴到您的标签之前：

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

从您的依赖项中卸载 icon 图标： npm 卸载 ionicons

安装 npm 后 Ionicons 不显示

Ionicons not showing after npm installation

laravel

ionicons

laravel-5.4

laravel-mix