一些离子未显示答案

【问题标题】：some ionicons not showing一些离子未显示
【发布时间】：2015-03-02 04:38:04
【问题描述】：

我注意到我在我的 cordova 项目中使用的一些图标没有显示在我的任何设备上。那些不起作用的图标名称中似乎有 ios 或 android 一词（例如：ion-android-list 或 ion-ios-book-outline）。任何想法为什么他们只是显示空白？到目前为止，我使用的任何带有通用名称的图标都可以正常工作（例如离子时钟、离子卡）。我从这里获取的图标名称：ionicons

我已将其包含在我的 index.html 文件中：

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

【问题讨论】：

您是否尝试过使用下划线“_”而不是连字符“-”？例如，ion_android_list 而不是 ion-android-list。
@ChuongPham：我认为那些应该是连字符。 AlexHarper：您最近是否升级了您的 Ionicons 版本，您使用的是哪个版本？
感谢@ChuongPham 的建议，但它们绝对应该是连字符。在 css 文件 inonic.css 中显示：font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=1.5.2"); src: url("../fonts/ionicons.eot?v=1.5.2#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=1.5.2") format("truetype"), url("../fonts/ionicons.woff?v=1.5.2") format("woff"), url("../fonts/ionicons.svg?v=1.5.2#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
好的，所以如果我使用 v1.5.2 中的图标名称，图标似乎可以工作，那么如何将图标升级到 v2.0.0。我尝试替换 ionic lib 目录中的文件并更新 css 文件以显示 v.2.0.0 但是现在仍然显示有问题的图标。有什么想法吗？
用ios7替换ios |至少 ios 可以工作

标签： android cordova ionic ionicons

【解决方案1】：

显然，在使用 CMD 中的 ionic start 构建 ionic 应用程序时，最新版本的 ionic 会加载一个过时的图标库 v1.5.2（最新版本是 v2.0.0）。

要更新字体，请访问最新的 ionicons 网站并下载。
解压并导航到 /fonts 目录，然后将这 4 个文件复制到应用的 www/lib/ionic/fonts 目录（覆盖）。
对 scss 文件夹执行相同操作并粘贴到 www/lib/ionic/scss/ionicons（覆盖）。
最后从解压的 zip 文件 /css/ionicicons.css 中打开 ionicons.css 文件并将该文件的内容复制到 www/lib/ionic/css/ionicons.css（注意：确保您编辑并仅替换现有字体版本大约占用前 1500 - 2000 行，您会看到 cmets 指示）

【讨论】：

很好的答案 +1。但是我认为在第 4 步中你的意思是说“并将该文件的内容复制到 www/lib/ionic/css/ionicons.css”到“并将该文件的内容复制到 www/lib/ionic/css/ionic .css"
没有为我显示，改进它可以识别它们但显示空白方块
这有什么更新吗？我也只看到一个黑色方块，不胜感激！
您需要将 ionicons.css 缩小为 ionicons.min.css 如果这是您指向的那个；使用在线缩小器

【解决方案2】：

看起来您使用的是 Ionic，而不仅仅是 Cordova。

您可以对即将发布的 Ionic 版本进行部分升级，其中包括 Ionicons v2：

从latest nightly 下载 /config/lib/fonts 和 /scss/ionicons 到 /www/lib 文件夹中的相应位置
确保您已在本地安装 gulp：npm install gulp
运行 ionic setup sass（注意：首先备份您的 ionic.project 文件，因为这会进行一些更改）
将 /www/lib/ionic/css 中的文件替换为 /www/css 中的新文件（需要重命名）。
修复这些复制文件中的相对路径：将 ../lib/ionic/fonts 替换为 ../fonts

我确信有一种更简单的方法，但这对我有用。有人发了 feature suggestion 来让 ionicons 始终保持最新状态。

更新：

Ionicons v2 尚不支持动画图标（ion-spinner 将成为替代品）。这是一个让他们回来的技巧：

https://github.com/driftyco/ionicons/issues/111#issuecomment-65788526

您需要将display:inline-block 添加到动画类才能在Android 上工作。

【讨论】：

【解决方案3】：

对于较新的版本，只需使用：

<ion-spinner></ion-spinner>

更多：ion-spinner

【讨论】：

你能解释一下这需要添加到哪里吗？在我的控制器中，我有这个： $ionicLoading.show({ noBackdrop: true, template: '
Loading ...
' }) 我在 style.css 中添加了这个 - .item-icon-left ion-spinner { float: left;左边距：-3.2em；右边距：1em；边距顶部：-0.2em； } .spinner svg { 宽度：28px;高度：28px；中风：#999；填写：#999；这仅适用于浏览器，但不适用于实际的 android 设备。

【解决方案4】：

我有同样的问题。最简单的解决方法：

删除www/ionic/fonts 和www/ionic/scss/ionicons 目录。

然后从你的项目根目录运行ionic lib update。

【讨论】：

【解决方案5】：

我猜这可能与使用的 ionic 版本有关，如果它是 V5 或者如果 @ionic/angular 的版本是 V5，那么您需要使用来自版本 5 而不是 4 的 ionicons（它们有不同的名称）。

【讨论】：

这对我有帮助。确保ionicons 版本已固定到您的@ionic/angular 版本。例如，对于 4.x 版本的 @ionic/angular 项目，运行 npm i ionicons@4