为什么要使用字体图标iconfont？

上家公司时使用过字体图标，优势明显，现推广给当前公司的同事使用，文章记录如下(以react为例)：

引入字体图标iconfont可以提高开发效率和项目的可维护性。

优点

1. 设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。
2. 开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。
3. 字体图标缩放不失真，不会变模糊。
4. 减少网络请求次数，一个css文件可包含所有图标。
5. 节约流量，图标是图片格式，每个几K到几十K，而css文件一般一共只有几K。

缺点

1. 图标库包含了所有图标，所以维护时如果不慎修改了老的图标，下次开发时更新图标文件就会把潜在影响带进去。所以对以往使用过的老图标的修改删除要谨慎。
2. 如果同时引用多个项目，可能造成个别图标的冲突，这个已经和设计沟通采用方案1，大家以后更新代码，引用一个项目即可。解决方案：
   1. 避免引用多个项目
   2. 在图标库中修改冲突图标的Unicode(16进制)值。
3. 非常小的图标如果相对于圆等边框有居中效果时，误差可能会明显，这时可以用图片替代。

 

如何使用

创建

1.  在网站 https://www.iconfont.cn/ 注册会员
2. 把用户名发给项目创建者，让添加到项目。如果是自己创建的就忽略这一步。
3. 当成功添加项目后，在 “资源管理 - 我的项目” 中找到参与的项目
4. 选中font class选项，如果图标库被更新过，就会有提示，点击可更新代码。
5. 点击复制代码地址，在浏览器中打开，另存为到本地
6. 最好修改为固定名称，然后放入react项目中可公开访问的目录中，比如public下面
7. 在页面引入此文件，如在index.html

<link rel="stylesheet" href="%PUBLIC_URL%/iconfont.css">

为何一插入代码编号就断掉了？？？

页面中使用：

<i className={'iconfont i-back'} />

推荐使用<i>标签，class名同时需要有iconfont和i-xxx，xxx就是项目中的图标名称(第二行)，i-前缀和通用字体标识iconfont都可以在项目中设置（需管理员权限）。 

字体图标可以像文字一样设置color、font-size、font-weight等css属性。

如果图标有更新，就重复开头第4、5、6步。

 

补充：

 

1. 图标命名时要考虑到易读性，最好见名知意，格式可采用驼峰写法的单词、拼音全拼等。
2. 如果用于app之外等不需要考虑跨域影响的场景，iconfont可以直接引用在线地址。如：

3. <link rel="stylesheet" href="//at.alicdn.com/t/font_1759934_u1p2sf6vh4ra.css">

4. iconfont是单色图标，如果有多色需求，可以考虑symbol或图片
5. 更多请参见 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

 

祝大家使用愉快，如果发现更好的使用技巧欢迎交流沟通。