• 全部播放
    
  • 时长
    
  • 播放位置
    
  • 通知
    
  • 左滑动
    
  • 回复
    
  • 最近
    
  • 小删除
    
  • 列表
    
  • 已下载
    
  • 列表循环
    
  • 列表播放
    
  • 单曲循环
    
  • 语音输入
    
  • 随机播放
    
  • 定时
    
  • 文稿
    
  • 下载
    
  • 分享点赞
    
  • 下拉
    
  • 微信
    
  • 编辑
    
  • 文本
    
  • 未赞
    
  • 红芯
    
  • 红赞
    
  • 图片删除
    
  • 关闭
    
  • 点赞
    
  • 分享
    
  • 搜索
    
  • 关闭
    
  • 留言
    
  • 错误
    
  • 搜索关闭
    
  • 正确
    
  • 删除
    
  • 年级
    
  • 价格
    
  • 人数
    
  • 时间
    
  • 日历 (1)
    
  • 费用 (4)
    
  • 时间
    
  • 删除
    
  • 邀请机构管理
    
  • 图标_中奖 (1)
    
  • 问题解答
    
  • 活动推广
    
  • 提现规则
    
  • 邀请
    
  • 排序2
    
  • 换货
    
  • 0
    
  • 红包
    
  • 暂停ld
    
  • 播放ld
    
  • 相册
    
  • 已领取
    
  • 保存成功
    
  • 开始
    
  • 完成
    
  • 重录
    
  • 保存
    
  • 暂停
    
  • 年级
    
  • 时间
    
  • 直播
    
  • 表情
    
  • 下 拉
    
  • 收起
    
  • 微信
    
  • 支付宝
    
  • 答题卡(1)
    
  • 编组(1)
    
  • 交卷(1)
    
  • 748编辑器_视频
    
  • 勾选选中
    
  • 支付宝
    
  • VIP
    
  • 成长值金币
    
  • 微信支付
    
  • 礼物
    
  • 音频畅听banner
    
  • 客服
    
  • 快递
    
  • 故事
    
  • 加号
    
  • 搜索
    
  • 收起
    
  • 客服
    
  • 折扣
    
  • compass-指南针
    
  • 数字2
    
  • 数字9
    
  • 小树苗
    
  • 数字3
    
  • 播放 三角形
    
  • 更新
    
  • 数字7
    
  • 
  • 对号
    
  • 
  • 闹钟
    
  • 语音
    
  • 艺术测试
    
  • 苹果
    
  • 订阅
    
  • 商品
    
  • 星星
    
  • 暂停
    
  • 错误列表
    
  • 安全
    
  • full-screen
    
  • 列表
    
  • 随机
    
  • 沙漏
    
  • 工单_打卡签到
    
  • 编辑
    
  • 下载
    
  • 地址
    
  • qq
    
  • 
  • 作业
    
  • 购买
    
  • 消息
    
  • icon_个人信息修改
    
  • 历史
    
  • 眼睛
    
  • 喜欢
    
  • 对号
    
  • 名称
    
  • 循环
    
  • 滑雪
    
  • 数字8
    
  • 数字5
    
  • 删除/数字面板编辑态
    
  • 顺序播放
    
  • 未点赞
    
  • 支付宝
    
  • 播放
    
  • 播放
    
  • 视频
    
  • 关于
    
  • 问好
    
  • 播放
    
  • 
  • 评分
    
  • 
  • 微信 支付
    
  • 分类
    
  • 寒假
    
  • 荣誉
    
  • 音频条
    
  • 搜索结果
    
  • 优惠卷1
    
  • 麦克风
    
  • 星星
    
  • 聊天
    
  • 下载
    
  • 下载
    
  • 热门
    
  • 刷新
    
  • 下载
    
  • wechat
    
  • alipay
    
  • 优惠券 1
    
  • 手机
    
  • 分类
    
  • 儿童场景
    
  • 保存 s
    
  • 密码
    
  • 暂停
    
  • 文件夹
    
  • 作业
    
  • 弓箭
    
  • 数字6
    
  • 添加
    
  • 返回
    
  • 收货地址
    
  • 活动
    
  • 消息 信息 短信 提醒 邮件 通知 私信
    
  • 更多 (2)
    
  • 
  • 返回
    
  • 待收货
    
  • 数字1
    
  • 退
    
  • 相机
    
  • 购物
    
  • 精品
    
  • 向上
    
  • 数字4
    
  • vip
    
  • 读书
    
  • 精品
    
  • 下 拉
    
  • 微博
    
  • 微信
    
  • 毛笔
    
  • 日历
    
  • 热门
    
  • 开关3
    
  • 勋章改
    
  • 开关3
    
  • 上拉
    
  • 客服
    
  • 退款
    
  • 时间 (2)
    
  • 民俗村介绍2
    
  • 更多
    
  • 垃圾桶
    
  • 精选
    
  • 必读
    
  • 数字1
    
  • 年龄层
    
  • 树苗
    
  • 订 单
    
  • QQ
    
  • 位置
    
  • 握手
    
  • 讲义
    
  • 安卓
    
  • 会员
    
  • 朋友圈
    
  • 钻石
    
  • 推荐
    
  • 评价
    
  • 表情
    
  • 
  • 134消息、通知、提醒、铃声、铃铛-线性
    
  • 待评价
    
  • 相机
    
  • 手机
    
  • 置顶
    
  • 地理
    
  • 微博 (绑定)
    
  • 分享
    
  • 心 爱心
    
  • 单选题
    
  • 跳转 前往 右箭头 向右 下一步 线性
    
  • 音频
    
  • 单曲循环
    
  • 右翻页
    
  • 左翻页
    
  • 撤回
    
  • 音频
    
  • 对号
    
  • 关 闭
    
  • 排序
    
  • 首页-默认
    
  • 个人中心-默认
    
  • 添加联系人
    
  • 题目
    
  • 银行卡支付
    
  • shoucang-moren
    
  • 作品
    
  • 问号
    
  • 文稿
    
  • 作品提交
    
  • 删 除
    
  • 书籍
    
  • 关 闭
    
  • 学习
    
  • 时间
    
  • 添加
    
  • 选择
    
  • 收发文
    
  • 项目底框
    
  • 已下载
    
  • 消息实心
    
  • xiala
    

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-quanbubofang
  • 时长
    .icon-shichang
  • 播放位置
    .icon-bofangweizhi
  • 通知
    .icon-tongzhi
  • 左滑动
    .icon-zuohuadong
  • 回复
    .icon-yinpinhuifu
  • 最近
    .icon-yinpinzuijin
  • 小删除
    .icon-yinpinshanchu
  • 列表
    .icon-bofangliebiao
  • 已下载
    .icon-yinpinyixiazai
  • 列表循环
    .icon-yinpinliebiaoxunhuan
  • 列表播放
    .icon-yinpinliebiaobofang
  • 单曲循环
    .icon-yinpindanquxunhuan
  • 语音输入
    .icon-yinpinyuyinshuru
  • 随机播放
    .icon-yinpinsuijibofang
  • 定时
    .icon-yinpindingshi
  • 文稿
    .icon-yinpinwengao
  • 下载
    .icon-yinpinxiazai
  • 分享点赞
    .icon-toupiao
  • 下拉
    .icon-weixinxiala
  • 微信
    .icon-pcweixin
  • 编辑
    .icon-wodebianji
  • 文本
    .icon-wenben
  • 未赞
    .icon-liuyandianzan
  • 红芯
    .icon-yidianzan
  • 红赞
    .icon-liuyanyidianzan
  • 图片删除
    .icon-banjiaoshanchu
  • 关闭
    .icon-tankuangguanbi
  • 点赞
    .icon-dianzan
  • 分享
    .icon-fenxiang2
  • 搜索
    .icon-sousuo2
  • 关闭
    .icon-guanbi2
  • 留言
    .icon-liuyan
  • 错误
    .icon-daticuowu
  • 搜索关闭
    .icon-sousuoguanbi
  • 正确
    .icon-datizhengque
  • 删除
    .icon-shanchu
  • 年级
    .icon-huodongnianji
  • 价格
    .icon-jiage
  • 人数
    .icon-huodongrenshu
  • 时间
    .icon-huodongshijian
  • 日历 (1)
    .icon-rili1
  • 费用 (4)
    .icon-feiyong4
  • 时间
    .icon-shijian2
  • 删除
    .icon-Popupdel
  • 邀请机构管理
    .icon-yaoqingjigou
  • 图标_中奖 (1)
    .icon-tubiao_zhongjiang
  • 问题解答
    .icon-ruhetuiguangd
  • 活动推广
    .icon-chanpintuiguang
  • 提现规则
    .icon-fanliguizede
  • 邀请
    .icon-yaoqing
  • 排序2
    .icon-paixu
  • 换货
    .icon-huanhuo
  • 0
    .icon-icon-test
  • 红包
    .icon-hongbao
  • 暂停ld
    .icon-zantingld
  • 播放ld
    .icon-bofangld
  • 相册
    .icon-xiangce
  • 已领取
    .icon-yilingqu
  • 保存成功
    .icon-baocunchenggong
  • 开始
    .icon-kaishi
  • 完成
    .icon-wancheng
  • 重录
    .icon-zhonglu
  • 保存
    .icon-baocun
  • 暂停
    .icon-zanting2
  • 年级
    .icon-nianjix
  • 时间
    .icon-shijianx
  • 直播
    .icon-zhibox
  • 表情
    .icon-biaoqingx
  • 下 拉
    .icon-xialax
  • 收起
    .icon-shouqi1
  • 微信
    .icon-weixin1
  • 支付宝
    .icon-zhifubao1
  • 答题卡(1)
    .icon-datika
  • 编组(1)
    .icon-bianzu
  • 交卷(1)
    .icon-jiaojuan
  • 748编辑器_视频
    .icon-bianjiqi_shipin
  • 勾选选中
    .icon-gouxuanxuanzhong
  • 支付宝
    .icon-zhifubao2
  • VIP
    .icon-VIP
  • 成长值金币
    .icon-chengchangzhijinbi
  • 微信支付
    .icon-weixinzhifu1
  • 礼物
    .icon-liwu
  • 音频畅听banner
    .icon-yinpinchangtingbanner
  • 客服
    .icon-kefu1
  • 快递
    .icon-kuaidi
  • 故事
    .icon-gushi
  • 加号
    .icon-jiahao
  • 搜索
    .icon-sousuo
  • 收起
    .icon-shouqi
  • 客服
    .icon-kefu
  • 折扣
    .icon-zhekou
  • compass-指南针
    .icon-compasszhinanzhen
  • 数字2
    .icon-shuzi2
  • 数字9
    .icon-shuzi9
  • 小树苗
    .icon-xiaoshumiao
  • 数字3
    .icon-shuzi3
  • 播放 三角形
    .icon-bofangsanjiaoxing
  • 更新
    .icon-gengxin
  • 数字7
    .icon-shuzi7
  • .icon-shu
  • 对号
    .icon-duihao1
  • .icon-weibiaoti3fuzhi03
  • 闹钟
    .icon-naozhong
  • 语音
    .icon-yuyin
  • 艺术测试
    .icon-yishuceshi
  • 苹果
    .icon-pingguo
  • 订阅
    .icon-dingyue3
  • 商品
    .icon-shangpin
  • 星星
    .icon-xingxing
  • 暂停
    .icon-zanting
  • 错误列表
    .icon-liebiao1
  • 安全
    .icon-anquan
  • full-screen
    .icon-full-screen
  • 列表
    .icon-liebiao
  • 随机
    .icon-suiji
  • 沙漏
    .icon-shalou
  • 工单_打卡签到
    .icon-gongdan_daqiaqiandao
  • 编辑
    .icon-bianji
  • 下载
    .icon-xiazai2
  • 地址
    .icon-dizhi
  • qq
    .icon-qq
  • .icon-buzan
  • 作业
    .icon-zuoye2
  • 购买
    .icon-goumai
  • 消息
    .icon-xiaoxi
  • icon_个人信息修改
    .icon-icon_gerenxinxixiugai
  • 历史
    .icon-lishi
  • 眼睛
    .icon-yanjing
  • 喜欢
    .icon-xihuan1
  • 对号
    .icon-duihao2
  • 名称
    .icon-mingcheng
  • 循环
    .icon-xunhuan
  • 滑雪
    .icon-Skiing
  • 数字8
    .icon-shuzi8
  • 数字5
    .icon-shuzi5
  • 删除/数字面板编辑态
    .icon-chuyidong
  • 顺序播放
    .icon-biao-
  • 未点赞
    .icon-weidianzan
  • 支付宝
    .icon-zhifubao
  • 播放
    .icon-bofang
  • 播放
    .icon-bofang1
  • 视频
    .icon-shipin
  • 关于
    .icon-guanyu1
  • 问好
    .icon-mendian-
  • 播放
    .icon-bofang2
  • .icon-huo
  • 评分
    .icon-pingfen1
  • .icon-xin
  • 微信 支付
    .icon-weixinzhifu
  • 分类
    .icon-fenlei
  • 寒假
    .icon-hanjia
  • 荣誉
    .icon-rongyu1
  • 音频条
    .icon-yinpintiao
  • 搜索结果
    .icon-Fill
  • 优惠卷1
    .icon-youhuijuan
  • 麦克风
    .icon-maikefeng
  • 星星
    .icon-xingxing1
  • 聊天
    .icon-liaotian
  • 下载
    .icon-xiazai1
  • 下载
    .icon-download
  • 热门
    .icon-remen2
  • 刷新
    .icon-shuaxin
  • 下载
    .icon-xiazai
  • wechat
    .icon-wechat
  • alipay
    .icon-alipay
  • 优惠券 1
    .icon-youhuiquan1
  • 手机
    .icon-shouji1
  • 分类
    .icon-tj2
  • 儿童场景
    .icon-ertongchangjing
  • 保存 s
    .icon-baocuns
  • 密码
    .icon-mima
  • 暂停
    .icon-zanting1
  • 文件夹
    .icon-sucai
  • 作业
    .icon-zuoye
  • 弓箭
    .icon-gongjian
  • 数字6
    .icon-shuzi6
  • 添加
    .icon-icon191
  • 返回
    .icon-fanhui
  • 收货地址
    .icon-shouhuodizhi
  • 活动
    .icon-ElecfansAPPiCON-
  • 消息 信息 短信 提醒 邮件 通知 私信
    .icon-xiaoxixinxiduanxintixingyoujiantongzhisixin
  • 更多 (2)
    .icon-gengduo1
  • .icon-bi
  • 返回
    .icon-fanhui1
  • 待收货
    .icon-daishouhuo
  • 数字1
    .icon-shuzi
  • 退
    .icon-tui1
  • 相机
    .icon-xiangji1
  • 购物
    .icon-gouwudai
  • 精品
    .icon-jingpin1
  • 向上
    .icon-xiangshang
  • 数字4
    .icon-yidongduan-
  • vip
    .icon-vip
  • 读书
    .icon-dushu
  • 精品
    .icon-jingpin
  • 下 拉
    .icon-xiala1
  • 微博
    .icon-weibo
  • 微信
    .icon-weixin
  • 毛笔
    .icon-maobi
  • 日历
    .icon-rili
  • 热门
    .icon-remen
  • 开关3
    .icon-kaiguan-on
  • 勋章改
    .icon-xunzhanggai
  • 开关3
    .icon-kaiguan3
  • 上拉
    .icon-shangla1
  • 客服
    .icon-weibiaoti--
  • 退款
    .icon-tuikuan
  • 时间 (2)
    .icon-shijian
  • 民俗村介绍2
    .icon-minsucunjieshao1
  • 更多
    .icon-more
  • 垃圾桶
    .icon-lajitong
  • 精选
    .icon-jingxuan
  • 必读
    .icon-bidu
  • 数字1
    .icon-shuzi1
  • 年龄层
    .icon-pv_agegroup
  • 树苗
    .icon-shumiao1
  • 订 单
    .icon-bill
  • QQ
    .icon-QQ
  • 位置
    .icon-weizhi
  • 握手
    .icon-woshou
  • 讲义
    .icon-jiangyi
  • 安卓
    .icon-anzhuo1
  • 会员
    .icon-huiyuan
  • 朋友圈
    .icon-pengyouquan
  • 钻石
    .icon-zuanshi
  • 推荐
    .icon-tuijian
  • 评价
    .icon-pingjia
  • 表情
    .icon-biaoqing
  • .icon-jia
  • 134消息、通知、提醒、铃声、铃铛-线性
    .icon-xiaoxitongzhitixinglingshenglingdang-xianxing
  • 待评价
    .icon-daipingjia
  • 相机
    .icon-xiangji
  • 手机
    .icon-shouji
  • 置顶
    .icon-zhiding
  • 地理
    .icon-dili
  • 微博 (绑定)
    .icon-weibobangding
  • 分享
    .icon-fenxiang
  • 心 爱心
    .icon-xinaixin
  • 单选题
    .icon-danxuanti
  • 跳转 前往 右箭头 向右 下一步 线性
    .icon-tiaozhuanqianwangyoujiantouxiangyouxiayibuxianxing
  • 音频
    .icon-yinpin
  • 单曲循环
    .icon-danquxunhuan
  • 右翻页
    .icon-youfanye
  • 左翻页
    .icon-zuofanye
  • 撤回
    .icon-chehui
  • 音频
    .icon-ziyuan
  • 对号
    .icon-duihao
  • 关 闭
    .icon-guanbi
  • 排序
    .icon-paixu1
  • 首页-默认
    .icon-shouye-moren
  • 个人中心-默认
    .icon-gerenzhongxin-moren
  • 添加联系人
    .icon-zhuce
  • 题目
    .icon-timu
  • 银行卡支付
    .icon-yinhangqiazhifu
  • shoucang-moren
    .icon-shoucang-moren1
  • 作品
    .icon-zuopin
  • 问号
    .icon-wenhao
  • 文稿
    .icon-wengao
  • 作品提交
    .icon-zuopintijiao
  • 删 除
    .icon-menu_reject2Submitor
  • 书籍
    .icon-icondemofuzhifuzhi
  • 关 闭
    .icon-guanbi1
  • 学习
    .icon-xuexi1
  • 时间
    .icon-shijian1
  • 添加
    .icon-tianjia
  • 选择
    .icon-xuanze
  • 收发文
    .icon-shoufawen
  • 项目底框
    .icon-xiangmudikuang
  • 已下载
    .icon-yixiazai
  • 消息实心
    .icon-xiaoxishixin
  • xiala
    .icon-xiala

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-quanbubofang
  • 时长
    #icon-shichang
  • 播放位置
    #icon-bofangweizhi
  • 通知
    #icon-tongzhi
  • 左滑动
    #icon-zuohuadong
  • 回复
    #icon-yinpinhuifu
  • 最近
    #icon-yinpinzuijin
  • 小删除
    #icon-yinpinshanchu
  • 列表
    #icon-bofangliebiao
  • 已下载
    #icon-yinpinyixiazai
  • 列表循环
    #icon-yinpinliebiaoxunhuan
  • 列表播放
    #icon-yinpinliebiaobofang
  • 单曲循环
    #icon-yinpindanquxunhuan
  • 语音输入
    #icon-yinpinyuyinshuru
  • 随机播放
    #icon-yinpinsuijibofang
  • 定时
    #icon-yinpindingshi
  • 文稿
    #icon-yinpinwengao
  • 下载
    #icon-yinpinxiazai
  • 分享点赞
    #icon-toupiao
  • 下拉
    #icon-weixinxiala
  • 微信
    #icon-pcweixin
  • 编辑
    #icon-wodebianji
  • 文本
    #icon-wenben
  • 未赞
    #icon-liuyandianzan
  • 红芯
    #icon-yidianzan
  • 红赞
    #icon-liuyanyidianzan
  • 图片删除
    #icon-banjiaoshanchu
  • 关闭
    #icon-tankuangguanbi
  • 点赞
    #icon-dianzan
  • 分享
    #icon-fenxiang2
  • 搜索
    #icon-sousuo2
  • 关闭
    #icon-guanbi2
  • 留言
    #icon-liuyan
  • 错误
    #icon-daticuowu
  • 搜索关闭
    #icon-sousuoguanbi
  • 正确
    #icon-datizhengque
  • 删除
    #icon-shanchu
  • 年级
    #icon-huodongnianji
  • 价格
    #icon-jiage
  • 人数
    #icon-huodongrenshu
  • 时间
    #icon-huodongshijian
  • 日历 (1)
    #icon-rili1
  • 费用 (4)
    #icon-feiyong4
  • 时间
    #icon-shijian2
  • 删除
    #icon-Popupdel
  • 邀请机构管理
    #icon-yaoqingjigou
  • 图标_中奖 (1)
    #icon-tubiao_zhongjiang
  • 问题解答
    #icon-ruhetuiguangd
  • 活动推广
    #icon-chanpintuiguang
  • 提现规则
    #icon-fanliguizede
  • 邀请
    #icon-yaoqing
  • 排序2
    #icon-paixu
  • 换货
    #icon-huanhuo
  • 0
    #icon-icon-test
  • 红包
    #icon-hongbao
  • 暂停ld
    #icon-zantingld
  • 播放ld
    #icon-bofangld
  • 相册
    #icon-xiangce
  • 已领取
    #icon-yilingqu
  • 保存成功
    #icon-baocunchenggong
  • 开始
    #icon-kaishi
  • 完成
    #icon-wancheng
  • 重录
    #icon-zhonglu
  • 保存
    #icon-baocun
  • 暂停
    #icon-zanting2
  • 年级
    #icon-nianjix
  • 时间
    #icon-shijianx
  • 直播
    #icon-zhibox
  • 表情
    #icon-biaoqingx
  • 下 拉
    #icon-xialax
  • 收起
    #icon-shouqi1
  • 微信
    #icon-weixin1
  • 支付宝
    #icon-zhifubao1
  • 答题卡(1)
    #icon-datika
  • 编组(1)
    #icon-bianzu
  • 交卷(1)
    #icon-jiaojuan
  • 748编辑器_视频
    #icon-bianjiqi_shipin
  • 勾选选中
    #icon-gouxuanxuanzhong
  • 支付宝
    #icon-zhifubao2
  • VIP
    #icon-VIP
  • 成长值金币
    #icon-chengchangzhijinbi
  • 微信支付
    #icon-weixinzhifu1
  • 礼物
    #icon-liwu
  • 音频畅听banner
    #icon-yinpinchangtingbanner
  • 客服
    #icon-kefu1
  • 快递
    #icon-kuaidi
  • 故事
    #icon-gushi
  • 加号
    #icon-jiahao
  • 搜索
    #icon-sousuo
  • 收起
    #icon-shouqi
  • 客服
    #icon-kefu
  • 折扣
    #icon-zhekou
  • compass-指南针
    #icon-compasszhinanzhen
  • 数字2
    #icon-shuzi2
  • 数字9
    #icon-shuzi9
  • 小树苗
    #icon-xiaoshumiao
  • 数字3
    #icon-shuzi3
  • 播放 三角形
    #icon-bofangsanjiaoxing
  • 更新
    #icon-gengxin
  • 数字7
    #icon-shuzi7
  • #icon-shu
  • 对号
    #icon-duihao1
  • #icon-weibiaoti3fuzhi03
  • 闹钟
    #icon-naozhong
  • 语音
    #icon-yuyin
  • 艺术测试
    #icon-yishuceshi
  • 苹果
    #icon-pingguo
  • 订阅
    #icon-dingyue3
  • 商品
    #icon-shangpin
  • 星星
    #icon-xingxing
  • 暂停
    #icon-zanting
  • 错误列表
    #icon-liebiao1
  • 安全
    #icon-anquan
  • full-screen
    #icon-full-screen
  • 列表
    #icon-liebiao
  • 随机
    #icon-suiji
  • 沙漏
    #icon-shalou
  • 工单_打卡签到
    #icon-gongdan_daqiaqiandao
  • 编辑
    #icon-bianji
  • 下载
    #icon-xiazai2
  • 地址
    #icon-dizhi
  • qq
    #icon-qq
  • #icon-buzan
  • 作业
    #icon-zuoye2
  • 购买
    #icon-goumai
  • 消息
    #icon-xiaoxi
  • icon_个人信息修改
    #icon-icon_gerenxinxixiugai
  • 历史
    #icon-lishi
  • 眼睛
    #icon-yanjing
  • 喜欢
    #icon-xihuan1
  • 对号
    #icon-duihao2
  • 名称
    #icon-mingcheng
  • 循环
    #icon-xunhuan
  • 滑雪
    #icon-Skiing
  • 数字8
    #icon-shuzi8
  • 数字5
    #icon-shuzi5
  • 删除/数字面板编辑态
    #icon-chuyidong
  • 顺序播放
    #icon-biao-
  • 未点赞
    #icon-weidianzan
  • 支付宝
    #icon-zhifubao
  • 播放
    #icon-bofang
  • 播放
    #icon-bofang1
  • 视频
    #icon-shipin
  • 关于
    #icon-guanyu1
  • 问好
    #icon-mendian-
  • 播放
    #icon-bofang2
  • #icon-huo
  • 评分
    #icon-pingfen1
  • #icon-xin
  • 微信 支付
    #icon-weixinzhifu
  • 分类
    #icon-fenlei
  • 寒假
    #icon-hanjia
  • 荣誉
    #icon-rongyu1
  • 音频条
    #icon-yinpintiao
  • 搜索结果
    #icon-Fill
  • 优惠卷1
    #icon-youhuijuan
  • 麦克风
    #icon-maikefeng
  • 星星
    #icon-xingxing1
  • 聊天
    #icon-liaotian
  • 下载
    #icon-xiazai1
  • 下载
    #icon-download
  • 热门
    #icon-remen2
  • 刷新
    #icon-shuaxin
  • 下载
    #icon-xiazai
  • wechat
    #icon-wechat
  • alipay
    #icon-alipay
  • 优惠券 1
    #icon-youhuiquan1
  • 手机
    #icon-shouji1
  • 分类
    #icon-tj2
  • 儿童场景
    #icon-ertongchangjing
  • 保存 s
    #icon-baocuns
  • 密码
    #icon-mima
  • 暂停
    #icon-zanting1
  • 文件夹
    #icon-sucai
  • 作业
    #icon-zuoye
  • 弓箭
    #icon-gongjian
  • 数字6
    #icon-shuzi6
  • 添加
    #icon-icon191
  • 返回
    #icon-fanhui
  • 收货地址
    #icon-shouhuodizhi
  • 活动
    #icon-ElecfansAPPiCON-
  • 消息 信息 短信 提醒 邮件 通知 私信
    #icon-xiaoxixinxiduanxintixingyoujiantongzhisixin
  • 更多 (2)
    #icon-gengduo1
  • #icon-bi
  • 返回
    #icon-fanhui1
  • 待收货
    #icon-daishouhuo
  • 数字1
    #icon-shuzi
  • 退
    #icon-tui1
  • 相机
    #icon-xiangji1
  • 购物
    #icon-gouwudai
  • 精品
    #icon-jingpin1
  • 向上
    #icon-xiangshang
  • 数字4
    #icon-yidongduan-
  • vip
    #icon-vip
  • 读书
    #icon-dushu
  • 精品
    #icon-jingpin
  • 下 拉
    #icon-xiala1
  • 微博
    #icon-weibo
  • 微信
    #icon-weixin
  • 毛笔
    #icon-maobi
  • 日历
    #icon-rili
  • 热门
    #icon-remen
  • 开关3
    #icon-kaiguan-on
  • 勋章改
    #icon-xunzhanggai
  • 开关3
    #icon-kaiguan3
  • 上拉
    #icon-shangla1
  • 客服
    #icon-weibiaoti--
  • 退款
    #icon-tuikuan
  • 时间 (2)
    #icon-shijian
  • 民俗村介绍2
    #icon-minsucunjieshao1
  • 更多
    #icon-more
  • 垃圾桶
    #icon-lajitong
  • 精选
    #icon-jingxuan
  • 必读
    #icon-bidu
  • 数字1
    #icon-shuzi1
  • 年龄层
    #icon-pv_agegroup
  • 树苗
    #icon-shumiao1
  • 订 单
    #icon-bill
  • QQ
    #icon-QQ
  • 位置
    #icon-weizhi
  • 握手
    #icon-woshou
  • 讲义
    #icon-jiangyi
  • 安卓
    #icon-anzhuo1
  • 会员
    #icon-huiyuan
  • 朋友圈
    #icon-pengyouquan
  • 钻石
    #icon-zuanshi
  • 推荐
    #icon-tuijian
  • 评价
    #icon-pingjia
  • 表情
    #icon-biaoqing
  • #icon-jia
  • 134消息、通知、提醒、铃声、铃铛-线性
    #icon-xiaoxitongzhitixinglingshenglingdang-xianxing
  • 待评价
    #icon-daipingjia
  • 相机
    #icon-xiangji
  • 手机
    #icon-shouji
  • 置顶
    #icon-zhiding
  • 地理
    #icon-dili
  • 微博 (绑定)
    #icon-weibobangding
  • 分享
    #icon-fenxiang
  • 心 爱心
    #icon-xinaixin
  • 单选题
    #icon-danxuanti
  • 跳转 前往 右箭头 向右 下一步 线性
    #icon-tiaozhuanqianwangyoujiantouxiangyouxiayibuxianxing
  • 音频
    #icon-yinpin
  • 单曲循环
    #icon-danquxunhuan
  • 右翻页
    #icon-youfanye
  • 左翻页
    #icon-zuofanye
  • 撤回
    #icon-chehui
  • 音频
    #icon-ziyuan
  • 对号
    #icon-duihao
  • 关 闭
    #icon-guanbi
  • 排序
    #icon-paixu1
  • 首页-默认
    #icon-shouye-moren
  • 个人中心-默认
    #icon-gerenzhongxin-moren
  • 添加联系人
    #icon-zhuce
  • 题目
    #icon-timu
  • 银行卡支付
    #icon-yinhangqiazhifu
  • shoucang-moren
    #icon-shoucang-moren1
  • 作品
    #icon-zuopin
  • 问号
    #icon-wenhao
  • 文稿
    #icon-wengao
  • 作品提交
    #icon-zuopintijiao
  • 删 除
    #icon-menu_reject2Submitor
  • 书籍
    #icon-icondemofuzhifuzhi
  • 关 闭
    #icon-guanbi1
  • 学习
    #icon-xuexi1
  • 时间
    #icon-shijian1
  • 添加
    #icon-tianjia
  • 选择
    #icon-xuanze
  • 收发文
    #icon-shoufawen
  • 项目底框
    #icon-xiangmudikuang
  • 已下载
    #icon-yixiazai
  • 消息实心
    #icon-xiaoxishixin
  • xiala
    #icon-xiala

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>