blocks|key|102421|text|原来，我把文档用于错误版本的离子图标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|102422|v2.0.0+ionicons.com|unordered-list-item|offset|length|102423|v3.0.0+离子框架网站/docs/离子图标|102424|如果你像我一样用NPM安装离子图标，你会得到最新的版本；如果你从他们的github储存库克隆他们，你会得到2.0.0。结果，在v3.0.0中，许多图标类被删除/更改，因此我看不到<i+class="icon+ion-home">，真是浪费时间！|style|CODE|102425|entityMap|0|LINK|mutability|MUTABLE|url|http://ionicons.com/|1|https://ionicframework.com/docs/ionicons/|2|https://www.npmjs.com/package/ionicons|3|https://github.com/driftyco/ionicons^0|0|7|C|0|0|7|G|1|0|2H|T|8|3|2|Z|9|3|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@$E|12|F|13|1|14]]|A|$]]|$1|G|3|H|5|D|7|15|8|@]|9|@$E|16|F|17|1|18]]|A|$]]|$1|I|3|J|5|6|7|19|8|@$E|1A|F|1B|K|L]]|9|@$E|1C|F|1D|1|1E]|$E|1F|F|1G|1|1H]]|A|$]]|$1|M|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]|W|$5|P|Q|R|A|$S|X]]|Y|$5|P|Q|R|A|$S|Z]]]]

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

<ul>
<li>v2.0.0 <a href="http://ionicons.com/" rel="nofollow noreferrer">ionicons.com</a></li>
<li>v3.0.0 <a href="https://ionicframework.com/docs/ionicons/" rel="nofollow noreferrer">ionicframework.com/docs/ionicons</a></li>
</ul>

If you install ionicons with <a href="https://www.npmjs.com/package/ionicons" rel="nofollow noreferrer">NPM</a> as I did, you'll get the latest version; if you clone them from their <a href="https://github.com/driftyco/ionicons" rel="nofollow noreferrer">github repository</a>, 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 <code>&lt;i class="icon ion-home"&gt;&lt;/i&gt;</code>, what a waste of time!

blocks|key|1397853|text|现在，Ionicons已经更新为v4.x。(答复时间为2019-06-24)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397854|就像这样：|1397855|在安装后导入scss之前，设置$ionicons-font-path的值：$ionicons-字体-path：“~离子图标/dist/字体”；@import‘~离子图标/dist/scss/离子图标。|ordered-list-item|offset|length|style|CODE|1397856|当使用图标标签时，用ion-icon标记写：|1397857|entityMap^0|0|0|F|J|0|A|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@$G|R|H|S|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|T|8|@$G|U|H|V|I|J]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|N|$]]

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

Try like this:

<ol>
<li>Before import the scss after install, set the value of <code>$ionicons-font-path</code>:

<pre><code>$ionicons-font-path: "~ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons.scss';
</code></pre></li>
<li>When use the icon tag, write in <code>ion-icon</code> tag:

<pre><code>&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;
</code></pre></li>
</ol>

blocks|key|1397859|text|对于其他面临这个问题的人来说。这就是为我修复的:slight_smile：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397860|npm+uninstall+ionicons

npm+install+ionicons|code-block|syntax|javascript|1397861|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>npm uninstall ionicons

npm install ionicons
</code></pre>

blocks|key|1437523|text|在标签前粘贴这两行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1437524|<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>|code-block|syntax|javascript|1437525|从您的依赖性卸载离子图标:+npm卸载离子图标|1437526|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Paste these two lines right before your tag:
<pre><code>&lt;script type=&quot;module&quot; src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;
&lt;script nomodule src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;
</code></pre>
Uninstall ionicon from your depencency:
npm uninstall ionicons

blocks|key|1397930|text|安装软件包时，添加以下命令:+ng添加@离子型/角型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397931|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

when you install the package
add this command : ng add @ionic/angular

I installed <a href="http://ionicons.com/" rel="nofollow noreferrer">ionicons</a> using <code>npm install --save ionicons</code> so that my <code>package.json</code> updated to:

<pre><code>"dependencies": {
 "ionicons": "^3.0.0"
}
</code></pre>

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

<pre><code>// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";
</code></pre>

After successfully running <code>npm run dev</code>, I ended up with

<pre><code>/public
 /css
 app.css
 /fonts
 /vendor
 /ionicons
 /dist
 ionicons.eot
 ionicons.svg
 ionicons.ttf
 ionicons.woff
 ionicons.woff2
</code></pre>

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

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

What am I doing wrong here? Thanks

Ionicons not showing after npm installation

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用安装了npm install --save ionicons，因此我的package.json更新到："dependencies": {    "ionicons": "^3.0.0"}接下来，我在我的/resources/assets/sass/app.scss中添加了以下内容// Ionicons@impor...

问安装npm后未显示的离子
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问安装npm后未显示的离子EN