• send
    
  • eqp
    
  • eqpyellow
    
  • 公告
    
  • 睁眼
    
  • liwu
    
  • Facebook
    
  • telegram
    
  • Twitter
    
  • weibo
    
  • 退出
    
  • APP-下载
    
  • 修改:填写
    
  • 账户信息
    
  • 通知
    
  • 个人中心
    
  • 闭眼
    
  • 闪电
    
  • 支付宝
    
  • 微信
    
  • 银联
    
  • 疑问-icon
    
  • 灯泡
    
  • 手机号
    
  • 资金密码
    
  • 谷歌验证
    
  • 登录密码
    
  • 时间
    
  • 在线交谈
    
  • 信号
    
  • 在线人数
    
  • 搜索
    
  • 提示-填充
    
  • 向下-填充
    
  • 向上-填充
    
  • 爱心-实心
    
  • 爱心-空
    
  • 下一步
    
  • 放大
    
  • 缩小
    
  • 全屏
    
  • 方-选中
    
  • 方-未选中
    
  • 暂无数据-填充
    
  • 列表
    
  • 短信验证
    
  • 邀请人svg
    
  • 地区
    
  • 向下-线
    
  • 买卖盘
    
  • 卖盘
    
  • 买盘
    
  • 刷新
    
  • 二维码登录
    
  • 电脑登录
    
  • 添加
    
  • 减去
    
  • 双箭头svg
    
  • 提示-线
    
  • 警告-线
    
  • 错误-线
    
  • 成功-线
    
  • 成功-填充
    
  • 错误-填充
    
  • 警告-填充
    
  • 复制
    
  • 没有
    
  • 拥有
    
  • 下一步2
    
  • USDT
    
  • ETH
    
  • 火热
    
  • 双向箭头
    
  • 支付方式-选中
    
  • 消息提示-填充
    
  • 文章-分享
    
  • 时间-填充
    
  • 复制-填充
    
  • 微博-彩色
    
  • 看多
    
  • 看空
    
  • APP-关闭
    
  • 系统消息-未读
    
  • 系统消息-已读
    
  • 一键置顶
    
  • 验证等待中
    
  • 绑定收款方式
    
  • 通过实名认证
    
  • 设定资金密码
    
  • 点击已付款
    
  • 等待卖家放币svg
    
  • 下订单并支付
    
  • 选择广告类型
    
  • KYC认证-箭头
    
  • 看多
    
  • 文章-分享
    
  • 看空
    
  • 看多-填充
    
  • 看空-填充
    
  • 闪电
    
  • 二维码
    
  • 删除-icon
    
  • 暂无记录-2
    
  • BTC-填充
    
  • USDT-填充
    
  • ETH-填充
    
  • BTC
    
  • K-线setting
    
  • K线-quota
    
  • API
    
  • 添加-填充
    
  • 减去-填充
    

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"。

  • send
    .icon-send
  • eqp
    .icon-eqp
  • eqpyellow
    .icon-eqpyellow
  • 公告
    .icon-gonggao
  • 睁眼
    .icon-zhengyan
  • liwu
    .icon-liwu
  • Facebook
    .icon-Facebook
  • telegram
    .icon-telegram
  • Twitter
    .icon-Twitter
  • weibo
    .icon-weibo
  • 退出
    .icon-tuichu
  • APP-下载
    .icon-APP-xiazai
  • 修改:填写
    .icon-xiugaitianxie
  • 账户信息
    .icon-zhanghuxinxi
  • 通知
    .icon-tongzhi
  • 个人中心
    .icon-gerenzhongxin
  • 闭眼
    .icon-biyan
  • 闪电
    .icon-shandian
  • 支付宝
    .icon-zhifubao
  • 微信
    .icon-weixin
  • 银联
    .icon-yinlian
  • 疑问-icon
    .icon-yiwen-icon
  • 灯泡
    .icon-dengpao
  • 手机号
    .icon-shoujihao
  • 资金密码
    .icon-zijinmima
  • 谷歌验证
    .icon-gugeyanzheng
  • 登录密码
    .icon-denglumima
  • 时间
    .icon-shijian
  • 在线交谈
    .icon-zaixianjiaotan
  • 信号
    .icon-xinhao
  • 在线人数
    .icon-zaixianrenshu
  • 搜索
    .icon-sousuo
  • 提示-填充
    .icon-tishi-tianchong
  • 向下-填充
    .icon-xiangxia-tianchong
  • 向上-填充
    .icon-xiangshang-tianchong
  • 爱心-实心
    .icon-aixin-shixin
  • 爱心-空
    .icon-aixin-kong
  • 下一步
    .icon-xiayibu
  • 放大
    .icon-fangda
  • 缩小
    .icon-suoxiao
  • 全屏
    .icon-quanping
  • 方-选中
    .icon-fang-xuanzhong
  • 方-未选中
    .icon-fang-weixuanzhong
  • 暂无数据-填充
    .icon-zanwushuju-tianchong
  • 列表
    .icon-liebiao
  • 短信验证
    .icon-duanxinyanzheng
  • 邀请人svg
    .icon-yaoqingrensvg
  • 地区
    .icon-diqu
  • 向下-线
    .icon-xiangxia-xian
  • 买卖盘
    .icon-maimaipan1
  • 卖盘
    .icon-maipan2
  • 买盘
    .icon-maipan3
  • 刷新
    .icon-shuaxin
  • 二维码登录
    .icon-erweimadenglu
  • 电脑登录
    .icon-diannaodenglu
  • 添加
    .icon-tianjia
  • 减去
    .icon-jianqu
  • 双箭头svg
    .icon-shuangjiantousvg
  • 提示-线
    .icon-tishi-xian
  • 警告-线
    .icon-jinggao-xian
  • 错误-线
    .icon-cuowu-xian
  • 成功-线
    .icon-chenggong-xian
  • 成功-填充
    .icon-chenggong-tianchong
  • 错误-填充
    .icon-cuowu-tianchong
  • 警告-填充
    .icon-jinggao-tianchong
  • 复制
    .icon-fuzhi
  • 没有
    .icon-meiyou
  • 拥有
    .icon-yongyou
  • 下一步2
    .icon-xiayibu1
  • USDT
    .icon-USDT
  • ETH
    .icon-ETH
  • 火热
    .icon-huore
  • 双向箭头
    .icon-shuangxiangjiantou
  • 支付方式-选中
    .icon-zhifufangshi-xuanzhong
  • 消息提示-填充
    .icon-xiaoxitishi-tianchong
  • 文章-分享
    .icon-wenzhang-fenxiang
  • 时间-填充
    .icon-shijian-tianchong
  • 复制-填充
    .icon-fuzhi-tianchong
  • 微博-彩色
    .icon-weibo-caise
  • 看多
    .icon-kanduo
  • 看空
    .icon-kankong
  • APP-关闭
    .icon-APP-guanbi
  • 系统消息-未读
    .icon-xitongxiaoxi-weidu
  • 系统消息-已读
    .icon-xitongxiaoxi-yidu
  • 一键置顶
    .icon-yijianzhiding
  • 验证等待中
    .icon-yanzhengdengdaizhong
  • 绑定收款方式
    .icon-bangdingshoukuanfangshi
  • 通过实名认证
    .icon-tongguoshimingrenzheng
  • 设定资金密码
    .icon-shedingzijinmima
  • 点击已付款
    .icon-dianjiyifukuan
  • 等待卖家放币svg
    .icon-dengdaimaijiafangbisvg
  • 下订单并支付
    .icon-xiadingdanbingzhifu
  • 选择广告类型
    .icon-xuanzeguanggaoleixing
  • KYC认证-箭头
    .icon-KYCrenzheng-jiantou
  • 看多
    .icon-kanduo1
  • 文章-分享
    .icon-wenzhang-fenxiang1
  • 看空
    .icon-kankong1
  • 看多-填充
    .icon-kanduo-tianchong
  • 看空-填充
    .icon-kankong-tianchong
  • 闪电
    .icon-shandian1
  • 二维码
    .icon-erweima
  • 删除-icon
    .icon-shanchu-icon
  • 暂无记录-2
    .icon-zanwujilu-
  • BTC-填充
    .icon-BTC-tianchong
  • USDT-填充
    .icon-USDT-tianchong
  • ETH-填充
    .icon-ETH-tianchong
  • BTC
    .icon-BTC
  • K-线setting
    .icon-K-xiansetting
  • K线-quota
    .icon-Kxian-quota
  • API
    .icon-API
  • 添加-填充
    .icon-tianjia-tianchong
  • 减去-填充
    .icon-jianqu-tianchong

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"。

  • send
    #icon-send
  • eqp
    #icon-eqp
  • eqpyellow
    #icon-eqpyellow
  • 公告
    #icon-gonggao
  • 睁眼
    #icon-zhengyan
  • liwu
    #icon-liwu
  • Facebook
    #icon-Facebook
  • telegram
    #icon-telegram
  • Twitter
    #icon-Twitter
  • weibo
    #icon-weibo
  • 退出
    #icon-tuichu
  • APP-下载
    #icon-APP-xiazai
  • 修改:填写
    #icon-xiugaitianxie
  • 账户信息
    #icon-zhanghuxinxi
  • 通知
    #icon-tongzhi
  • 个人中心
    #icon-gerenzhongxin
  • 闭眼
    #icon-biyan
  • 闪电
    #icon-shandian
  • 支付宝
    #icon-zhifubao
  • 微信
    #icon-weixin
  • 银联
    #icon-yinlian
  • 疑问-icon
    #icon-yiwen-icon
  • 灯泡
    #icon-dengpao
  • 手机号
    #icon-shoujihao
  • 资金密码
    #icon-zijinmima
  • 谷歌验证
    #icon-gugeyanzheng
  • 登录密码
    #icon-denglumima
  • 时间
    #icon-shijian
  • 在线交谈
    #icon-zaixianjiaotan
  • 信号
    #icon-xinhao
  • 在线人数
    #icon-zaixianrenshu
  • 搜索
    #icon-sousuo
  • 提示-填充
    #icon-tishi-tianchong
  • 向下-填充
    #icon-xiangxia-tianchong
  • 向上-填充
    #icon-xiangshang-tianchong
  • 爱心-实心
    #icon-aixin-shixin
  • 爱心-空
    #icon-aixin-kong
  • 下一步
    #icon-xiayibu
  • 放大
    #icon-fangda
  • 缩小
    #icon-suoxiao
  • 全屏
    #icon-quanping
  • 方-选中
    #icon-fang-xuanzhong
  • 方-未选中
    #icon-fang-weixuanzhong
  • 暂无数据-填充
    #icon-zanwushuju-tianchong
  • 列表
    #icon-liebiao
  • 短信验证
    #icon-duanxinyanzheng
  • 邀请人svg
    #icon-yaoqingrensvg
  • 地区
    #icon-diqu
  • 向下-线
    #icon-xiangxia-xian
  • 买卖盘
    #icon-maimaipan1
  • 卖盘
    #icon-maipan2
  • 买盘
    #icon-maipan3
  • 刷新
    #icon-shuaxin
  • 二维码登录
    #icon-erweimadenglu
  • 电脑登录
    #icon-diannaodenglu
  • 添加
    #icon-tianjia
  • 减去
    #icon-jianqu
  • 双箭头svg
    #icon-shuangjiantousvg
  • 提示-线
    #icon-tishi-xian
  • 警告-线
    #icon-jinggao-xian
  • 错误-线
    #icon-cuowu-xian
  • 成功-线
    #icon-chenggong-xian
  • 成功-填充
    #icon-chenggong-tianchong
  • 错误-填充
    #icon-cuowu-tianchong
  • 警告-填充
    #icon-jinggao-tianchong
  • 复制
    #icon-fuzhi
  • 没有
    #icon-meiyou
  • 拥有
    #icon-yongyou
  • 下一步2
    #icon-xiayibu1
  • USDT
    #icon-USDT
  • ETH
    #icon-ETH
  • 火热
    #icon-huore
  • 双向箭头
    #icon-shuangxiangjiantou
  • 支付方式-选中
    #icon-zhifufangshi-xuanzhong
  • 消息提示-填充
    #icon-xiaoxitishi-tianchong
  • 文章-分享
    #icon-wenzhang-fenxiang
  • 时间-填充
    #icon-shijian-tianchong
  • 复制-填充
    #icon-fuzhi-tianchong
  • 微博-彩色
    #icon-weibo-caise
  • 看多
    #icon-kanduo
  • 看空
    #icon-kankong
  • APP-关闭
    #icon-APP-guanbi
  • 系统消息-未读
    #icon-xitongxiaoxi-weidu
  • 系统消息-已读
    #icon-xitongxiaoxi-yidu
  • 一键置顶
    #icon-yijianzhiding
  • 验证等待中
    #icon-yanzhengdengdaizhong
  • 绑定收款方式
    #icon-bangdingshoukuanfangshi
  • 通过实名认证
    #icon-tongguoshimingrenzheng
  • 设定资金密码
    #icon-shedingzijinmima
  • 点击已付款
    #icon-dianjiyifukuan
  • 等待卖家放币svg
    #icon-dengdaimaijiafangbisvg
  • 下订单并支付
    #icon-xiadingdanbingzhifu
  • 选择广告类型
    #icon-xuanzeguanggaoleixing
  • KYC认证-箭头
    #icon-KYCrenzheng-jiantou
  • 看多
    #icon-kanduo1
  • 文章-分享
    #icon-wenzhang-fenxiang1
  • 看空
    #icon-kankong1
  • 看多-填充
    #icon-kanduo-tianchong
  • 看空-填充
    #icon-kankong-tianchong
  • 闪电
    #icon-shandian1
  • 二维码
    #icon-erweima
  • 删除-icon
    #icon-shanchu-icon
  • 暂无记录-2
    #icon-zanwujilu-
  • BTC-填充
    #icon-BTC-tianchong
  • USDT-填充
    #icon-USDT-tianchong
  • ETH-填充
    #icon-ETH-tianchong
  • BTC
    #icon-BTC
  • K-线setting
    #icon-K-xiansetting
  • K线-quota
    #icon-Kxian-quota
  • API
    #icon-API
  • 添加-填充
    #icon-tianjia-tianchong
  • 减去-填充
    #icon-jianqu-tianchong

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>