npm 安装后不显示离子图标答案

【问题标题】：Ionicons not showing after npm installationnpm 安装后不显示离子图标
【发布时间】：2023-04-03 15:41:01
【问题描述】：

我使用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，效果非常好。

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

【问题讨论】：

尝试清除缓存并打开浏览器控制台查看是否有任何错误。
@Sandeesh 这不是缓存问题；就像我说的，它适用于 CDN，并且控制台中没有错误，可能 b/c css 路径混乱或某些文件丢失。但是没有 404
我的意思是 app.css 可能在本地缓存。使用 cdn 将充当不同的资源。如果您使用的是 chrome，您可以尝试使用 ctrl + f5 强制刷新缓存。此外，检查样式将为您提供 css 内字体的相对链接。您可以通过单击样式选项卡中的字体链接来验证它们是否指向正确。
为了测试，将其添加到您的 css 文件 :not(i) { font: 'Arial'} 并清除您应用的任何自定义字体。然后，检查图标是否出现。

标签： laravel laravel-5.4 laravel-mix ionicons

【解决方案1】：

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

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

如果您像我一样使用NPM 安装 ionicons，您将获得最新版本；如果您从他们的github repository 克隆它们，您将获得 v2.0.0。原来在v3.0.0中，很多图标类都被移除/更改了，所以我看不到<i class="icon ion-home"></i>，真是浪费时间！

【讨论】：

【解决方案2】：

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

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

从您的依赖项中卸载 ionicon： npm 卸载 ionicons

【讨论】：

【解决方案3】：

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

npm uninstall ionicons

npm install ionicons

【讨论】：

【解决方案4】：

现在 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>
```

【讨论】：