ratchet-2 - 棘轮 Ratchicon 集的附加图标

Question

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

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

有什么解决办法吗？

Answer 1

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

那么:

转至 http://icomoon.io/app/

导入ratchicons.svg(可在ratchet/ratchicons 目录中找到)，并导入要添加到其中的图标集的.svg。 (他们也有一堆自己的图标集)

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

在左上角，确保“U+”切换为 true。如果它是较深的灰色阴影并且您在图标下方看到它们的 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)，您就不必担心。