棘轮Ratchicon套装的附加图标

Question

我正在使用Cordova,Phonegap和Ratchet进行iOS应用.如何在最新版本的Ratchet上添加其他图标？我们尝试使用bootstrap图标集,但它与Ratchet CSS存在某种冲突.

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

有什么解决方案吗？

Answer 1

我有类似的问题,并设法修复如下.但是,我没有使用这个ratchet-ios7.css,看了一下之后,看起来我的答案看起来不适用于你问题的这一部分.这个答案专门为棘轮图标添加图标.

那么:

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

• 导入ratchicons.svg(在棘轮/ ratchicons目录中找到),然后导入要添加到其中的图标集的.svg.(他们也有一堆自己的图标集)

• 选择你想要包含的任何/所有图标(我建议至少包括所有的ratchicons,只是为了确保它不会弄乱Ratchet的东西如何工作,所以你不必自己编辑它).当您满意时,单击窗口底部的"字体"按钮,您将看到所有选定的图标及其代码(与在ratchet.css底部可以看到的相同).

• 在左上角,确保将"U +"切换为true.如果它是一个较暗的灰色阴影,你在图标下面看到它们的unicode属性(例如"e600"),那么它被设置为true.我不完全确定"fi"切换在它如何影响代码方面做了什么,但我只是把它放在一边(只是为了安全起见).

• 如果它们没有准确地传达它们是什么和/或它们是否符合命名约定,请浏览列表并更改所需图标的名称.

• 同样在左上角,单击"首选项"按钮,在"字体名称"输入字段中,将"icomoon"替换为"ratchicons".我不记得我是否更改了Class Prefix字段,尽管我认为它并不特别重要(有人可以随意纠正我).最后,确保选中"在CSS中编码和嵌入字体".单击右上角的"X"按钮.

• 当所有内容都显示为schpick-n-schpam时,单击页脚中的下载按钮,您将获得一个zip文件夹.

• 解压缩那个吸盘,在里面你会看到几个文件夹/文件; 我们正在寻找的是"字体".打开那个.在里面你会看到4个文件,每个文件都名为ratchicons,每个文件都有不同的文件扩展名(所有这些都是我们需要的!).复制所有4个文件.

• Nagivate到你的ratchicons文件夹(你得到了最初的ratchicons.svg),并将所有这些重命名为其他东西(例如"ratchicons.woff" - >"ratchicons_old.woff"),只是为了保持工作的可用性.现在粘贴新文件.

• 现在,直接编辑ratchet.css文件并不是最好的做法,但就我所经历的情况而言,这并没有造成任何问题,所以我们就是这样做的.打开ratchet.css并向右下方.你会看到所有标准配备棘轮的.icon-css选择器,现在我们将添加我们的新选择器.返回您下载并解压缩的文件夹并打开style.css.查看所有那些.icon - *:在{}选择器之前,就像在ratchet.css中那样？复制所有这些,并将它们粘贴到ratchet.css中的那些上

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

更新

正如注释中所指出的,在unicode字符串中,代码中的数字必须大于255.否则,它们将与普通的ASCII字符unicode冲突.我不确定下限是什么,但如果你坚持更高的数字(500s-900s),你不必担心它.