4

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

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

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

5 回答 5

8

显然，在使用 CMD 构建 ionic 应用程序时，最新版本的 ionicionic start会加载一个过时的图标库 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 行，您会看到注释指示）
于 2015-01-05T02:48:11.840 回答
2

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

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

  1. 从最新的 nightly下载 /config/lib/fonts 和 /scss/ionicons到 /www/lib 文件夹中的相应位置

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

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

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

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

我确信有一种更简单的方法，但这对我有用。有人提出了始终保持 ionicons 最新的功能建议。

更新：

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

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

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

于 2015-02-17T20:10:43.943 回答
1

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

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

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

于 2015-03-05T19:20:38.570 回答
1

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

<ion-spinner></ion-spinner>

更多：离子旋转器

于 2015-02-25T12:21:52.667 回答
1

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

于 2020-05-05T09:19:54.460 回答