一直以来，我们公司都在使用图库 Iconfont，没有 UI 设计师的时候，直接从上面下载矢量图或者 PNG 格式的图片配合开发。
Ant Design 中 Icon 组件为我们内置了常用的管理系统后台的图标。下图就是官网展示的图标，能满足许多项目的使用。
使用也非常简单，引入安装 antd 组件库，直接复制图标的代码就可以使用。
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| spin | 是否有旋转动画 | boolean | false |
| style | 设置图标的样式，例如fontSize 和 color | object | - |
| type | 图标类型 | string | - |
同时，我们很快就会发现，这里的图标可能不太符合我们的产品要求。后来，我才发现通过 Iconfont 可以实现图标的拓展，具体的步骤如下.
-
登录
Iconfont 官网，建议使用 github 直接登录，省了许多麻烦。
-
点击页面上方的图标管理。
图标管理.jpg
-
新建一个项目。
新建项目.jpg
-
寻找合适的图标，收藏到购物车里，打开购物车可以看到
添加至项目，点击后便可以将购物车里的图标变成私有项目里的图标。
-
这时再打开
我的项目，就可以看到添加进来的图 unicode 引用、font-class 引用、symbol 引用。Ant Design 使用的方式就是 unicode 引用。
union代码.jpg6.最后，在项目中引入这些图标的代码就可以随心所欲地更改大小、颜色、旋转角度等字体属性了。
unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。 注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
unicode使用步骤如下：
第一步：拷贝项目下面生成的 font-face，放到 iconfont.css 文件中
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }第二步：定义使用 iconfont 的样式，也在 iconfont.css 文件中
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
