• 
  • opposite
    
  • menu
    
  • ios-plus
    
  • 订单管理
    
  • 正常选项
    
  • 手机
    
  • 眼睛
    
  • 
  • 充值-预付款管理
    
  • 
  • 警示
    
  • 关闭
    
  • 箭头
    
  • 箭头2
    
  • 箭头3
    
  • 箭头4
    
  • 删除
    
  • 收藏
    
  • 用户
    
  • 正确
    
  • 提现(1)
    
  • 金币
    
  • 星星空
    
  • 星星满
    
  • 金融&货币-1
    
  • 眼睛-闭
    
  • 上传图片_l
    
  • time
    
  • add
    
  • 操作-关闭
    
  • 公告
    
  • 向上箭头
    
  • 
  • 向上箭头
    
  • 箭头
    
  • 
  • 银联
    
  • 微信 支付
    
  • 人物
    
  • 首页
    
  • 邀请
    
  • 外币-资金池划转
    
  • 时间
    
  • plus
    
  • 行情
    
  • 邮箱
    
  • list
    
  • 验证设置
    
  • 搜索
    
  • 资产
    
  • 添加
    
  • 密码
    
  • 上下箭头
    
  • 设置
    
  • 二维码
    
  • yes_fill
    
  • 成功
    
  • 安全
    
  • 删除
    
  • btc-01
    
  • scan
    
  • 支付宝
    
  • icon_shuaix
    
  • 关 闭
    
  • 警示
    
  • 法币
    
  • 法币
    
  • chat
    
  • home
    
  • home2
    
  • zichan2
    
  • zichan
    
  • fabi2
    
  • fabi
    
  • bibi2
    
  • bibi
    
  • hangqing2
    
  • hangqing
    
  • gonggao
    
  • hangqing
    
  • 两层icon
    
  • home
    
  • home2
    
  • fabi
    
  • zichan
    
  • 圈圈
    
  • 币币订单
    
  • 场外订单
    
  • 邀请管理
    
  • 建议
    
  • 设置
    
  • 公告
    
  • 上币申请
    
  • 安全
    
  • 安全
    
  • 币币订单
    
  • 充币2
    
  • 划转
    
  • 提币2
    
  • 筛选
    

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-jia1
  • opposite
    .icon-opposite
  • menu
    .icon-menu
  • ios-plus
    .icon-iosplus
  • 订单管理
    .icon-order
  • 正常选项
    .icon-normal
  • 手机
    .icon-phone
  • 眼睛
    .icon-see
  • .icon-yuan1
  • 充值-预付款管理
    .icon-recharge
  • .icon-yuan
  • 警示
    .icon-Warning
  • 关闭
    .icon-guanbi
  • 箭头
    .icon-left
  • 箭头2
    .icon-down
  • 箭头3
    .icon-right
  • 箭头4
    .icon-top
  • 删除
    .icon-delect
  • 收藏
    .icon-collect
  • 用户
    .icon-user
  • 正确
    .icon-yes
  • 提现(1)
    .icon-withdraw
  • 金币
    .icon-jinbi
  • 星星空
    .icon-xingxingkong
  • 星星满
    .icon-xingxingman
  • 金融&货币-1
    .icon-otc
  • 眼睛-闭
    .icon-nosee
  • 上传图片_l
    .icon-shangchuantupian_l
  • time
    .icon-time1
  • add
    .icon-add
  • 操作-关闭
    .icon-close
  • 公告
    .icon-gonggao
  • 向上箭头
    .icon-xiangshangjiantou
  • .icon-jia
  • 向上箭头
    .icon-xiangshangjiantou1
  • 箭头
    .icon-arrow
  • .icon-jian
  • 银联
    .icon-pay-unionpay
  • 微信 支付
    .icon-weixinzhifu
  • 人物
    .icon-renwu
  • 首页
    .icon-home
  • 邀请
    .icon-invte
  • 外币-资金池划转
    .icon-change
  • 时间
    .icon-time
  • plus
    .icon-plus
  • 行情
    .icon-market
  • 邮箱
    .icon-email
  • list
    .icon-list
  • 验证设置
    .icon-yanzhengshezhi
  • 搜索
    .icon-sousuo
  • 资产
    .icon-account
  • 添加
    .icon-add1
  • 密码
    .icon-password
  • 上下箭头
    .icon-downup
  • 设置
    .icon-setting
  • 二维码
    .icon-erweima-copy
  • yes_fill
    .icon-yes_fill
  • 成功
    .icon-chenggong
  • 安全
    .icon-secuty
  • 删除
    .icon-delete
  • btc-01
    .icon-trade
  • scan
    .icon-scan
  • 支付宝
    .icon-zhifubao
  • icon_shuaix
    .icon-icon_shuaix1
  • 关 闭
    .icon-cricle-close
  • 警示
    .icon-jingshi
  • 法币
    .icon-fabi1
  • 法币
    .icon-fabi
  • chat
    .icon-chat
  • home
    .icon-home1
  • home2
    .icon-home2
  • zichan2
    .icon-zichan
  • zichan
    .icon-zichan1
  • fabi2
    .icon-fabi3
  • fabi
    .icon-fabi4
  • bibi2
    .icon-bibi
  • bibi
    .icon-bibi1
  • hangqing2
    .icon-hangqing
  • hangqing
    .icon-hangqing1
  • gonggao
    .icon-gonggao1
  • hangqing
    .icon-hangqing2
  • 两层icon
    .icon-bibi2
  • home
    .icon-home3
  • home2
    .icon-home4
  • fabi
    .icon-fabi2
  • zichan
    .icon-zichan2
  • 圈圈
    .icon-quanquan
  • 币币订单
    .icon-bibidingdan
  • 场外订单
    .icon-changwaidingdan
  • 邀请管理
    .icon-yaoqingguanli
  • 建议
    .icon-jianyi
  • 设置
    .icon-shezhi
  • 公告
    .icon-gonggao3
  • 上币申请
    .icon-shangbishenqing1
  • 安全
    .icon-anquan
  • 安全
    .icon-anquan1
  • 币币订单
    .icon-bibidingdan1
  • 充币2
    .icon-chongbi
  • 划转
    .icon-huazhuan
  • 提币2
    .icon-tibi
  • 筛选
    .icon-shaixuan

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-jia1
  • opposite
    #icon-opposite
  • menu
    #icon-menu
  • ios-plus
    #icon-iosplus
  • 订单管理
    #icon-order
  • 正常选项
    #icon-normal
  • 手机
    #icon-phone
  • 眼睛
    #icon-see
  • #icon-yuan1
  • 充值-预付款管理
    #icon-recharge
  • #icon-yuan
  • 警示
    #icon-Warning
  • 关闭
    #icon-guanbi
  • 箭头
    #icon-left
  • 箭头2
    #icon-down
  • 箭头3
    #icon-right
  • 箭头4
    #icon-top
  • 删除
    #icon-delect
  • 收藏
    #icon-collect
  • 用户
    #icon-user
  • 正确
    #icon-yes
  • 提现(1)
    #icon-withdraw
  • 金币
    #icon-jinbi
  • 星星空
    #icon-xingxingkong
  • 星星满
    #icon-xingxingman
  • 金融&货币-1
    #icon-otc
  • 眼睛-闭
    #icon-nosee
  • 上传图片_l
    #icon-shangchuantupian_l
  • time
    #icon-time1
  • add
    #icon-add
  • 操作-关闭
    #icon-close
  • 公告
    #icon-gonggao
  • 向上箭头
    #icon-xiangshangjiantou
  • #icon-jia
  • 向上箭头
    #icon-xiangshangjiantou1
  • 箭头
    #icon-arrow
  • #icon-jian
  • 银联
    #icon-pay-unionpay
  • 微信 支付
    #icon-weixinzhifu
  • 人物
    #icon-renwu
  • 首页
    #icon-home
  • 邀请
    #icon-invte
  • 外币-资金池划转
    #icon-change
  • 时间
    #icon-time
  • plus
    #icon-plus
  • 行情
    #icon-market
  • 邮箱
    #icon-email
  • list
    #icon-list
  • 验证设置
    #icon-yanzhengshezhi
  • 搜索
    #icon-sousuo
  • 资产
    #icon-account
  • 添加
    #icon-add1
  • 密码
    #icon-password
  • 上下箭头
    #icon-downup
  • 设置
    #icon-setting
  • 二维码
    #icon-erweima-copy
  • yes_fill
    #icon-yes_fill
  • 成功
    #icon-chenggong
  • 安全
    #icon-secuty
  • 删除
    #icon-delete
  • btc-01
    #icon-trade
  • scan
    #icon-scan
  • 支付宝
    #icon-zhifubao
  • icon_shuaix
    #icon-icon_shuaix1
  • 关 闭
    #icon-cricle-close
  • 警示
    #icon-jingshi
  • 法币
    #icon-fabi1
  • 法币
    #icon-fabi
  • chat
    #icon-chat
  • home
    #icon-home1
  • home2
    #icon-home2
  • zichan2
    #icon-zichan
  • zichan
    #icon-zichan1
  • fabi2
    #icon-fabi3
  • fabi
    #icon-fabi4
  • bibi2
    #icon-bibi
  • bibi
    #icon-bibi1
  • hangqing2
    #icon-hangqing
  • hangqing
    #icon-hangqing1
  • gonggao
    #icon-gonggao1
  • hangqing
    #icon-hangqing2
  • 两层icon
    #icon-bibi2
  • home
    #icon-home3
  • home2
    #icon-home4
  • fabi
    #icon-fabi2
  • zichan
    #icon-zichan2
  • 圈圈
    #icon-quanquan
  • 币币订单
    #icon-bibidingdan
  • 场外订单
    #icon-changwaidingdan
  • 邀请管理
    #icon-yaoqingguanli
  • 建议
    #icon-jianyi
  • 设置
    #icon-shezhi
  • 公告
    #icon-gonggao3
  • 上币申请
    #icon-shangbishenqing1
  • 安全
    #icon-anquan
  • 安全
    #icon-anquan1
  • 币币订单
    #icon-bibidingdan1
  • 充币2
    #icon-chongbi
  • 划转
    #icon-huazhuan
  • 提币2
    #icon-tibi
  • 筛选
    #icon-shaixuan

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>