Icomoon Note

This is a summary of using icomoon

1、使用指南:

1)点击页面右上角Icomoon App”;

2)点击页面左上角”Imports Icons”上传已有的svg文件;

3)在页面正下方“Untitled Set n”中勾选要生成的图标,勾选的图标数量会在下方“Selection”中显示;

4)点击页面右下方“Generate Font F”生成样式;

5)在页面右下方点击“Download”下载生成的样式和字体文件,并应用到文件中,注意路径。

6)若要维护一份样式文件,在拿到svg文件后,再将步骤1)到5)执行一遍,只是步骤2)要改成上传项目里原有的svg文件和新给出的svg文件(如果是单人维护的项目,icomoon会保存之前上传的svg文件,因此可以不上传旧的svg文件)。

2、注意点:

1)第4步中,如果不选择任何图标,“Generate Font F”按钮是不可点击状态;

2)第5步中,需要注意几点:

a.生成的样式里,样式的命名不要有中文;
b.生成的图标编码(默认e900)和字体名称可修改,但不要有重复;
c.生成的图标样式最好不要有其他样式如color,尤其是在多人维护的项目中;

3)若由于某些不可控因素需要生成多个字体文件和样式文件,注意样式文件的content也不可以重复,不然后饮用的样式文件的content会覆盖之前引用的样式content。

3、补充:

1)该网站是可以自己导出一些图标使用的,导出方法和自定义的一样;

2)安卓端和ios的使用方式和html不太一样

安卓端引用的是:图片

ios引用的是:8 位的 Unicode 字符,例:HTML 实体 Unicode 码为:0xe900 转换后为:\U0000e900 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符。

3)content中的图标编码可以是任意的16进制数字,只是icomoon会默认从e900开始;

4、扩展:

这里说一些本人遇到的实际问题以及解决办法。

1)当服务器由于某些原因不支持ttf字体文件时,可用下述方法解决:

a.进入svg文件所在的文件夹,执行base64 fontname.ttf > fontbase64.txt命令
b.css里写成以下这样;
1
2
3
src: url('data:font/truetype;charset=utf-8;base64,
          /*fontbase64.txt里的编码*/
') format(’woff’);

2)将fontbase64的字体转换成ttf或其他字体格式: 链接

3)图片也可以转码;

4)base64编码经常用于文件纯属或存储(电子邮件、xml文件等),主要优点有:

a.降低出错率;
b.可以转化不可见字符;等

5)阿里妈妈专门处理svg网址