7

我正在为 iOS 应用程序使用 Cordova、Phonegap 和 Ratchet。如何在 Ratchet 的最新版本中添加其他图标？我们尝试使用引导图标集，但它与 Ratchet CSS 存在某种冲突。

我从 Github 添加了 ratchet-ios7.css，它似乎有更多图标，但我无法使用它们，并且包的文档链接也不起作用。

有什么解决办法吗？

4

1 回答 1

8

我有一个类似的问题，并设法解决它如下。但是，我没有使用这个 ratchet-ios7.css，在稍微研究了一下之后，我的回答似乎不适用于你问题的那一部分。这个答案专门为棘轮图标添加图标。

那么：

  • 访问http://icomoon.io/app/

  • 导入 ratchicons.svg（在 ratchet/ratchicons 目录中），然后导入要添加到其中的图标集的 .svg。（他们也有一堆自己的图标集）

  • 选择您想要包含的任何/所有图标（我建议至少包括所有棘轮图标，以确保它不会与 Ratchet 的工作方式混淆，因此您不必自己编辑它）。满意后，单击窗口底部的“字体”按钮，您将看到所有选定的图标及其代码（与 ratchet.css 底部的相同）。

  • 在左上角，确保“U+”切换为真。如果它是较深的灰色阴影，并且您在图标下方看到它们的 unicode 属性（例如“e600”），则将其设置为 true。我不完全确定“fi”切换在如何影响代码方面做了什么，但我只是不理会它（只是为了安全起见）。

  • 浏览列表并更改您想要的任何图标的名称，如果它们不能准确地传达它们的含义和/或它们不符合命名约定。

  • 同样在左上角，单击首选项按钮，然后在字体名称输入字段中，将“icomoon”替换为“ratchicons”。我不记得我是否更改了 Class Prefix 字段，尽管我认为这并不特别重要（有人随时纠正我）。最后，确保选中“在 CSS 中编码和嵌入字体”。点击右上角的“X”按钮。

  • 当一切看起来都是 schpick-n-schpam 时，单击页脚中的下载按钮，您将获得一个 zip 文件夹。

  • 打开那个吸盘，在里面你会看到几个文件夹/文件；我们正在寻找的是“字体”。打开那个。在里面你会看到 4 个文件，每个文件名为 ratchicons，每个文件都有不同的文件扩展名（所有这些都是我们需要的！）。复制所有 4 个文件。

  • 导航到您的 ratchicons 文件夹（您从中获得初始 ratchicons.svg 的文件夹），然后将所有这些重命名为其他内容（例如“ratchicons.woff”->“ratchicons_old.woff”），只是为了保持工作的可用. 现在将新文件粘贴到此处。

  • 现在，直接编辑 ratchet.css 文件并不是最佳实践，但就我所经历的而言，这不会造成任何问题，所以我们将这样做。打开 ratchet.css 并直接到底部。您将看到所有带有棘轮的标准的 .icon-css 选择器，现在我们将添加我们的新选择器。返回您下载并解压缩并打开 style.css 的文件夹。看到所有那些 .icon-*:before{} 选择器，比如 ratchet.css 中的选择器？复制所有这些，并将它们粘贴到 ratchet.css 中的那些上

您现在应该能够以与标准棘轮图标完全相同的方式使用新图标！只需在 class="" 属性中使用您在网站上提供的图标名称即可。如果您需要更改名称或其他内容，只需在 ratchet.css 中进行编辑。此外，对于我错过的任何内容和/或如果您好奇，这里是 IcoMoon 的文档：http: //icomoon.io/#docs

更新

正如评论中指出的，在 unicode 字符串中，代码中的数字必须高于 255。否则，它们将与正常的 ASCII 字符 unicode 冲突。我不确定下限到底是多少，但是如果您坚持更高的数字（500s-900s），则不必担心。

于 2014-07-11T21:33:45.977 回答