• 自定义菜单
    
  • 富文本
    
  • 种草社区
    
  • 预售
    
  • 小程序直播
    
  • 关注公众号
    
  • 专题
    
  • 辅助空白
    
  • 助力
    
  • 搜索框
    
  • 秒杀
    
  • 推荐组
    
  • 导航组
    
  • 拼团
    
  • 商品列表
    
  • 商品分类
    
  • 新闻播报
    
  • 优惠券
    
  • 辅助线
    
  • 在线客服
    
  • 标题
    
  • 轮播图
    
  • 图片魔方
    
  • 版权
    
  • 菜单收起
    
  • 菜单展开
    
  • 订单
    
  • app
    
  • PC
    
  • 小程序
    
  • 公众号
    
  • h5
    
  • 视频
    
  • 切换会员
    
  • 挂单
    
  • 核销订单金额
    
  • 门店订单金额
    
  • 门店成交用户数
    
  • 付费会员金额
    
  • 收银订单金额
    
  • 门店新增用户数
    
  • 会员卡激活数
    
  • 新增用户数
    
  • 分配订单金额
    
  • 余额消耗金额
    
  • 二维码-新个人中心
    
  • 回删
    
  • 商品数量-加
    
  • 商品数量-减
    
  • 图片广告
    
  • 搜素框
    
  • 文章列表
    
  • 拼团
    
  • 商品列表
    
  • 优惠券
    
  • 小程序直播
    
  • 秒杀
    
  • 新闻播报
    
  • 导航组
    
  • 标题
    
  • 分类导航
    
  • 促销列表
    
  • 辅助空白
    
  • 活动魔方
    
  • 关注公众号
    
  • 砍价
    
  • 辅助线
    
  • 客服
    
  • 富文本
    
  • 单图
    
  • 拉伸
    
  • 平铺
    
  • 售后-退款-蓝
    
  • 代付款-蓝
    
  • 待收货-蓝
    
  • 待评价-蓝
    
  • 待发货-蓝
    
  • 待付款-橘
    
  • 售后-退款-橘
    
  • 待收货-橘
    
  • 待评价-橘
    
  • 待发货-橘
    
  • 待评价-粉
    
  • 待收货-粉
    
  • 代付款-粉
    
  • 待发货-粉
    
  • 售后:退款-粉
    
  • 待发货-绿
    
  • 待收货-绿
    
  • 代付款-绿
    
  • 待评价-绿
    
  • 售后-退款-绿
    
  • 待付款
    
  • 待评价
    
  • 售后_退款
    
  • 待发货
    
  • 待收货
    
  • 设置
    
  • s-客服
    
  • 多行
    
  • 4个
    
  • 5个
    
  • 大圆角
    
  • 3个
    
  • 单行
    
  • 左右图文
    
  • 样式8
    
  • 样式9
    
  • 样式1
    
  • 样式4
    
  • 样式5
    
  • 样式6
    
  • 样式2
    
  • 样式7
    
  • 样式3
    
  • 数字
    
  • 禁用
    
  • 4个
    
  • 3个
    
  • 5个
    
  • 2行
    
  • 3行
    
  • 4行
    
  • 下移
    
  • 上移
    
  • 删除
    
  • 复制
    
  • 最新
    
  • 选中
    
  • 添加
    
  • 编辑
    
  • 更多展开
    
  • 图片
    
  • 表情
    
  • 话术
    
  • 商品退款金额
    
  • 交易金额
    
  • 余额支付金额
    
  • 支付佣金金额
    
  • 线下收银金额
    
  • 聊天
    
  • 编辑 (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 是字体在网页端最原始的应用方式,特点是:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1646274033698') format('woff2'),
       url('iconfont.woff?t=1646274033698') format('woff'),
       url('iconfont.ttf?t=1646274033698') format('truetype');
}

