antd 引入自定义图标字体库!

图标字体？SVG ？说到 SVG 又要长篇大论了！打住！SVG 我之后开单独的一个知识库来总结吧，这里就一笔带过了。如今咱们主要讲的是怎么在 antd 里面引入自定义的图标字体库。Action ！

在这里咱们讲解的是用 IconFont 管理字体图片。

根据 [http://www.iconfont.cn/](http://www.iconfont.cn/) 地址打开网页以下：

在进行接下来的操做以前，但愿您已经登入系统了。不然全部的操做都将没法进行！

在首页输入框，搜索所需的图标字体的名称，若您有本身的图标字体在本机环境，也能够切换到上传模式，上传本机的图标字体（ 后缀是 SVG ）文件。

若您的 team 或者 公司在该系统上有本身的项目组，能够叫相关负责人将您拉进组内，这样您就可使用项目组内全部的图标字体。这样一个项目组能够作到 team 图标字体共享，很是很是实用。

接下来就是具体的操做了！

鼠标移到您看中或者须要的图标字体上，会出现透明的操做层，点击加入购物车，固然这里不是真的去花钱购买。而后看到右上角的购物车里会出现刚才选中的图标字体。

接下来的内容很重要，请谨慎操做！

在图标管理里面进入个人项目页面

先在新增本身的项目，用于将刚才选中的图标加入项目。

下面的表单填写必定，必定，必定要谨慎！

项目名称本身随意填写，最好是见名知意的那种。图中画红框的 FontClass/Symbol 前缀 一栏要填写，UI 框架所使用的图标字体的前缀，好比 antd 用的是 anticon。这里咱们就要填这个了，其余的框架，本身去找找！

相似

<i class="anticon anticon-home-c"></i>
复制代码

最后咱们为一个图标起的名称是 home-c，系统会生成 anticon-home-c 的类名。

项目描述可填可不填，Font Family 一栏，若是本身没把握就不动，其余的不重要了。

点击右上角的购物车图标会在右侧出现这样一个侧边，提示你讲选中的图标加入到自定义的项目中。将购物车已有的图标添加到刚才新建的项目中。

此时项目中就有了刚才添加的图标字体了。

接下来，又有个重点来了！编辑每一个图标，为每一个图标设置名称、编码。编码切不可和 UI 框架引入的图标字体同样，不然会出现使用不了的状况。请你们谨慎操做！！！

首先确认UI框架引入图标字体的编码范围。根据 antd 官网 查看，其引入图标大体的编码范围在 E6 到 E9。点击画笔编辑每一个图标的属性。

在图标的编辑页面，为图标填写一个 避免和 UI 框架中图标字体重复的 unicode 和 Font Class / Symbol，而后保存就 OK 了。

接下来将编辑好的图标项目下载到本地，毕竟咱们是要造本地的项目中进行引入。

解压下载获得的压缩包，获得以下的目录文件。其中画红框的使咱们须要的文件，其余的随便丢弃吧！！

选择一个适合是的静态资源文件目录而后新建一个 IconFont 的文件夹，再将上面的文件 copy 到改文件夹下。

再编写一个全局的图标字体样式的引入。能够在全局的样式引入该文件，或者在单个的样式文件里面引入！

引入后，就和 UI 框架引入图标同样了！

到这里总结就结束了！！！哈哈哈。。