First of ALL
本示例项目的源码地址：
https://github.com/llqgit/demo-antd-iconfont
扩展：意思就是不影响默认字体图标的使用，增加自定义图标
ant.design 的 icon 本地化和本文的操作是类似的，省略前面自己创建图表集即可。
注意本文的更新时间(2017-12-12)可能与最新的 iconfont.cn 以及 ant.design 版本不一致
用到的技术栈是：
ant.design - [官网] [本文更新时最新版本为 v3.0.1]
dvajs - [github]
iconfont.cn - [阿里的字体图标管理平台]
点我查看参考文章 可能有点旧了（相对2017-12-12），仅供参考
前提：需要配置好 ant.design 项目。参考点我
1. 字体来源
iconfont.cn
登录
进入个人中心
创建图标集
创建字体图标集
字体名称 在示例中使用的是 anticon-user
加入自己喜欢的字体图标
eg：
加入购物车
添加到图标集中
在图标集中编辑图标属性
在图标集中编辑图标属性_2
注意，这里为了举例子，我将 computer_fill 改名成为了 computer，这个名字会影响这里⇩：
<Icon type="computer" />
<Icon type="computer_fill" />
下载文件到本地
2. 导入到项目中
下载后的文件如图：
解压字体文件，以及要使用的文件
我的目录结构大概是这样的：
public 是资源目录
将文件们拷贝到项目中
创建一个less文件，比如common.less，内容如下：
创建一个less文件，比如common.less，内容如图，并引用到程序根组件中
源码：
/* 引入 icon class 文件 */
@import "/fonts/iconfont/iconfont.css";
/* 关于这个引用路径，有一个坑，ant.design 我用的dva，默认资源路径为 /public 所以这个引用的实际目录是 /public/fonts/iconfont/iconfont.css */
/* 设置使用字体的优先级 anticon-user 高 */
:global(.anticon) { /* :global() 是为了覆盖全局class .anticon 的样式 */
&:before {
/* 优先调用 anticon-user 字体，就是上面图例创建的 anticon-custom，名字对上就行，我自己的程序叫 anticon-user 了 */
font-family: "anticon", "anticon-user" !important;
/* 默认样式是这样
font-family: "anticon" !important;
*/
}
}
iconfont.css 这个文件是引入字体的关键地方
iconfont.css 这个文件是引入字体的关键地方
iconfont.css 这个文件是引入字体的关键地方
PS:「 iconfont.css 」 名字可以自定义
iconfont.css 内容如下（实际上是在这里引用的字体资源）内容是 iconfont.cn 生成的：
/*
说明：
1. 本文件中的 "anticon-user" 是由 iconfont.cn 生成，并存在于本目录下所有字体文件中，所以一定要提前定义好
2. "anticon-user" 字体名称，可以自定义，比如 "my-font-blabla"，只要全文一致即可。如果想修改，最好在 iconfont.cn 生成时改好，否则修改麻烦
*/
@font-face {font-family: "anticon-user";
src: url('iconfont.eot?t=1513048717458'); /* IE9*/
src: url('iconfont.eot?t=1513048717458#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1513048717458') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1513048717458#anticon-user') format('svg'); /* iOS 4.1- */
}
.anticon-user {
font-family:"anticon-user" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* content 内容，是字体的 unicode 值，注意不要和 ant 内置的字体 unicode 冲突 */
/* ant.design 默认字体下载地址：https://ant.design/docs/resource/download-cn ，unicode同样定义在 iconfont.css 文件中 */
.anticon-bad-android:before { content: "\e501"; }
.anticon-bad-apple:before { content: "\e500"; }
.anticon-bad-windows:before { content: "\e502"; }
说明一下：
比如我们有一个根组件，叫 IndexPage.js
在 IndexPage.js 中import 'common.less';
在 common.less 中，我们import 'iconfont.css';并覆盖全局字体样式，默认 ant 字体 'anticon', 扩展自己的字体 'anticon-user'(名称随意)
其他地方应该是不用特殊配置的了，包括.roadhogrc.js
不出意外就能执行了 [ 部分运行代码如下 ]：
import React from 'react';
import { connect } from 'dva';
import { Icon, Row, Col } from 'antd';
import './common.less'; // 引入字体样式文件
function IndexPage() {
return (
<div style={{ fontSize: 30 }}>
<Row type="flex" align="middle" justify="center">
<span>默认字体:</span>
<Icon type="apple" />
<Icon type="windows" />
<Icon type="android" />
</Row>
<Row type="flex" align="middle" justify="center">
<span>自定义字体:</span>
<Icon type="bad-apple" />
<Icon type="bad-windows" />
<Icon type="bad-android" />
</Row>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
祝你好运
网友评论