利用阿里巴巴矢量图库 Iconfont 拓展团队使用的图标 ——

一直以来，我们公司都在使用图库 Iconfont，没有 UI 设计师的时候，直接从上面下载矢量图或者 PNG 格式的图片配合开发。

Ant Design 中 Icon 组件为我们内置了常用的管理系统后台的图标。下图就是官网展示的图标，能满足许多项目的使用。

icon截图.jpg

使用也非常简单，引入安装 antd 组件库，直接复制图标的代码就可以使用。

<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />

参数	说明	类型	默认值
spin	是否有旋转动画	boolean	false
style	设置图标的样式，例如fontSize 和 color	object	-
type	图标类型	string	-

同时，我们很快就会发现，这里的图标可能不太符合我们的产品要求。后来，我才发现通过 Iconfont 可以实现图标的拓展，具体的步骤如下.

1. 登录

   Iconfont 官网，建议使用 github 直接登录，省了许多麻烦。

Iconfont官网.jpg

2. 点击页面上方的图标管理。

   图标管理.jpg

3. 新建一个项目。

   新建项目.jpg

4. 寻找合适的图标，收藏到购物车里，打开购物车可以看到

   添加至项目，点击后便可以将购物车里的图标变成私有项目里的图标。

购物车.jpg

5. 这时再打开

   我的项目，就可以看到添加进来的图 unicode 引用、font-class 引用、symbol 引用。Ant Design 使用的方式就是 unicode 引用。

   union代码.jpg

   6.最后，在项目中引入这些图标的代码就可以随心所欲地更改大小、颜色、旋转角度等字体属性了。

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">&#x33;</i>