登录iconfont.cn网站，直接使用github账号即可登录
输入关键字搜索需要的图标，然后在需要的图标上点击'添加入库'
点击网站右上角的购物车图标，查看当前已入库的图标
点击下方的[添加至项目]按钮，选择已存在的项目或即时新建一个项目，然后确定
点击顶部导航菜单的[图标管理]\[我的项目]，选择一个项目可查看项目内现有的图标
图标列表的上方有几个按钮，最左边的按钮可以选择以Unicode/Font class/Symbol等方式显示
鼠标指向任意图标，可以执行复制代码等相关操作
在Font class/Symbol模式中，图标代码一般为"icon-{图标名}"，但是如果同时加入了多个同名的图标，那么后面加入的同名图标代码会以别的规则产生，为了方便在网页中使用，此时最好用鼠标指向该图标，编辑图标，指定一个合适的新代码(留意：不必输入icon-)。
<i class="iconfont icon-{图标名}"></i>即可。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iconfont example</title>
<!--当在iconfont项目中添加/编辑/删除图标后，必须更新在线链接URL-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_976353_dqgg2ot7ivl.css">
</head>
<body>
<h1>IconFont 图标</h1>
<p><i class="iconfont icon-verify" style="color:red;"></i>icon-verify</p>
<p><i class="iconfont icon-verify" style="color: 'rgba(0,0,0,.25)'"></i>icon-verify</p>
</body>
</html>
3.9.0版本之后的antd组件要使用iconfont中的图标非常简单方便
登录iconfont网站，选择相应的项目，切换到Symbol模式，点击[查看在线链接]按钮，复制该链接路径
在需要使用iconfont图标的组件内，添加以下代码(scriptUrl值为第1步复制的URL)。
const MyIcon = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成
});
注意：当添加/编辑/删除图标后，必须更新在线链接URL，然后将scriptUrl替换为新url
然后在需要添加图标的地方，添加与下面类似的代码即可：
<MyIcon type="icon-{图标名}"/>
type属性的值可直接通过在iconfont网站鼠标指向图标，然后复制代码获得。
待写...
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。