• search
    
  • search
    
  • xiajiantou
    
  • 三角下
    
  • 三角上
    
  • spxq_dp
    
  • dianpu
    
  • fenxiang
    
  • 举报
    
  • jubao
    
  • 店铺
    
  • 认证
    
  • 删除
    
  • 模块-目标-钥匙
    
  • help
    
  • 回复
    
  • PC-s-录音
    
  • 已过期
    
  • 钥匙icon
    
  • 招商
    
  • 举报
    
  • 钱包
    
  • 已使用
    
  • 未开通
    
  • 已开通
    
  • 下载
    
  • 评论
    
  • 话题
    
  • 图片
    
  • 举报
    
  • 下载
    
  • yy-circle
    
  • 复制
    
  • customer-service
    
  • 录音
    
  • 点赞
    
  • 设置
    
  • 我的卡券
    
  • 群蜂QQ空间
    
  • 朋友圈
    
  • 微信支付
    
  • 支付宝
    
  • 微信
    
  • qq
    
  • 分 享
    
  • 复制链接
    
  • 等级
    
  • 语音
    
  • 店铺
    
  • 消息
    
  • 订单
    
  • 店铺-fill
    
  • 添加
    
  • 赞_fill
    
  • 关注
    
  • 
  • 内网后台管理
    
  • 分享
    
  • 评论
    
  • 位置
    
  • 分享
    
  • 添加
    
  • 评论
    
  • 下游买家
    
  • 上游卖家
    
  • 相机
    
  • 语音2
    
  • 消息
    
  • 消息
    
  • 返回
    
  • 发布
    
  • 修改
    
  • 招商小程序-集成墙面
    
  • 新手引导
    
  • 相机
    
  • 订单处理
    
  • 数据
    
  • 投诉
    
  • 开黑房间-iCON_比赛-武器
    
  • 筛选
    
  • 卡券-01
    
  • 图片
    
  • 打招呼2
    
  • 参与话题
    
  • search
    
  • 客服
    
  • 我的订单
    
  • 选中角标
    
  • 设 置
    
  • tianjia
    
  • more
    
  • 云账号
    
  • 选中角标
    
  • kefu2
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1696570646298') format('woff2'),
       url('iconfont.woff?t=1696570646298') format('woff'),
       url('iconfont.ttf?t=1696570646298') 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"。

  • search
    .icon-search1
  • search
    .icon-search11
  • xiajiantou
    .icon-xiajiantou
  • 三角下
    .icon-sanjiaoxia
  • 三角上
    .icon-sanjiaoshang
  • spxq_dp
    .icon-spxq_dp
  • dianpu
    .icon-dianpu2
  • fenxiang
    .icon-fenxiang3
  • 举报
    .icon-jubao2
  • jubao
    .icon-jubao3
  • 店铺
    .icon-dianpu1
  • 认证
    .icon-renzheng
  • 删除
    .icon-shanchu
  • 模块-目标-钥匙
    .icon-key
  • help
    .icon-bangzhu
  • 回复
    .icon-huifu
  • PC-s-录音
    .icon-PC-s-luyin
  • 已过期
    .icon-yiguoqi
  • 钥匙icon
    .icon-yuechiicon
  • 招商
    .icon-zhaoshang
  • 举报
    .icon-jubao
  • 钱包
    .icon-qianbao1
  • 已使用
    .icon-yishiyong
  • 未开通
    .icon-weikaitong
  • 已开通
    .icon-yikaitong
  • 下载
    .icon-xiazai
  • 评论
    .icon-pinglun2
  • 话题
    .icon-huati
  • 图片
    .icon-tupianxiangcex
  • 举报
    .icon-jubao1
  • 下载
    .icon-xiazai1
  • yy-circle
    .icon-tubiaozhizuomoban-mian_quanzi
  • 复制
    .icon-fuzhi
  • customer-service
    .icon-customer-service
  • 录音
    .icon-luyin
  • 点赞
    .icon-xialingyingicon-21
  • 设置
    .icon-shezhi1
  • 我的卡券
    .icon-wodekaquan
  • 群蜂QQ空间
    .icon-qunfengqqkongjian
  • 朋友圈
    .icon-pengyouquan
  • 微信支付
    .icon-weixinzhifu
  • 支付宝
    .icon-z-alipay
  • 微信
    .icon-weixin
  • qq
    .icon-qq-copy
  • 分 享
    .icon-fenxiang2
  • 复制链接
    .icon-fuzhilianjie
  • 等级
    .icon-dengji
  • 语音
    .icon-yuyin1
  • 店铺
    .icon-dianpu
  • 消息
    .icon-xiaoxi
  • 订单
    .icon-dingdan
  • 店铺-fill
    .icon-dianpufill
  • 添加
    .icon-tianjia
  • 赞_fill
    .icon-zanfill
  • 关注
    .icon-xiazai13
  • .icon-icon_good
  • 内网后台管理
    .icon-houtai
  • 分享
    .icon-fenxiang
  • 评论
    .icon-pinglun
  • 位置
    .icon-weizhi
  • 分享
    .icon-fenxiang1
  • 添加
    .icon-tianjia1
  • 评论
    .icon-pinglun1
  • 下游买家
    .icon-xiayoumaijia
  • 上游卖家
    .icon-shangyoumaijia
  • 相机
    .icon-xiangji
  • 语音2
    .icon-yuyin
  • 消息
    .icon-xiaoxi1
  • 消息
    .icon-xiaoxi2
  • 返回
    .icon-fanhui2
  • 发布
    .icon-fabu
  • 修改
    .icon-xiugai
  • 招商小程序-集成墙面
    .icon-zhaoshangxiaochengxu-jichengqiangmian
  • 新手引导
    .icon-xinshouyindao
  • 相机
    .icon-xiangji1
  • 订单处理
    .icon-orderx-fill
  • 数据
    .icon-shuju
  • 投诉
    .icon-tousu
  • 开黑房间-iCON_比赛-武器
    .icon-kaiheifangjian-iCON_bisai-wuqi
  • 筛选
    .icon-shaixuan1
  • 卡券-01
    .icon-qiaquan-1
  • 图片
    .icon-tupian
  • 打招呼2
    .icon-dazhaohu
  • 参与话题
    .icon-canyuhuati
  • search
    .icon-search
  • 客服
    .icon-kefu
  • 我的订单
    .icon-74wodedingdan
  • 选中角标
    .icon-xuanzhongjiaobiao
  • 设 置
    .icon-shezhi
  • tianjia
    .icon-tianjia2
  • more
    .icon-more
  • 云账号
    .icon-yunzhanghao
  • 选中角标
    .icon-xuanzhongjiaobiao1
  • kefu2
    .icon-kefu2

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • search
    #icon-search1
  • search
    #icon-search11
  • xiajiantou
    #icon-xiajiantou
  • 三角下
    #icon-sanjiaoxia
  • 三角上
    #icon-sanjiaoshang
  • spxq_dp
    #icon-spxq_dp
  • dianpu
    #icon-dianpu2
  • fenxiang
    #icon-fenxiang3
  • 举报
    #icon-jubao2
  • jubao
    #icon-jubao3
  • 店铺
    #icon-dianpu1
  • 认证
    #icon-renzheng
  • 删除
    #icon-shanchu
  • 模块-目标-钥匙
    #icon-key
  • help
    #icon-bangzhu
  • 回复
    #icon-huifu
  • PC-s-录音
    #icon-PC-s-luyin
  • 已过期
    #icon-yiguoqi
  • 钥匙icon
    #icon-yuechiicon
  • 招商
    #icon-zhaoshang
  • 举报
    #icon-jubao
  • 钱包
    #icon-qianbao1
  • 已使用
    #icon-yishiyong
  • 未开通
    #icon-weikaitong
  • 已开通
    #icon-yikaitong
  • 下载
    #icon-xiazai
  • 评论
    #icon-pinglun2
  • 话题
    #icon-huati
  • 图片
    #icon-tupianxiangcex
  • 举报
    #icon-jubao1
  • 下载
    #icon-xiazai1
  • yy-circle
    #icon-tubiaozhizuomoban-mian_quanzi
  • 复制
    #icon-fuzhi
  • customer-service
    #icon-customer-service
  • 录音
    #icon-luyin
  • 点赞
    #icon-xialingyingicon-21
  • 设置
    #icon-shezhi1
  • 我的卡券
    #icon-wodekaquan
  • 群蜂QQ空间
    #icon-qunfengqqkongjian
  • 朋友圈
    #icon-pengyouquan
  • 微信支付
    #icon-weixinzhifu
  • 支付宝
    #icon-z-alipay
  • 微信
    #icon-weixin
  • qq
    #icon-qq-copy
  • 分 享
    #icon-fenxiang2
  • 复制链接
    #icon-fuzhilianjie
  • 等级
    #icon-dengji
  • 语音
    #icon-yuyin1
  • 店铺
    #icon-dianpu
  • 消息
    #icon-xiaoxi
  • 订单
    #icon-dingdan
  • 店铺-fill
    #icon-dianpufill
  • 添加
    #icon-tianjia
  • 赞_fill
    #icon-zanfill
  • 关注
    #icon-xiazai13
  • #icon-icon_good
  • 内网后台管理
    #icon-houtai
  • 分享
    #icon-fenxiang
  • 评论
    #icon-pinglun
  • 位置
    #icon-weizhi
  • 分享
    #icon-fenxiang1
  • 添加
    #icon-tianjia1
  • 评论
    #icon-pinglun1
  • 下游买家
    #icon-xiayoumaijia
  • 上游卖家
    #icon-shangyoumaijia
  • 相机
    #icon-xiangji
  • 语音2
    #icon-yuyin
  • 消息
    #icon-xiaoxi1
  • 消息
    #icon-xiaoxi2
  • 返回
    #icon-fanhui2
  • 发布
    #icon-fabu
  • 修改
    #icon-xiugai
  • 招商小程序-集成墙面
    #icon-zhaoshangxiaochengxu-jichengqiangmian
  • 新手引导
    #icon-xinshouyindao
  • 相机
    #icon-xiangji1
  • 订单处理
    #icon-orderx-fill
  • 数据
    #icon-shuju
  • 投诉
    #icon-tousu
  • 开黑房间-iCON_比赛-武器
    #icon-kaiheifangjian-iCON_bisai-wuqi
  • 筛选
    #icon-shaixuan1
  • 卡券-01
    #icon-qiaquan-1
  • 图片
    #icon-tupian
  • 打招呼2
    #icon-dazhaohu
  • 参与话题
    #icon-canyuhuati
  • search
    #icon-search
  • 客服
    #icon-kefu
  • 我的订单
    #icon-74wodedingdan
  • 选中角标
    #icon-xuanzhongjiaobiao
  • 设 置
    #icon-shezhi
  • tianjia
    #icon-tianjia2
  • more
    #icon-more
  • 云账号
    #icon-yunzhanghao
  • 选中角标
    #icon-xuanzhongjiaobiao1
  • kefu2
    #icon-kefu2

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>