棘轮 Ratchicon 集的附加图标

Question

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

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

有什么解决办法吗？

Answer 1

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

那么：

• 转到http://icomoon.io/app/

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

• 选择您想要包含的任何/所有图标（我建议至少包括所有的棘轮图标，以确保它不会与棘轮的工作方式相混淆，这样您就不会拥有自己编辑）。满意后，单击窗口底部的“字体”按钮，您将看到所有选中的图标及其代码（与 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

更新

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