• 银行卡
    
  • yuyue
    
  • xinhao
    
  • yuyin
    
  • dingwei
    
  • fuwu
    
  • fujin
    
  • jiantou
    
  • caidan
    
  • wifi
    
  • guanbi
    
  • wode
    
  • sousuo
    
  • 图标
    
  • kechongdian
    
  • shouye
    
  • gongxiang
    
  • weibo
    
  • weixin
    
  • QQ
    
  • weifachuli
    
  • ji dong che yu yue
    
  • sao
    
  • cheliang
    
  • fakuan
    
  • shigu
    
  • mianjian
    
  • yishibuling
    
  • qimanhuanzheng
    
  • buhuanhaopai
    
  • buhuanlinghangshizhe
    
  • 01
    
  • 02
    
  • 03
    
  • 04
    
  • 05
    
  • 06
    
  • 07
    
  • 08
    
  • 09
    
  • 0
    
  • yin zhuan qing
    
  • finesvg
    
  • yintian
    
  • xiayu
    
  • pu tong
    
  • erweima
    
  • dingdan
    
  • wodeqianbao
    
  • youhuiquan
    
  • changjianwenti
    
  • yu e
    
  • jifen
    
  • yucunkuan
    
  • shouyi
    
  • yijianfankui
    
  • dianzifapiao
    
  • p3
    
  • shoucang
    
  • shezhi
    
  • kefu
    
  • che
    
  • zhifubao
    
  • weixin
    
  • xia xue
    
  • ditu
    
  • tupian
    
  • shengyuchewei
    
  • yejianmoshi
    
  • xinxi fankui
    
  • zuo
    
  • you
    
  • dui
    
  • xuanzhuan
    
  • yinlian
    
  • yu e
    
  • dianzifapiao
    
  • 解绑
    
  • 5摄像头
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 银行卡
    .icon-yinxingqia3
  • yuyue
    .icon-yuyue
  • xinhao
    .icon-xinhao
  • yuyin
    .icon-yuyin
  • dingwei
    .icon-dingwei
  • fuwu
    .icon-fuwu
  • fujin
    .icon-fujin
  • jiantou
    .icon-jiantou
  • caidan
    .icon-caidan
  • wifi
    .icon-wifi
  • guanbi
    .icon-guanbi
  • wode
    .icon-wode
  • sousuo
    .icon-sousuo
  • 图标
    .icon-tubiao
  • kechongdian
    .icon-kechongdian
  • shouye
    .icon-shouye
  • gongxiang
    .icon-gongxiang
  • weibo
    .icon-weibo
  • weixin
    .icon-weixin
  • QQ
    .icon-QQ
  • weifachuli
    .icon-weifachuli
  • ji dong che yu yue
    .icon-jidongcheyuyue
  • sao
    .icon-sao
  • cheliang
    .icon-cheliang
  • fakuan
    .icon-fakuan
  • shigu
    .icon-shigu
  • mianjian
    .icon-mianjian
  • yishibuling
    .icon-yishibuling
  • qimanhuanzheng
    .icon-qimanhuanzheng
  • buhuanhaopai
    .icon-buhuanhaopai1
  • buhuanlinghangshizhe
    .icon-buhuanlinghangshizhe
  • 01
    .icon-icon-test
  • 02
    .icon-icon-test1
  • 03
    .icon-icon-test2
  • 04
    .icon-icon-test3
  • 05
    .icon-icon-test4
  • 06
    .icon-icon-test5
  • 07
    .icon-icon-test6
  • 08
    .icon-icon-test7
  • 09
    .icon-icon-test8
  • 0
    .icon-icon-test9
  • yin zhuan qing
    .icon-yinzhuanqing
  • finesvg
    .icon-finesvg
  • yintian
    .icon-yintian
  • xiayu
    .icon-xiayu
  • pu tong
    .icon-putong
  • erweima
    .icon-erweima
  • dingdan
    .icon-dingdan
  • wodeqianbao
    .icon-wodeqianbao
  • youhuiquan
    .icon-youhuiquan
  • changjianwenti
    .icon-changjianwenti
  • yu e
    .icon-yue
  • jifen
    .icon-jifen
  • yucunkuan
    .icon-yucunkuan
  • shouyi
    .icon-shouyi
  • yijianfankui
    .icon-yijianfankui
  • dianzifapiao
    .icon-dianzifapiao-copy
  • p3
    .icon-p
  • shoucang
    .icon-shoucang
  • shezhi
    .icon-shezhi
  • kefu
    .icon-kefu
  • che
    .icon-che
  • zhifubao
    .icon-zhifubao
  • weixin
    .icon-weixin1
  • xia xue
    .icon-xiaxue
  • ditu
    .icon-ditu
  • tupian
    .icon-tupian
  • shengyuchewei
    .icon-shengyuchewei
  • yejianmoshi
    .icon-yejianmoshi
  • xinxi fankui
    .icon-xinxifankui
  • zuo
    .icon-zuo
  • you
    .icon-you
  • dui
    .icon-dui
  • xuanzhuan
    .icon-xuanzhuan
  • yinlian
    .icon-yinlian
  • yu e
    .icon-yue1
  • dianzifapiao
    .icon-dianzifapiao
  • 解绑
    .icon-jiebang
  • 5摄像头
    .icon-shexiangtou

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 银行卡
    #icon-yinxingqia3
  • yuyue
    #icon-yuyue
  • xinhao
    #icon-xinhao
  • yuyin
    #icon-yuyin
  • dingwei
    #icon-dingwei
  • fuwu
    #icon-fuwu
  • fujin
    #icon-fujin
  • jiantou
    #icon-jiantou
  • caidan
    #icon-caidan
  • wifi
    #icon-wifi
  • guanbi
    #icon-guanbi
  • wode
    #icon-wode
  • sousuo
    #icon-sousuo
  • 图标
    #icon-tubiao
  • kechongdian
    #icon-kechongdian
  • shouye
    #icon-shouye
  • gongxiang
    #icon-gongxiang
  • weibo
    #icon-weibo
  • weixin
    #icon-weixin
  • QQ
    #icon-QQ
  • weifachuli
    #icon-weifachuli
  • ji dong che yu yue
    #icon-jidongcheyuyue
  • sao
    #icon-sao
  • cheliang
    #icon-cheliang
  • fakuan
    #icon-fakuan
  • shigu
    #icon-shigu
  • mianjian
    #icon-mianjian
  • yishibuling
    #icon-yishibuling
  • qimanhuanzheng
    #icon-qimanhuanzheng
  • buhuanhaopai
    #icon-buhuanhaopai1
  • buhuanlinghangshizhe
    #icon-buhuanlinghangshizhe
  • 01
    #icon-icon-test
  • 02
    #icon-icon-test1
  • 03
    #icon-icon-test2
  • 04
    #icon-icon-test3
  • 05
    #icon-icon-test4
  • 06
    #icon-icon-test5
  • 07
    #icon-icon-test6
  • 08
    #icon-icon-test7
  • 09
    #icon-icon-test8
  • 0
    #icon-icon-test9
  • yin zhuan qing
    #icon-yinzhuanqing
  • finesvg
    #icon-finesvg
  • yintian
    #icon-yintian
  • xiayu
    #icon-xiayu
  • pu tong
    #icon-putong
  • erweima
    #icon-erweima
  • dingdan
    #icon-dingdan
  • wodeqianbao
    #icon-wodeqianbao
  • youhuiquan
    #icon-youhuiquan
  • changjianwenti
    #icon-changjianwenti
  • yu e
    #icon-yue
  • jifen
    #icon-jifen
  • yucunkuan
    #icon-yucunkuan
  • shouyi
    #icon-shouyi
  • yijianfankui
    #icon-yijianfankui
  • dianzifapiao
    #icon-dianzifapiao-copy
  • p3
    #icon-p
  • shoucang
    #icon-shoucang
  • shezhi
    #icon-shezhi
  • kefu
    #icon-kefu
  • che
    #icon-che
  • zhifubao
    #icon-zhifubao
  • weixin
    #icon-weixin1
  • xia xue
    #icon-xiaxue
  • ditu
    #icon-ditu
  • tupian
    #icon-tupian
  • shengyuchewei
    #icon-shengyuchewei
  • yejianmoshi
    #icon-yejianmoshi
  • xinxi fankui
    #icon-xinxifankui
  • zuo
    #icon-zuo
  • you
    #icon-you
  • dui
    #icon-dui
  • xuanzhuan
    #icon-xuanzhuan
  • yinlian
    #icon-yinlian
  • yu e
    #icon-yue1
  • dianzifapiao
    #icon-dianzifapiao
  • 解绑
    #icon-jiebang
  • 5摄像头
    #icon-shexiangtou

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>