第二步:定义使用 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"。

  • 自定义菜单
    .iconzidingyicaidan
  • 富文本
    .iconfuwenben3
  • 种草社区
    .iconzhongcaoshequ1
  • 预售
    .iconyushou1
  • 小程序直播
    .iconxiaochengxuzhibo3
  • 关注公众号
    .iconguanzhugongzhonghao2
  • 专题
    .iconzhuanti
  • 辅助空白
    .iconfuzhukongbai2
  • 助力
    .iconzhuli
  • 搜索框
    .iconsousuokuang
  • 秒杀
    .iconmiaosha2
  • 推荐组
    .icontuijianzu
  • 导航组
    .icondaohangzu2
  • 拼团
    .iconpintuan2
  • 商品列表
    .iconshangpinliebiao2
  • 商品分类
    .iconshangpinfenlei
  • 新闻播报
    .iconxinwenbobao2
  • 优惠券
    .iconyouhuiquan2
  • 辅助线
    .iconfuzhuxian2
  • 在线客服
    .iconzaixiankefu
  • 标题
    .iconbiaoti2
  • 轮播图
    .iconlunbotu
  • 图片魔方
    .icontupianmofang
  • 版权
    .iconbanquan
  • 菜单收起
    .iconcaidanshouqi
  • 菜单展开
    .iconcaidanzhankai
  • 订单
    .icondingdan
  • app
    .iconapp
  • PC
    .iconPC
  • 小程序
    .iconxiaochengxu
  • 公众号
    .icongongzhonghao
  • h5
    .iconh5
  • 视频
    .iconshipin
  • 切换会员
    .iconqiehuanhuiyuan
  • 挂单
    .iconguadan
  • 核销订单金额
    .iconhexiaodingdanjine
  • 门店订单金额
    .iconmendiandingdanjine
  • 门店成交用户数
    .iconmendianchengjiaoyonghushu
  • 付费会员金额
    .iconfufeihuiyuanjine
  • 收银订单金额
    .iconshouyindingdanjine
  • 门店新增用户数
    .iconmendianxinzengyonghushu
  • 会员卡激活数
    .iconhuiyuankajihuoshu
  • 新增用户数
    .iconxinzengyonghushu1
  • 分配订单金额
    .iconfenpeidingdanjine
  • 余额消耗金额
    .iconyuexiaohaojine
  • 二维码-新个人中心
    .iconerweima-xingerenzhongxin
  • 回删
    .iconhuishan
  • 商品数量-加
    .iconshangpinshuliang-jia
  • 商品数量-减
    .iconshangpinshuliang-jian
  • 图片广告
    .icontupianguanggao1
  • 搜素框
    .iconsousukuang1
  • 文章列表
    .iconwenzhangliebiao1
  • 拼团
    .iconpintuan1
  • 商品列表
    .iconshangpinliebiao1
  • 优惠券
    .iconyouhuiquan1
  • 小程序直播
    .iconxiaochengxuzhibo1
  • 秒杀
    .iconmiaosha1
  • 新闻播报
    .iconxinwenbobao1
  • 导航组
    .icondaohangzu1
  • 标题
    .iconbiaoti1
  • 分类导航
    .iconfenleidaohang1
  • 促销列表
    .iconcuxiaoliebiao1
  • 辅助空白
    .iconfuzhukongbai1
  • 活动魔方
    .iconhuodongmofang1
  • 关注公众号
    .iconguanzhugongzhonghao1
  • 砍价
    .iconkanjia1
  • 辅助线
    .iconfuzhuxian1
  • 客服
    .iconkefu1
  • 富文本
    .iconfuwenben1
  • 单图
    .icondantu
  • 拉伸
    .iconlashen
  • 平铺
    .iconpingpu
  • 售后-退款-蓝
    .iconshouhou-tuikuan-lan
  • 代付款-蓝
    .icondaifukuan-lan
  • 待收货-蓝
    .icondaishouhuo-lan
  • 待评价-蓝
    .icondaipingjia-lan
  • 待发货-蓝
    .icondaifahuo-lan
  • 待付款-橘
    .icondaifukuan-ju
  • 售后-退款-橘
    .iconshouhou-tuikuan-ju
  • 待收货-橘
    .icondaishouhuo-ju
  • 待评价-橘
    .icondaipingjia-ju
  • 待发货-橘
    .icondaifahuo-ju
  • 待评价-粉
    .icondaipingjia-fen
  • 待收货-粉
    .icondaishouhuo-fen
  • 代付款-粉
    .icondaifukuan-fen
  • 待发货-粉
    .icondaifahuo-fen
  • 售后:退款-粉
    .icona-shouhoutuikuan-fen
  • 待发货-绿
    .icondaifahuo-lv
  • 待收货-绿
    .icondaishouhuo-lv
  • 代付款-绿
    .icondaifukuan-lv
  • 待评价-绿
    .icondaipingjia-lv
  • 售后-退款-绿
    .iconshouhou-tuikuan-lv
  • 待付款
    .icondaifukuan1
  • 待评价
    .icondaipingjia1
  • 售后_退款
    .iconshouhou_tuikuan
  • 待发货
    .icondaifahuo1
  • 待收货
    .icondaishouhuo1
  • 设置
    .iconshezhi
  • s-客服
    .icons-kefu
  • 多行
    .iconduohang
  • 4个
    .icon4ge1
  • 5个
    .icon5ge1
  • 大圆角
    .icondayuanjiao
  • 3个
    .icon3ge1
  • 单行
    .icondanhang
  • 左右图文
    .iconzuoyoutuwen
  • 样式8
    .iconyangshi8
  • 样式9
    .iconyangshi9
  • 样式1
    .iconyangshi1
  • 样式4
    .iconyangshi4
  • 样式5
    .iconyangshi5
  • 样式6
    .iconyangshi6
  • 样式2
    .iconyangshi2
  • 样式7
    .iconyangshi7
  • 样式3
    .iconyangshi3
  • 数字
    .iconshuzi
  • 禁用
    .iconjinyong
  • 4个
    .icon4ge
  • 3个
    .icon3ge
  • 5个
    .icon5ge
  • 2行
    .icon2hang
  • 3行
    .icon3hang
  • 4行
    .icon4hang
  • 下移
    .iconxiayi
  • 上移
    .iconshangyi
  • 删除
    .iconshanchu2
  • 复制
    .iconfuzhi
  • 最新
    .iconzuixin
  • 选中
    .iconxuanzhong6
  • 添加
    .icontianjia
  • 编辑
    .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 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

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

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

  • 自定义菜单
    #iconzidingyicaidan
  • 富文本
    #iconfuwenben3
  • 种草社区
    #iconzhongcaoshequ1
  • 预售
    #iconyushou1
  • 小程序直播
    #iconxiaochengxuzhibo3
  • 关注公众号
    #iconguanzhugongzhonghao2
  • 专题
    #iconzhuanti
  • 辅助空白
    #iconfuzhukongbai2
  • 助力
    #iconzhuli
  • 搜索框
    #iconsousuokuang
  • 秒杀
    #iconmiaosha2
  • 推荐组
    #icontuijianzu
  • 导航组
    #icondaohangzu2
  • 拼团
    #iconpintuan2
  • 商品列表
    #iconshangpinliebiao2
  • 商品分类
    #iconshangpinfenlei
  • 新闻播报
    #iconxinwenbobao2
  • 优惠券
    #iconyouhuiquan2
  • 辅助线
    #iconfuzhuxian2
  • 在线客服
    #iconzaixiankefu
  • 标题
    #iconbiaoti2
  • 轮播图
    #iconlunbotu
  • 图片魔方
    #icontupianmofang
  • 版权
    #iconbanquan
  • 菜单收起
    #iconcaidanshouqi
  • 菜单展开
    #iconcaidanzhankai
  • 订单
    #icondingdan
  • app
    #iconapp
  • PC
    #iconPC
  • 小程序
    #iconxiaochengxu
  • 公众号
    #icongongzhonghao
  • h5
    #iconh5
  • 视频
    #iconshipin
  • 切换会员
    #iconqiehuanhuiyuan
  • 挂单
    #iconguadan
  • 核销订单金额
    #iconhexiaodingdanjine
  • 门店订单金额
    #iconmendiandingdanjine
  • 门店成交用户数
    #iconmendianchengjiaoyonghushu
  • 付费会员金额
    #iconfufeihuiyuanjine
  • 收银订单金额
    #iconshouyindingdanjine
  • 门店新增用户数
    #iconmendianxinzengyonghushu
  • 会员卡激活数
    #iconhuiyuankajihuoshu
  • 新增用户数
    #iconxinzengyonghushu1
  • 分配订单金额
    #iconfenpeidingdanjine
  • 余额消耗金额
    #iconyuexiaohaojine
  • 二维码-新个人中心
    #iconerweima-xingerenzhongxin
  • 回删
    #iconhuishan
  • 商品数量-加
    #iconshangpinshuliang-jia
  • 商品数量-减
    #iconshangpinshuliang-jian
  • 图片广告
    #icontupianguanggao1
  • 搜素框
    #iconsousukuang1
  • 文章列表
    #iconwenzhangliebiao1
  • 拼团
    #iconpintuan1
  • 商品列表
    #iconshangpinliebiao1
  • 优惠券
    #iconyouhuiquan1
  • 小程序直播
    #iconxiaochengxuzhibo1
  • 秒杀
    #iconmiaosha1
  • 新闻播报
    #iconxinwenbobao1
  • 导航组
    #icondaohangzu1
  • 标题
    #iconbiaoti1
  • 分类导航
    #iconfenleidaohang1
  • 促销列表
    #iconcuxiaoliebiao1
  • 辅助空白
    #iconfuzhukongbai1
  • 活动魔方
    #iconhuodongmofang1
  • 关注公众号
    #iconguanzhugongzhonghao1
  • 砍价
    #iconkanjia1
  • 辅助线
    #iconfuzhuxian1
  • 客服
    #iconkefu1
  • 富文本
    #iconfuwenben1
  • 单图
    #icondantu
  • 拉伸
    #iconlashen
  • 平铺
    #iconpingpu
  • 售后-退款-蓝
    #iconshouhou-tuikuan-lan
  • 代付款-蓝
    #icondaifukuan-lan
  • 待收货-蓝
    #icondaishouhuo-lan
  • 待评价-蓝
    #icondaipingjia-lan
  • 待发货-蓝
    #icondaifahuo-lan
  • 待付款-橘
    #icondaifukuan-ju
  • 售后-退款-橘
    #iconshouhou-tuikuan-ju
  • 待收货-橘
    #icondaishouhuo-ju
  • 待评价-橘
    #icondaipingjia-ju
  • 待发货-橘
    #icondaifahuo-ju
  • 待评价-粉
    #icondaipingjia-fen
  • 待收货-粉
    #icondaishouhuo-fen
  • 代付款-粉
    #icondaifukuan-fen
  • 待发货-粉
    #icondaifahuo-fen
  • 售后:退款-粉
    #icona-shouhoutuikuan-fen
  • 待发货-绿
    #icondaifahuo-lv
  • 待收货-绿
    #icondaishouhuo-lv
  • 代付款-绿
    #icondaifukuan-lv
  • 待评价-绿
    #icondaipingjia-lv
  • 售后-退款-绿
    #iconshouhou-tuikuan-lv
  • 待付款
    #icondaifukuan1
  • 待评价
    #icondaipingjia1
  • 售后_退款
    #iconshouhou_tuikuan
  • 待发货
    #icondaifahuo1
  • 待收货
    #icondaishouhuo1
  • 设置
    #iconshezhi
  • s-客服
    #icons-kefu
  • 多行
    #iconduohang
  • 4个
    #icon4ge1
  • 5个
    #icon5ge1
  • 大圆角
    #icondayuanjiao
  • 3个
    #icon3ge1
  • 单行
    #icondanhang
  • 左右图文
    #iconzuoyoutuwen
  • 样式8
    #iconyangshi8
  • 样式9
    #iconyangshi9
  • 样式1
    #iconyangshi1
  • 样式4
    #iconyangshi4
  • 样式5
    #iconyangshi5
  • 样式6
    #iconyangshi6
  • 样式2
    #iconyangshi2
  • 样式7
    #iconyangshi7
  • 样式3
    #iconyangshi3
  • 数字
    #iconshuzi
  • 禁用
    #iconjinyong
  • 4个
    #icon4ge
  • 3个
    #icon3ge
  • 5个
    #icon5ge
  • 2行
    #icon2hang
  • 3行
    #icon3hang
  • 4行
    #icon4hang
  • 下移
    #iconxiayi
  • 上移
    #iconshangyi
  • 删除
    #iconshanchu2
  • 复制
    #iconfuzhi
  • 最新
    #iconzuixin
  • 选中
    #iconxuanzhong6
  • 添加
    #icontianjia
  • 编辑
    #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>