2

我安装了ionicons使用npm install --save 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、更改url(...)引用app.css、移动字体目录 - 不走运。最后，我尝试通过 CDN 引用 ionicons，它就像魅力一样。

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

4

4 回答 4

4

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

如果您像我一样使用NPM安装 ionicons ，您将获得最新版本；如果您从他们的github 存储库中克隆它们，您将获得 v2.0.0。事实证明，在 v3.0.0 中，许多图标类被删除/更改，因此我看不到<i class="icon ion-home"></i>，真是浪费时间！

于 2017-05-21T19:04:36.433 回答
1

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

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

于 2021-10-28T22:18:18.190 回答
0

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

npm uninstall ionicons

npm install ionicons
于 2019-10-05T16:49:23.587 回答
-1

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

试试这样：

  1. 在安装后导入 scss 之前，设置以下值$ionicons-font-path： 
    $ionicons-font-path: "~ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons.scss';
  2. 使用图标标签时，在ion-icon标签中写入： 
    <ion-icon name="add"></ion-icon>
于 2019-06-24T06:32:21.717 回答