iconfont.cn基本使用
-
登录iconfont.cn网站，直接使用github账号即可登录
-
输入关键字搜索需要的图标，然后在需要的图标上点击'添加入库'
-
点击网站右上角的购物车图标，查看当前已入库的图标
-
点击下方的[添加至项目]按钮，选择已存在的项目或即时新建一个项目，然后确定
-
点击顶部导航菜单的[图标管理][我的项目]，选择一个项目可查看项目内现有的图标
-
图标列表的上方有几个按钮，最左边的按钮可以选择以Unicode/Font class/Symbol等方式显示
-
鼠标指向任意图标，可以执行复制代码等相关操作
-
在Font class/Symbol模式中，图标代码一般为"icon-{图标名}"，但是如果同时加入了多个同名的图标，那么后面加入的同名图标代码会以别的规则产生，为了方便在网页中使用，此时最好用鼠标指向该图标，编辑图标，指定一个合适的新代码(留意：不必输入icon-)。
以在线链接方式使用iconfont图标
在HTML文件中
- 登录iconfont网站，选择相应项目，切换到Font class模式，复制在线链接URL
- 在html文件中添加link标签，引用上一步复制的url(别忘在前面加上"http:")，在需要显示iconfont图标的地方写上
<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>
在使用antd组件的项目中
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网站鼠标指向图标，然后复制代码获得。
以离线方式使用iconfont图标
待写...