• 编辑
    
  • 更多展开
    
  • 图片
    
  • 表情
    
  • 话术
    
  • 商品退款金额
    
  • 交易金额
    
  • 余额支付金额
    
  • 支付佣金金额
    
  • 线下收银金额
    
  • 聊天
    
  • 编辑 (1)
    
  • 进入
    
  • 返回
    
  • 更多
    
  • 发送
    
  • 
  • 密码
    
  • 搜索
    
  • 手机
    
  • 退出
    
  • 商品信息
    
  • 账号
    
  • 表情
    
  • 更多展开
    
  • 话术
    
  • 图片
    
  • 添加 (1) (1)
    
  • 编辑 (1)
    
  • 设置 (1)
    
  • 删除
    
  • 加号
    
  • 
  • 删除
    
  • 编辑
    
  • 对号
    
  • 待评价
    
  • 待收货
    
  • 售后-退款
    
  • 待发货
    
  • 待付款
    
  • 转接
    
  • 浏览器
    
  • 访客数
    
  • 访问量
    
  • 成交用户数
    
  • 充值件数
    
  • 成本金额
    
  • 付费会员数
    
  • 充值用户数
    
  • 购买会员金额
    
  • 访客-支付转化率
    
  • 净增用户
    
  • 客单价
    
  • 加购件数
    
  • 累计充值用户
    
  • 累计成交用户
    
  • 累计会员数
    
  • 商品浏览量
    
  • 商品支付金额
    
  • 退款件数
    
  • 累计关注用户
    
  • 退款
    
  • 下单件数
    
  • 累计取关用户
    
  • 累计用户
    
  • 新增取关用户
    
  • 商品访客数
    
  • 新增用户数
    
  • 新增关注用户
    
  • 支付金额
    
  • 营业额
    
  • 支付件数
    
  • 支出金额
    
  • 关机
    
  • 声音 静音 线性
    
  • 声音
    
  • 关闭
    
  • 图片
    
  • 表情
    
  • 账号密码
    
  • 二维码
    
  • 矩形
    
  • 自动选择
    
  • 手动选择
    
  • 单列
    
  • 两列
    
  • 三列
    
  • 直播中
    
  • 已结束
    
  • 未开始
    
  • drag2
    
  • banner_3~
    
  • 小程序直播
    
  • Solid line
    
  • Dotted line
    
  • Dot line
    
  • drop-down
    
  • Dot
    
  • Square point
    
  • del_2
    
  • add to
    
  • del_1
    
  • drag
    
  • Comm_number
    
  • Comm_whole
    
  • Comm_Price
    
  • Pic_square
    
  • Pic_fillet
    
  • search_2
    
  • search_1
    
  • banner_2
    
  • Pic_small
    
  • Pic_big
    
  • banner_1
    
  • doc_skew
    
  • doc_bold
    
  • doc_general
    
  • five
    
  • Four
    
  • doc_center
    
  • doc_right
    
  • doc_left
    
  • 图片
    
  • 客服
    
  • 辅助线
    
  • 标题
    
  • 导航组
    
  • 辅助空白
    
  • 分类导航
    
  • 促销列表
    
  • 砍价
    
  • 关注公众号
    
  • 活动魔方
    
  • 富文本
    
  • 秒杀
    
  • 商品列表
    
  • 拼团
    
  • 搜素框
    
  • 图片广告
    
  • 新闻播报
    
  • 文章列表
    
  • 优惠券
    

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

  • 编辑
    .iconbianji2
  • 更多展开
    .icongengduozhankai1
  • 图片
    .icontupian3
  • 表情
    .iconbiaoqing2
  • 话术
    .iconhuashu1
  • 商品退款金额
    .iconshangpintuikuanjine
  • 交易金额
    .iconjiaoyijine
  • 余额支付金额
    .iconyuezhifujine
  • 支付佣金金额
    .iconzhifuyongjinjine
  • 线下收银金额
    .iconxianxiashouyinjine
  • 聊天
    .iconliaotian
  • 编辑 (1)
    .iconbianji11
  • 进入
    .iconjinru
  • 返回
    .iconfanhui
  • 更多
    .icongengduo
  • 发送
    .iconfasong
  • .iconcha1
  • 密码
    .iconmima
  • 搜索
    .iconsousuo
  • 手机
    .iconshouji
  • 退出
    .icontuichu
  • 商品信息
    .iconshangpinxinxi
  • 账号
    .iconzhanghao
  • 表情
    .iconbiaoqing
  • 更多展开
    .icongengduozhankai
  • 话术
    .iconhuashu
  • 图片
    .icontupian2
  • 添加 (1) (1)
    .icontianjia11
  • 编辑 (1)
    .iconbianji1
  • 设置 (1)
    .iconshezhi1
  • 删除
    .iconshanchu1
  • 加号
    .iconjiahao
  • .iconcha
  • 删除
    .iconshanchu
  • 编辑
    .iconbianji
  • 对号
    .iconduihao
  • 待评价
    .icondaipingjia
  • 待收货
    .icondaishouhuo
  • 售后-退款
    .iconshouhou-tuikuan
  • 待发货
    .icondaifahuo
  • 待付款
    .icondaifukuan
  • 转接
    .iconzhuanjie
  • 浏览器
    .iconliulanqi
  • 访客数
    .iconfangkeshu
  • 访问量
    .iconfangwenliang
  • 成交用户数
    .iconchengjiaoyonghushu
  • 充值件数
    .iconchongzhijianshu
  • 成本金额
    .iconchengbenjine
  • 付费会员数
    .iconfufeihuiyuanshu
  • 充值用户数
    .iconchongzhiyonghushu
  • 购买会员金额
    .icongoumaihuiyuanjine
  • 访客-支付转化率
    .iconfangke-zhifuzhuanhuashuai
  • 净增用户
    .iconjingzengyonghu
  • 客单价
    .iconkedanjia
  • 加购件数
    .iconjiagoujianshu
  • 累计充值用户
    .iconleijichongzhiyonghu
  • 累计成交用户
    .iconleijichengjiaoyonghu
  • 累计会员数
    .iconleijihuiyuanshu
  • 商品浏览量
    .iconshangpinliulanliang
  • 商品支付金额
    .iconshangpinzhifujine
  • 退款件数
    .icontuikuanjianshu
  • 累计关注用户
    .iconleijiguanzhuyonghu
  • 退款
    .icontuikuan
  • 下单件数
    .iconxiadanjianshu
  • 累计取关用户
    .iconleijiquguanyonghu
  • 累计用户
    .iconleijiyonghu
  • 新增取关用户
    .iconxinzengquguanyonghu
  • 商品访客数
    .iconshangpinfangkeshu
  • 新增用户数
    .iconxinzengyonghushu
  • 新增关注用户
    .iconxinzengguanzhuyonghu
  • 支付金额
    .iconzhifujine
  • 营业额
    .iconyingyee
  • 支付件数
    .iconzhifujianshu
  • 支出金额
    .iconzhichujine
  • 关机
    .iconguanji
  • 声音 静音 线性
    .iconshengyinjingyinxianxing
  • 声音
    .iconshengyinyinliang
  • 关闭
    .iconguanbi5
  • 图片
    .icontupian1
  • 表情
    .iconbiaoqing1
  • 账号密码
    .iconzhanghaomima
  • 二维码
    .iconerweima2
  • 矩形
    .iconjuxing
  • 自动选择
    .iconzidongxuanze
  • 手动选择
    .iconshoudongxuanze
  • 单列
    .icondanlie
  • 两列
    .iconlianglie
  • 三列
    .iconsanlie
  • 直播中
    .iconzhibozhong
  • 已结束
    .iconyijieshu
  • 未开始
    .iconweikaishi
  • drag2
    .icondrag2
  • banner_3~
    .iconbanner_3
  • 小程序直播
    .iconxiaochengxuzhibo
  • Solid line
    .iconSolidline
  • Dotted line
    .iconDottedline
  • Dot line
    .iconDotline
  • drop-down
    .icondrop-down
  • Dot
    .iconDot
  • Square point
    .iconSquarepoint
  • del_2
    .icondel_2
  • add to
    .iconaddto
  • del_1
    .icondel_1
  • drag
    .icondrag
  • Comm_number
    .iconComm_number
  • Comm_whole
    .iconComm_whole
  • Comm_Price
    .iconComm_Price
  • Pic_square
    .iconPic_square
  • Pic_fillet
    .iconPic_fillet
  • search_2
    .iconsearch_2
  • search_1
    .iconsearch_1
  • banner_2
    .iconbanner_2
  • Pic_small
    .iconPic_small
  • Pic_big
    .iconPic_big
  • banner_1
    .iconbanner_1
  • doc_skew
    .icondoc_skew
  • doc_bold
    .icondoc_bold
  • doc_general
    .icondoc_general
  • five
    .iconfive
  • Four
    .iconFour
  • doc_center
    .icondoc_center
  • doc_right
    .icondoc_right
  • doc_left
    .icondoc_left
  • 图片
    .icontupian
  • 客服
    .iconkefu
  • 辅助线
    .iconfuzhuxian
  • 标题
    .iconbiaoti
  • 导航组
    .icondaohangzu
  • 辅助空白
    .iconfuzhukongbai
  • 分类导航
    .iconfenleidaohang
  • 促销列表
    .iconcuxiaoliebiao
  • 砍价
    .iconkanjia
  • 关注公众号
    .iconguanzhugongzhonghao
  • 活动魔方
    .iconhuodongmofang
  • 富文本
    .iconfuwenben
  • 秒杀
    .iconmiaosha
  • 商品列表
    .iconshangpinliebiao
  • 拼团
    .iconpintuan
  • 搜素框
    .iconsousukuang
  • 图片广告
    .icontupianguanggao
  • 新闻播报
    .iconxinwenbobao
  • 文章列表
    .iconwenzhangliebiao
  • 优惠券
    .iconyouhuiquan

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

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

  • 编辑
    #iconbianji2
  • 更多展开
    #icongengduozhankai1
  • 图片
    #icontupian3
  • 表情
    #iconbiaoqing2
  • 话术
    #iconhuashu1
  • 商品退款金额
    #iconshangpintuikuanjine
  • 交易金额
    #iconjiaoyijine
  • 余额支付金额
    #iconyuezhifujine
  • 支付佣金金额
    #iconzhifuyongjinjine
  • 线下收银金额
    #iconxianxiashouyinjine
  • 聊天
    #iconliaotian
  • 编辑 (1)
    #iconbianji11
  • 进入
    #iconjinru
  • 返回
    #iconfanhui
  • 更多
    #icongengduo
  • 发送
    #iconfasong
  • #iconcha1
  • 密码
    #iconmima
  • 搜索
    #iconsousuo
  • 手机
    #iconshouji
  • 退出
    #icontuichu
  • 商品信息
    #iconshangpinxinxi
  • 账号
    #iconzhanghao
  • 表情
    #iconbiaoqing
  • 更多展开
    #icongengduozhankai
  • 话术
    #iconhuashu
  • 图片
    #icontupian2
  • 添加 (1) (1)
    #icontianjia11
  • 编辑 (1)
    #iconbianji1
  • 设置 (1)
    #iconshezhi1
  • 删除
    #iconshanchu1
  • 加号
    #iconjiahao
  • #iconcha
  • 删除
    #iconshanchu
  • 编辑
    #iconbianji
  • 对号
    #iconduihao
  • 待评价
    #icondaipingjia
  • 待收货
    #icondaishouhuo
  • 售后-退款
    #iconshouhou-tuikuan
  • 待发货
    #icondaifahuo
  • 待付款
    #icondaifukuan
  • 转接
    #iconzhuanjie
  • 浏览器
    #iconliulanqi
  • 访客数
    #iconfangkeshu
  • 访问量
    #iconfangwenliang
  • 成交用户数
    #iconchengjiaoyonghushu
  • 充值件数
    #iconchongzhijianshu
  • 成本金额
    #iconchengbenjine
  • 付费会员数
    #iconfufeihuiyuanshu
  • 充值用户数
    #iconchongzhiyonghushu
  • 购买会员金额
    #icongoumaihuiyuanjine
  • 访客-支付转化率
    #iconfangke-zhifuzhuanhuashuai
  • 净增用户
    #iconjingzengyonghu
  • 客单价
    #iconkedanjia
  • 加购件数
    #iconjiagoujianshu
  • 累计充值用户
    #iconleijichongzhiyonghu
  • 累计成交用户
    #iconleijichengjiaoyonghu
  • 累计会员数
    #iconleijihuiyuanshu
  • 商品浏览量
    #iconshangpinliulanliang
  • 商品支付金额
    #iconshangpinzhifujine
  • 退款件数
    #icontuikuanjianshu
  • 累计关注用户
    #iconleijiguanzhuyonghu
  • 退款
    #icontuikuan
  • 下单件数
    #iconxiadanjianshu
  • 累计取关用户
    #iconleijiquguanyonghu
  • 累计用户
    #iconleijiyonghu
  • 新增取关用户
    #iconxinzengquguanyonghu
  • 商品访客数
    #iconshangpinfangkeshu
  • 新增用户数
    #iconxinzengyonghushu
  • 新增关注用户
    #iconxinzengguanzhuyonghu
  • 支付金额
    #iconzhifujine
  • 营业额
    #iconyingyee
  • 支付件数
    #iconzhifujianshu
  • 支出金额
    #iconzhichujine
  • 关机
    #iconguanji
  • 声音 静音 线性
    #iconshengyinjingyinxianxing
  • 声音
    #iconshengyinyinliang
  • 关闭
    #iconguanbi5
  • 图片
    #icontupian1
  • 表情
    #iconbiaoqing1
  • 账号密码
    #iconzhanghaomima
  • 二维码
    #iconerweima2
  • 矩形
    #iconjuxing
  • 自动选择
    #iconzidongxuanze
  • 手动选择
    #iconshoudongxuanze
  • 单列
    #icondanlie
  • 两列
    #iconlianglie
  • 三列
    #iconsanlie
  • 直播中
    #iconzhibozhong
  • 已结束
    #iconyijieshu
  • 未开始
    #iconweikaishi
  • drag2
    #icondrag2
  • banner_3~
    #iconbanner_3
  • 小程序直播
    #iconxiaochengxuzhibo
  • Solid line
    #iconSolidline
  • Dotted line
    #iconDottedline
  • Dot line
    #iconDotline
  • drop-down
    #icondrop-down
  • Dot
    #iconDot
  • Square point
    #iconSquarepoint
  • del_2
    #icondel_2
  • add to
    #iconaddto
  • del_1
    #icondel_1
  • drag
    #icondrag
  • Comm_number
    #iconComm_number
  • Comm_whole
    #iconComm_whole
  • Comm_Price
    #iconComm_Price
  • Pic_square
    #iconPic_square
  • Pic_fillet
    #iconPic_fillet
  • search_2
    #iconsearch_2
  • search_1
    #iconsearch_1
  • banner_2
    #iconbanner_2
  • Pic_small
    #iconPic_small
  • Pic_big
    #iconPic_big
  • banner_1
    #iconbanner_1
  • doc_skew
    #icondoc_skew
  • doc_bold
    #icondoc_bold
  • doc_general
    #icondoc_general
  • five
    #iconfive
  • Four
    #iconFour
  • doc_center
    #icondoc_center
  • doc_right
    #icondoc_right
  • doc_left
    #icondoc_left
  • 图片
    #icontupian
  • 客服
    #iconkefu
  • 辅助线
    #iconfuzhuxian
  • 标题
    #iconbiaoti
  • 导航组
    #icondaohangzu
  • 辅助空白
    #iconfuzhukongbai
  • 分类导航
    #iconfenleidaohang
  • 促销列表
    #iconcuxiaoliebiao
  • 砍价
    #iconkanjia
  • 关注公众号
    #iconguanzhugongzhonghao
  • 活动魔方
    #iconhuodongmofang
  • 富文本
    #iconfuwenben
  • 秒杀
    #iconmiaosha
  • 商品列表
    #iconshangpinliebiao
  • 拼团
    #iconpintuan
  • 搜素框
    #iconsousukuang
  • 图片广告
    #icontupianguanggao
  • 新闻播报
    #iconxinwenbobao
  • 文章列表
    #iconwenzhangliebiao
  • 优惠券
    #iconyouhuiquan

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>