laravel 安装 npm 后不显示离子图标

Ionicons not showing after npm installation

提问by Alex

I installed ioniconsusing npm install --save ioniconsso that my package.jsonupdated to:

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

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

Next, I added the following in my /resources/assets/sass/app.scss:

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

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

After successfully running npm run dev, I ended up with

成功运行后npm run dev，我结束了

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

With no errors in the browser console, not a singleionicon (e.g. <i class="icon ion-home"></i>) is showing. I inspected public/css/app.css, and found that it references ionic fonts like so: /fonts/vendor/ionicons/dist/ionicons, which seems to comply with the folder structure above.

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

I tried adjusting @import, changing url(...)refrences in app.css, moving fonts directory - no luck. Lastly, I tried to reference ionicons through a CDN, and it worked like charm.

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

What am I doing wrong here? Thanks

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

回答by Alex

It turns out that I was using the docs for the wrong version of ionicons:

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

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

• V2.0.0 ionicons.com
• v3.0.0 ionicframework.com/docs/ionicons

If you install ionicons with NPMas I did, you'll get the latest version; if you clone them from their github repository, you'll get v2.0.0. It turns out that in v3.0.0, many icon classes were removed/changed, hence I couldn't see <i class="icon ion-home"></i>, what a waste of time!

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

回答by Abhijit Chakra

For anyone else facing this issue. This is what fixed it for me :slight_smile:

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

npm uninstall ionicons

npm install ionicons

回答by Soyaine

Now the Ionicons has been updated to v4.x. (Answer written at 2019-06-24)

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

Try like this:

像这样尝试：

1. Before import the scss after install, set the value of $ionicons-font-path:

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

2. When use the icon tag, write in ion-icontag:

   <ion-icon name="add"></ion-icon>
   

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>