使用iconfont图标

时间 2019-11-14 标签使用 iconfont 图标

iconfont.cn基本使用

登陆iconfont.cn网站，直接使用github帐号便可登陆css
输入关键字搜索须要的图标，而后在须要的图标上点击'添加入库'
点击网站右上角的购物车图标，查看当前已入库的图标
点击下方的[添加至项目]按钮，选择已存在的项目或即时新建一个项目，而后肯定
点击顶部导航菜单的[图标管理]\[个人项目]，选择一个项目可查看项目内现有的图标
图标列表的上方有几个按钮，最左边的按钮能够选择以Unicode/Font class/Symbol等方式显示
鼠标指向任意图标，能够执行复制代码等相关操做
在Font class/Symbol模式中，图标代码通常为"icon-{图标名}"，可是若是同时加入了多个同名的图标，那么后面加入的同名图标代码会以别的规则产生，为了方便在网页中使用，此时最好用鼠标指向该图标，编辑图标，指定一个合适的新代码(留意：没必要输入icon-)。html

以在线连接方式使用iconfont图标

在HTML文件中

登陆iconfont网站，选择相应项目，切换到Font class模式，复制在线连接URL

在html文件中添加link标签，引用上一步复制的url(别忘在前面加上"http:")，在须要显示iconfont图标的地方写上<i class="iconfont icon-{图标名}"></i>便可。git

<!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中的图标很是简单方便github

登陆iconfont网站，选择相应的项目，切换到Symbol模式，点击[查看在线连接]按钮，复制该连接路径
在须要使用iconfont图标的组件内，添加如下代码(scriptUrl值为第1步复制的URL)。antd
```
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成
});
```
注意：当添加/编辑/删除图标后，必须更新在线连接URL，而后将scriptUrl替换为新url网站
而后在须要添加图标的地方，添加与下面相似的代码便可：
<MyIcon type="icon-{图标名}"/>
type属性的值可直接经过在iconfont网站鼠标指向图标，而后复制代码得到。url

以离线方式使用iconfont图标

待写...code