一些离子图标未显示

Question

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

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

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

Answer 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中打开ionicons.css文件.css并将该文件的内容复制到www/lib/ionic/css/ionicons.css （注意：确保编辑并仅替换占用前 1500 - 2000 行的现有字体版本，您将看到指示的注释）

Answer 2

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

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

1. 将/config/lib/fonts 和/scss/ionicon 从最新的每晚下载到您的/www/lib 文件夹中的相应位置

2. 确保您在本地安装了gulp：npm install gulp

3. 运行ionic setup sass（注意：首先备份您的ionic.project文件，因为这会进行一些更改）

4. 将/www/lib/ionic/css 中的文件替换为/www/css 中的新文件（需要重命名）。

5. 修复这些复制文件中的相对路径：替换 ../lib/ionic/fonts with ../字体

我相信有一种更简单的方法，但这对我有用。 有人提出了一个功能建议，以始终保持离子图标最新。

---

更新：

Ionicon v2尚不支持动画图标（离子微调器将是替代品）。这里有一个让他们回来的技巧：

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

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

Answer 3

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

<ion-spinner></ion-spinner>

更多： 离子旋转器

Answer 4

我遇到了同样的问题。 最简单的解决方法：

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

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

Answer 5

我想这可能是

关于Ionic的使用版本，如果它是V5，或者如果@ionic/angular的版本是V5，那么你需要使用版本5而不是4的ionicon（它们有不同的名称）。