字体图标（Iconfont）的优缺点
优点
- 缩放不会模糊
- 一套资源可在web、iOS、Android等多个平台使用
- 一键换肤、方便更改图片颜色，图片复用
- 一定程度上减小包体积
- 有利于项目模块化
缺点
- 图标制作/更新成本高
- 只支持单色
生成字体图标的具体步骤
1. UI提供 命名规范 的svg图片
图片命名采用语义化的英文命名
对同一类图片最好采用批量命名，方便前端添加参数和引用，例如sidebar1、sidebar2、sidebar3 ······
-
把全部svg图片放到同一个文件夹下面
2. 前端 安装转码工具 iconfount
iconfount是一个离线icon font生成工具，支持从多个svg文件生成一套字体以及对应的样式文件
全局安装iconfount
npm install -g iconfount or yarn global add iconfount.
找到iconfount的安装位置
默认路径：C:\Users\xxx\AppData\Roaming\npm\node_modules\iconfount
修改 配置项
找到iconfount文件夹下的sample/svn 清空，把自己的svn图片全部添加进去
-
修改 iconfount文件夹下的sample/config.json配置文件
“hinting”：true, 改为false
“glyphs”：下面照着原先的规则修改为自己svg图片名（全部图片都要填进去，这一步最繁琐）
-
‘’css_prefix_text‘’： ‘’iconfount-icon-‘’ 可以修改为任意字符，推荐修改为‘‘icon-’‘
可参考配置如下：
{ "name": "iconfount", "output": "../build", "hinting": false, "units_per_em": 1000, "ascent": 850, "weight": 400, "start_codepoint": 59392, "glyphs_dir": "./svg", "glyphs": [{ "keywords": ["dingbulan1"], "src": "dingbulan1.svg", "css": "dingbulan1" }], "meta": { "author": "Youzan FE", "license": "MIT", "license_url": "https://opensource.org/licenses/MIT", "homepage": "http://www.youzan.com", "css_prefix_text": "icon-", "css_use_suffix": false, "columns": 4, "filename_hash": true } }
-
修改 iconfount文件夹下的package.json配置文件 (这一步只是推荐操作，目的是方便命令行操作)
"scripts": { "start": "node bin/fount.js -c sample/config.json" },
执行build操作
现在可以在iconfount文件夹下打开命令行，执行npm start了
修改生成的build文件
执行完npm start之后，你会发现iconfount文件夹下多了一个build文件，打开这个文件，点开demo.html，就可以看见所有的字体图标，以及引用他们的类名了
精简build文件
build下面只需要保存css文件夹下面的iconfount.css，font文件下面的iconfount-2e7aa085be.woff文件以及一个预览的demo.html就可以了，剩下的文件可以统统删掉，然后记得把留下来的三个文件中没用的路径删掉就大功告成了！
