• alipay
    
  • apple
    
  • location
    
  • Image
    
  • Chinese
    
  • Chief Hat
    
  • Cocktail-3
    
  • Compass
    
  • Cocktail
    
  • Icecream
    
  • Mountains
    
  • Karaoke
    
  • Guitar
    
  • Pizza
    
  • Rocket
    
  • Strawberry
    
  • Bicycle
    
  • 帮助
    
  • 尺码
    
  • 反馈
    
  • 男士
    
  • 女士
    
  • 显示
    
  • 隐藏
    
  • 足迹
    
  • 相机
    
  • 语音输入
    
  • 流程管理
    
  • 金额
    
  • 购物
    
  • 加油
    
  • 120急救
    
  • 电话
    
  • 电影
    
  • 发布
    
  • 水电
    
  • 桃花
    
  • bluetooth
    
  • edit
    
  • heart
    
  • camera
    
  • printer
    
  • washer
    
  • lab
    
  • 检验
    
  • 月季花
    
  • 处方
    
  • 风险大图
    
  • icon_mail
    
  • icon_language
    
  • icon_delete
    
  • icon_alert
    
  • 店铺管理
    
  • 客服沟通
    
  • 视频推广
    
  • 我的名片
    
  • 分类
    
  • 待评价
    
  • 待收货
    
  • 购物车
    
  • 商务合作
    
  • 广告
    
  • 自定义
    
  • 支付宝
    
  • 热门
    
  • 闭眼睛
    
  • 携带宠物
    
  • 
    洗漱用品
    
  • 座位
    
  • 新闻
    
  • 小吃
    
  • 新闻
    
  • 吃面
    
  • 新闻资讯
    
  • 微信
    
  • 会员1
    
  • qq
    
  • QQ
    
  • 会员
    
  • 微信
    
  • 微信
    
  • 打卡
    
  • 会员
    
  • 退出
    
  • 游戏
    
  • 排序
    
  • 游戏
    
  • 唱歌
    
  • 退出
    
  • 排序
    
  • 游戏
    
  • 排序
    
  • 表扬
    
  • 吃饭 2600%
    
  • 健身
    
  • 足球
    
  • 爱心
    
  • 吃饭中1
    
  • 隐藏
    
  • 美术
    
  • 爱心
    
  • 英语
    
  • 备份
    
  • 操作-隐藏
    
  • 跳舞
    
  • 足球
    
  • 数据备份恢复
    
  • 打电话
    
  • 音乐
    
  • 西红柿,番茄
    
  • 云端下载
    
  • 跑步
    
  • 番茄
    
  • 跑步
    
  • 健身-46
    
  • 点赞
    
  • 英语-填充
    
  • 备份
    
  • 点赞
    
  • 云端上传
    
  • 云端
    
  • 交流 语音
    
  • 关闭
    
  • 箭头
    
  • 箭头
    
  • 箭头
    
  • 暂停
    
  • 播放
    
  • 停止
    
  • 添加
    
  • 附件
    
  • 进入箭头
    
  • 设置
    
  • 购物车
    
  • 我的
    
  • 返回
    
  • 感叹号02
    
  • 更多
    
  • 
  • 
  • 叫醒
    
  • 失败
    
  • 切换
    
  • 时间
    
  • 刷新
    
  • 位置详情
    
  • 游记
    
  • 正确
    
  • 游泳池
    
  • 返回箭头
    
  • 关闭小
    
  • 对勾中
    
  • 表单控件 单选
    
  • 进入箭头2小
    
  • 返回箭头 详情页
    
  • 排行
    
  • 进入箭头2
    
  • 语音
    
  • 通讯录
    
  • 房子
    
  • 语音关闭
    
  • 语音撤回
    
  • 语音2
    
  • 停车场
    
  • 电视机
    
  • 保存
    
  • 清空
    
  • 收藏2
    
  • 关闭箭头
    
  • 收藏
    
  • 搜索
    
  • 分享
    
  • 消息
    
  • 喜欢2
    
  • 喜欢
    
  • 音量
    
  • 精选
    
  • 提示
    
  • 水果
    
  • 健身
    
  • 地图
    
  • 图片
    
  • 增加
    
  • 内容2
    
  • 导航
    
  • 股票
    
  • 记账本
    
  • 日历
    
  • IT-01
    
  • 音乐
    
  • 阅读
    
  • 游戏
    
  • 广播
    
  • 计划
    
  • 业务列表
    
  • 编辑 笔 记事 手写
    
  • 亲子
    
  • 禁止
    
  • 禁止
    
  • 体育-01
    
  • 禁止
    
  • 眼睛
    
  • 开心
    
  • 广播
    
  • 电脑
    
  • IT监控
    
  • 交流
    
  • icon_收支记账-
    
  • 股票期权
    
  • 股票1
    
  • 水果
    
  • 起床
    
  • 刷牙
    
  • 睡觉
    
  • 刷牙
    
  • 睡觉
    
  • 水杯,喝水,water
    
  • 日历
    
  • 音乐
    
  • 水果
    
  • 闹钟
    
  • 待办
    
  • 计划
    
  • 电脑
    
  • 睡觉
    
  • 业务机会
    
  • 待办
    
  • 体育
    
  • 打扫
    
  • CN_douban FM
    
  • 微笑
    
  • 待办事项
    
  • 打扫
    
  • 业务
    
  • 阅读
    
  • 电脑
    
  • 股票
    
  • 休息一下
    
  • 游戏
    
  • 体育-篮球
    
  • 体育-跑步
    
  • 体育-自行车
    
  • 英语水平
    
  • 围棋
    
  • 音乐
    
  • 电脑
    
  • 阅读
    
  • 音乐
    
  • 业务能力
    
  • 日历
    
  • 冥想
    
  • 眼镜
    
  • 电视
    
  • 阅读
    
  • 笔记本
    
  • 休息一下
    
  • 打扫
    
  • 待办
    
  • 待办
    
  • 业务管理
    
  • 水果
    
  • 电脑
    
  • 电脑
    
  • 苹果,水果
    
  • 水果
    
  • 水果类
    
  • 眼镜
    
  • 笔记本
    
  • 交流
    
  • 待办
    
  • 刷牙、刷牙、牙膏
    
  • 广播
    
  • 阅读
    
  • 笔记
    
  • 闹钟
    
  • 音乐
    
  • 游戏
    
  • 电视
    
  • 亲子成长
    
  • 游戏
    
  • 颈椎
    
  • 领队日记
    
  • 笔记
    
  • 阅读
    
  • 广播
    
  • 冥想
    
  • 体育
    
  • 休息
    
  • 交流
    
  • 开心
    
  • 待办1
    
  • 3_2亲子关系
    
  • 微笑
    
  • 眼睛
    
  • 禁止
    
  • 英语
    
  • 记账本
    

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

  • alipay
    .icon-alipay
  • apple
    .icon-apple
  • location
    .icon-location
  • Image
    .icon-Image
  • Chinese
    .icon-Chinese
  • Chief Hat
    .icon-ChiefHat
  • Cocktail-3
    .icon-Cocktail-3
  • Compass
    .icon-Compass
  • Cocktail
    .icon-Cocktail
  • Icecream
    .icon-Icecream
  • Mountains
    .icon-Mountains
  • Karaoke
    .icon-Karaoke
  • Guitar
    .icon-Guitar
  • Pizza
    .icon-Pizza
  • Rocket
    .icon-Rocket
  • Strawberry
    .icon-Strawberry
  • Bicycle
    .icon-Bicycle
  • 帮助
    .icon-bangzhu
  • 尺码
    .icon-chima
  • 反馈
    .icon-fankui
  • 男士
    .icon-nanshi
  • 女士
    .icon-nvshi
  • 显示
    .icon-xianshi
  • 隐藏
    .icon-yincang2
  • 足迹
    .icon-zuji
  • 相机
    .icon-xiangji
  • 语音输入
    .icon-yuyinshuru
  • 流程管理
    .icon-liuchengguanli
  • 金额
    .icon-jine
  • 购物
    .icon-gouwujianying
  • 加油
    .icon-ziyuan
  • 120急救
    .icon-jijiu
  • 电话
    .icon-dianhua
  • 电影
    .icon-dianying
  • 发布
    .icon-fabujianying
  • 水电
    .icon-shuidian
  • 桃花
    .icon-taohua
  • bluetooth
    .icon-bluetooth
  • edit
    .icon-edit
  • heart
    .icon-heart
  • camera
    .icon-camera
  • printer
    .icon-printer
  • washer
    .icon-washer
  • lab
    .icon-lab
  • 检验
    .icon-jianyan
  • 月季花
    .icon-yuejihua
  • 处方
    .icon-chufang
  • 风险大图
    .icon-fengxiandatu
  • icon_mail
    .icon-icon_mail
  • icon_language
    .icon-icon_language
  • icon_delete
    .icon-icon_delete
  • icon_alert
    .icon-icon_alert
  • 店铺管理
    .icon-dianpuguanli
  • 客服沟通
    .icon-kefugoutong
  • 视频推广
    .icon-shipintuiguang
  • 我的名片
    .icon-wodemingpian
  • 分类
    .icon-fenlei
  • 待评价
    .icon-daipingjia
  • 待收货
    .icon-daishouhuo
  • 购物车
    .icon-gouwuche1
  • 商务合作
    .icon-shangwuhezuo
  • 广告
    .icon-guanggao
  • 自定义
    .icon-zidingyi
  • 支付宝
    .icon-zhifubao
  • 热门
    .icon-remen
  • 闭眼睛
    .icon-biyanjing
  • 携带宠物
    .icon-xiedaichongwu
  • 洗漱用品
    .icon-xishuyongpin
  • 座位
    .icon-zuowei
  • 新闻
    .icon-xinwen
  • 小吃
    .icon-xiaochi
  • 新闻
    .icon-xinwen1
  • 吃面
    .icon-chimian
  • 新闻资讯
    .icon-xinwenzixun
  • 微信
    .icon-weixin
  • 会员1
    .icon-huiyuan1
  • qq
    .icon-qq-copy
  • QQ
    .icon-qq
  • 会员
    .icon-huiyuan
  • 微信
    .icon-weixin1
  • 微信
    .icon-weixin2
  • 打卡
    .icon-daqia
  • 会员
    .icon-huiyuan2
  • 退出
    .icon-tuichu
  • 游戏
    .icon-youxi
  • 排序
    .icon-paixu
  • 游戏
    .icon-youxi1
  • 唱歌
    .icon-changge
  • 退出
    .icon-tuichu1
  • 排序
    .icon-paixu1
  • 游戏
    .icon-youxi2
  • 排序
    .icon-paixu2
  • 表扬
    .icon-biaoyang
  • 吃饭 2600%
    .icon-chifan2600
  • 健身
    .icon-jianshen1
  • 足球
    .icon-zuqiu-copy
  • 爱心
    .icon-icon4
  • 吃饭中1
    .icon-chifanzhong1
  • 隐藏
    .icon-yincang
  • 美术
    .icon-meishu
  • 爱心
    .icon-aixin
  • 英语
    .icon-yingyu3
  • 备份
    .icon-backup
  • 操作-隐藏
    .icon-yincang1
  • 跳舞
    .icon-Dancing
  • 足球
    .icon-zuqiu
  • 数据备份恢复
    .icon-shujubeifenhuifu
  • 打电话
    .icon-dadianhua
  • 音乐
    .icon-music
  • 西红柿,番茄
    .icon-xihongshifanqie
  • 云端下载
    .icon-yunduanxiazai
  • 跑步
    .icon-paobu
  • 番茄
    .icon-fanqie
  • 跑步
    .icon-paobu1
  • 健身-46
    .icon-jianshen-
  • 点赞
    .icon-duomeitiicon-
  • 英语-填充
    .icon-yingyu-tianchong
  • 备份
    .icon-beifen
  • 点赞
    .icon-dianzan
  • 云端上传
    .icon-yunduanshangchuan
  • 云端
    .icon-yunduan
  • 交流 语音
    .icon-changyongtubiao-xianxingdaochu-zhuanqu-
  • 关闭
    .icon-guanbi
  • 箭头
    .icon-jiantouarrow483
  • 箭头
    .icon-jiantouarrow487
  • 箭头
    .icon-jiantouarrowhead7
  • 暂停
    .icon-zanting
  • 播放
    .icon-bofang
  • 停止
    .icon-ai08
  • 添加
    .icon-add-s
  • 附件
    .icon-fujian
  • 进入箭头
    .icon-jinrujiantou
  • 设置
    .icon-shezhi
  • 购物车
    .icon-gouwuche
  • 我的
    .icon-wode
  • 返回
    .icon-fanhui
  • 感叹号02
    .icon-gantanhao
  • 更多
    .icon-gengduo
  • .icon-jia
  • .icon-jian
  • 叫醒
    .icon-jiaoxing
  • 失败
    .icon-shibai
  • 切换
    .icon-qiehuan
  • 时间
    .icon-shijian
  • 刷新
    .icon-shuaxin
  • 位置详情
    .icon-weizhixiangqing
  • 游记
    .icon-youji
  • 正确
    .icon-zhengque
  • 游泳池
    .icon-youyongchi
  • 返回箭头
    .icon-fanhuijiantou
  • 关闭小
    .icon-guanbixiao
  • 对勾中
    .icon-duigouzhong
  • 表单控件 单选
    .icon-biaodankongjiandanxuan
  • 进入箭头2小
    .icon-jinrujiantouxiao
  • 返回箭头 详情页
    .icon-fanhuijiantouxiangqingye
  • 排行
    .icon-paihang
  • 进入箭头2
    .icon-jinrujiantou1
  • 语音
    .icon-yuyin
  • 通讯录
    .icon-tongxunlu
  • 房子
    .icon-fangzi
  • 语音关闭
    .icon-yuyinguanbi
  • 语音撤回
    .icon-yuyinchehui
  • 语音2
    .icon-yuyin1
  • 停车场
    .icon-tingchechang
  • 电视机
    .icon-dianshiji
  • 保存
    .icon-baocun
  • 清空
    .icon-qingkong
  • 收藏2
    .icon-shoucang
  • 关闭箭头
    .icon-guanbijiantou
  • 收藏
    .icon-shoucang1
  • 搜索
    .icon-sousuo
  • 分享
    .icon-fenxiang
  • 消息
    .icon-xiaoxi
  • 喜欢2
    .icon-xihuan
  • 喜欢
    .icon-xihuan1
  • 音量
    .icon-yinliang
  • 精选
    .icon-jingxuan
  • 提示
    .icon-tishi
  • 水果
    .icon-shuiguo4
  • 健身
    .icon-jianshen
  • 地图
    .icon-ditu
  • 图片
    .icon-tupian
  • 增加
    .icon-zengjia
  • 内容2
    .icon-neirong2
  • 导航
    .icon-daohang
  • 股票
    .icon-gupiao
  • 记账本
    .icon-jizhang
  • 日历
    .icon-rili
  • IT-01
    .icon-it01
  • 音乐
    .icon-yinle
  • 阅读
    .icon-yuedu
  • 游戏
    .icon-iconset0263
  • 广播
    .icon-iconset0274
  • 计划
    .icon-jihua
  • 业务列表
    .icon-yewuliebiao
  • 编辑 笔 记事 手写
    .icon-bianjibijishishouxie
  • 亲子
    .icon-qinzi
  • 禁止
    .icon-ai55
  • 禁止
    .icon-iconforbidden
  • 体育-01
    .icon-tiyu01
  • 禁止
    .icon-jinzhi
  • 眼睛
    .icon-yanjing
  • 开心
    .icon-kaixin
  • 广播
    .icon-broadcast
  • 电脑
    .icon-diannao
  • IT监控
    .icon-ITjiankong
  • 交流
    .icon-jiaoliu
  • icon_收支记账-
    .icon-icon_shouzhijizhang-
  • 股票期权
    .icon-gupiaoqiquan
  • 股票1
    .icon-gupiao11
  • 水果
    .icon-shuiguo
  • 起床
    .icon-qichuang
  • 刷牙
    .icon-shuaya
  • 睡觉
    .icon-shuijue1
  • 刷牙
    .icon-shuaya1
  • 睡觉
    .icon-shuijue2
  • 水杯,喝水,water
    .icon-water
  • 日历
    .icon-rili1
  • 音乐
    .icon-yinyue
  • 水果
    .icon-shuiguo1
  • 闹钟
    .icon-icon-test
  • 待办
    .icon-daiban
  • 计划
    .icon-jihua2
  • 电脑
    .icon-diannao1
  • 睡觉
    .icon-shuijue3
  • 业务机会
    .icon-yewujihui
  • 待办
    .icon-daiban1
  • 体育
    .icon-tiyu
  • 打扫
    .icon-dasao
  • CN_douban FM
    .icon-CN_doubanFM
  • 微笑
    .icon-Smile
  • 待办事项
    .icon-daibanshixiang
  • 打扫
    .icon-dasao1
  • 业务
    .icon-yewu
  • 阅读
    .icon-yuedu1
  • 电脑
    .icon-diannao2
  • 股票
    .icon-gupiao2
  • 休息一下
    .icon-xiuxiyixia
  • 游戏
    .icon-youxi-yuanshijituantubiao
  • 体育-篮球
    .icon-tiyu-lanqiu
  • 体育-跑步
    .icon-tiyu-paobu
  • 体育-自行车
    .icon-tiyu-zihangche
  • 英语水平
    .icon-yingyushuiping
  • 围棋
    .icon-weiqi
  • 音乐
    .icon-yinle1
  • 电脑
    .icon-diannao4
  • 阅读
    .icon-techreport-
  • 音乐
    .icon-yinle2
  • 业务能力
    .icon-kujialeqiyezhan_yewunengli
  • 日历
    .icon-rili3
  • 冥想
    .icon-mingxiang
  • 眼镜
    .icon-yanjing1
  • 电视
    .icon-dianshi1
  • 阅读
    .icon-tubiaozhizuomoban1
  • 笔记本
    .icon-bijiben
  • 休息一下
    .icon-xiuxiyixia1
  • 打扫
    .icon-dasao2
  • 待办
    .icon-daiban2
  • 待办
    .icon-daiban3
  • 业务管理
    .icon-business-management
  • 水果
    .icon-shuiguo2
  • 电脑
    .icon-shuangsechangyongtubiao-
  • 电脑
    .icon-diannao5
  • 苹果,水果
    .icon-pingguoshuiguo
  • 水果
    .icon-shuiguo3
  • 水果类
    .icon--shuiguolei
  • 眼镜
    .icon-tubiao-
  • 笔记本
    .icon-bijiben1
  • 交流
    .icon-jiaoliu3
  • 待办
    .icon-daiban4
  • 刷牙、刷牙、牙膏
    .icon-shuaya2
  • 广播
    .icon-guangbo1
  • 阅读
    .icon-yuedu2
  • 笔记
    .icon-biji
  • 闹钟
    .icon-naozhong-
  • 音乐
    .icon-yinle4
  • 游戏
    .icon-youxi3
  • 电视
    .icon-dianshi2
  • 亲子成长
    .icon-airudiantubiaohuizhi-zhuanqu_qinzichengchang
  • 游戏
    .icon-youxi4
  • 颈椎
    .icon-jingzhui
  • 领队日记
    .icon-lingduiriji
  • 笔记
    .icon-biji1
  • 阅读
    .icon-yuedu3
  • 广播
    .icon-guangbo2
  • 冥想
    .icon-mingxiang1
  • 体育
    .icon-tiyu2
  • 休息
    .icon-iconfront-
  • 交流
    .icon-jiaoliu4
  • 开心
    .icon-kaixin3
  • 待办1
    .icon-daiban5
  • 3_2亲子关系
    .icon-_qinziguanxi
  • 微笑
    .icon-weixiao1
  • 眼睛
    .icon-view
  • 禁止
    .icon-jinzhi2
  • 英语
    .icon-yingyu2
  • 记账本
    .icon-xinbaniconshangchuan-

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

  • alipay
    #icon-alipay
  • apple
    #icon-apple
  • location
    #icon-location
  • Image
    #icon-Image
  • Chinese
    #icon-Chinese
  • Chief Hat
    #icon-ChiefHat
  • Cocktail-3
    #icon-Cocktail-3
  • Compass
    #icon-Compass
  • Cocktail
    #icon-Cocktail
  • Icecream
    #icon-Icecream
  • Mountains
    #icon-Mountains
  • Karaoke
    #icon-Karaoke
  • Guitar
    #icon-Guitar
  • Pizza
    #icon-Pizza
  • Rocket
    #icon-Rocket
  • Strawberry
    #icon-Strawberry
  • Bicycle
    #icon-Bicycle
  • 帮助
    #icon-bangzhu
  • 尺码
    #icon-chima
  • 反馈
    #icon-fankui
  • 男士
    #icon-nanshi
  • 女士
    #icon-nvshi
  • 显示
    #icon-xianshi
  • 隐藏
    #icon-yincang2
  • 足迹
    #icon-zuji
  • 相机
    #icon-xiangji
  • 语音输入
    #icon-yuyinshuru
  • 流程管理
    #icon-liuchengguanli
  • 金额
    #icon-jine
  • 购物
    #icon-gouwujianying
  • 加油
    #icon-ziyuan
  • 120急救
    #icon-jijiu
  • 电话
    #icon-dianhua
  • 电影
    #icon-dianying
  • 发布
    #icon-fabujianying
  • 水电
    #icon-shuidian
  • 桃花
    #icon-taohua
  • bluetooth
    #icon-bluetooth
  • edit
    #icon-edit
  • heart
    #icon-heart
  • camera
    #icon-camera
  • printer
    #icon-printer
  • washer
    #icon-washer
  • lab
    #icon-lab
  • 检验
    #icon-jianyan
  • 月季花
    #icon-yuejihua
  • 处方
    #icon-chufang
  • 风险大图
    #icon-fengxiandatu
  • icon_mail
    #icon-icon_mail
  • icon_language
    #icon-icon_language
  • icon_delete
    #icon-icon_delete
  • icon_alert
    #icon-icon_alert
  • 店铺管理
    #icon-dianpuguanli
  • 客服沟通
    #icon-kefugoutong
  • 视频推广
    #icon-shipintuiguang
  • 我的名片
    #icon-wodemingpian
  • 分类
    #icon-fenlei
  • 待评价
    #icon-daipingjia
  • 待收货
    #icon-daishouhuo
  • 购物车
    #icon-gouwuche1
  • 商务合作
    #icon-shangwuhezuo
  • 广告
    #icon-guanggao
  • 自定义
    #icon-zidingyi
  • 支付宝
    #icon-zhifubao
  • 热门
    #icon-remen
  • 闭眼睛
    #icon-biyanjing
  • 携带宠物
    #icon-xiedaichongwu
  • 洗漱用品
    #icon-xishuyongpin
  • 座位
    #icon-zuowei
  • 新闻
    #icon-xinwen
  • 小吃
    #icon-xiaochi
  • 新闻
    #icon-xinwen1
  • 吃面
    #icon-chimian
  • 新闻资讯
    #icon-xinwenzixun
  • 微信
    #icon-weixin
  • 会员1
    #icon-huiyuan1
  • qq
    #icon-qq-copy
  • QQ
    #icon-qq
  • 会员
    #icon-huiyuan
  • 微信
    #icon-weixin1
  • 微信
    #icon-weixin2
  • 打卡
    #icon-daqia
  • 会员
    #icon-huiyuan2
  • 退出
    #icon-tuichu
  • 游戏
    #icon-youxi
  • 排序
    #icon-paixu
  • 游戏
    #icon-youxi1
  • 唱歌
    #icon-changge
  • 退出
    #icon-tuichu1
  • 排序
    #icon-paixu1
  • 游戏
    #icon-youxi2
  • 排序
    #icon-paixu2
  • 表扬
    #icon-biaoyang
  • 吃饭 2600%
    #icon-chifan2600
  • 健身
    #icon-jianshen1
  • 足球
    #icon-zuqiu-copy
  • 爱心
    #icon-icon4
  • 吃饭中1
    #icon-chifanzhong1
  • 隐藏
    #icon-yincang
  • 美术
    #icon-meishu
  • 爱心
    #icon-aixin
  • 英语
    #icon-yingyu3
  • 备份
    #icon-backup
  • 操作-隐藏
    #icon-yincang1
  • 跳舞
    #icon-Dancing
  • 足球
    #icon-zuqiu
  • 数据备份恢复
    #icon-shujubeifenhuifu
  • 打电话
    #icon-dadianhua
  • 音乐
    #icon-music
  • 西红柿,番茄
    #icon-xihongshifanqie
  • 云端下载
    #icon-yunduanxiazai
  • 跑步
    #icon-paobu
  • 番茄
    #icon-fanqie
  • 跑步
    #icon-paobu1
  • 健身-46
    #icon-jianshen-
  • 点赞
    #icon-duomeitiicon-
  • 英语-填充
    #icon-yingyu-tianchong
  • 备份
    #icon-beifen
  • 点赞
    #icon-dianzan
  • 云端上传
    #icon-yunduanshangchuan
  • 云端
    #icon-yunduan
  • 交流 语音
    #icon-changyongtubiao-xianxingdaochu-zhuanqu-
  • 关闭
    #icon-guanbi
  • 箭头
    #icon-jiantouarrow483
  • 箭头
    #icon-jiantouarrow487
  • 箭头
    #icon-jiantouarrowhead7
  • 暂停
    #icon-zanting
  • 播放
    #icon-bofang
  • 停止
    #icon-ai08
  • 添加
    #icon-add-s
  • 附件
    #icon-fujian
  • 进入箭头
    #icon-jinrujiantou
  • 设置
    #icon-shezhi
  • 购物车
    #icon-gouwuche
  • 我的
    #icon-wode
  • 返回
    #icon-fanhui
  • 感叹号02
    #icon-gantanhao
  • 更多
    #icon-gengduo
  • #icon-jia
  • #icon-jian
  • 叫醒
    #icon-jiaoxing
  • 失败
    #icon-shibai
  • 切换
    #icon-qiehuan
  • 时间
    #icon-shijian
  • 刷新
    #icon-shuaxin
  • 位置详情
    #icon-weizhixiangqing
  • 游记
    #icon-youji
  • 正确
    #icon-zhengque
  • 游泳池
    #icon-youyongchi
  • 返回箭头
    #icon-fanhuijiantou
  • 关闭小
    #icon-guanbixiao
  • 对勾中
    #icon-duigouzhong
  • 表单控件 单选
    #icon-biaodankongjiandanxuan
  • 进入箭头2小
    #icon-jinrujiantouxiao
  • 返回箭头 详情页
    #icon-fanhuijiantouxiangqingye
  • 排行
    #icon-paihang
  • 进入箭头2
    #icon-jinrujiantou1
  • 语音
    #icon-yuyin
  • 通讯录
    #icon-tongxunlu
  • 房子
    #icon-fangzi
  • 语音关闭
    #icon-yuyinguanbi
  • 语音撤回
    #icon-yuyinchehui
  • 语音2
    #icon-yuyin1
  • 停车场
    #icon-tingchechang
  • 电视机
    #icon-dianshiji
  • 保存
    #icon-baocun
  • 清空
    #icon-qingkong
  • 收藏2
    #icon-shoucang
  • 关闭箭头
    #icon-guanbijiantou
  • 收藏
    #icon-shoucang1
  • 搜索
    #icon-sousuo
  • 分享
    #icon-fenxiang
  • 消息
    #icon-xiaoxi
  • 喜欢2
    #icon-xihuan
  • 喜欢
    #icon-xihuan1
  • 音量
    #icon-yinliang
  • 精选
    #icon-jingxuan
  • 提示
    #icon-tishi
  • 水果
    #icon-shuiguo4
  • 健身
    #icon-jianshen
  • 地图
    #icon-ditu
  • 图片
    #icon-tupian
  • 增加
    #icon-zengjia
  • 内容2
    #icon-neirong2
  • 导航
    #icon-daohang
  • 股票
    #icon-gupiao
  • 记账本
    #icon-jizhang
  • 日历
    #icon-rili
  • IT-01
    #icon-it01
  • 音乐
    #icon-yinle
  • 阅读
    #icon-yuedu
  • 游戏
    #icon-iconset0263
  • 广播
    #icon-iconset0274
  • 计划
    #icon-jihua
  • 业务列表
    #icon-yewuliebiao
  • 编辑 笔 记事 手写
    #icon-bianjibijishishouxie
  • 亲子
    #icon-qinzi
  • 禁止
    #icon-ai55
  • 禁止
    #icon-iconforbidden
  • 体育-01
    #icon-tiyu01
  • 禁止
    #icon-jinzhi
  • 眼睛
    #icon-yanjing
  • 开心
    #icon-kaixin
  • 广播
    #icon-broadcast
  • 电脑
    #icon-diannao
  • IT监控
    #icon-ITjiankong
  • 交流
    #icon-jiaoliu
  • icon_收支记账-
    #icon-icon_shouzhijizhang-
  • 股票期权
    #icon-gupiaoqiquan
  • 股票1
    #icon-gupiao11
  • 水果
    #icon-shuiguo
  • 起床
    #icon-qichuang
  • 刷牙
    #icon-shuaya
  • 睡觉
    #icon-shuijue1
  • 刷牙
    #icon-shuaya1
  • 睡觉
    #icon-shuijue2
  • 水杯,喝水,water
    #icon-water
  • 日历
    #icon-rili1
  • 音乐
    #icon-yinyue
  • 水果
    #icon-shuiguo1
  • 闹钟
    #icon-icon-test
  • 待办
    #icon-daiban
  • 计划
    #icon-jihua2
  • 电脑
    #icon-diannao1
  • 睡觉
    #icon-shuijue3
  • 业务机会
    #icon-yewujihui
  • 待办
    #icon-daiban1
  • 体育
    #icon-tiyu
  • 打扫
    #icon-dasao
  • CN_douban FM
    #icon-CN_doubanFM
  • 微笑
    #icon-Smile
  • 待办事项
    #icon-daibanshixiang
  • 打扫
    #icon-dasao1
  • 业务
    #icon-yewu
  • 阅读
    #icon-yuedu1
  • 电脑
    #icon-diannao2
  • 股票
    #icon-gupiao2
  • 休息一下
    #icon-xiuxiyixia
  • 游戏
    #icon-youxi-yuanshijituantubiao
  • 体育-篮球
    #icon-tiyu-lanqiu
  • 体育-跑步
    #icon-tiyu-paobu
  • 体育-自行车
    #icon-tiyu-zihangche
  • 英语水平
    #icon-yingyushuiping
  • 围棋
    #icon-weiqi
  • 音乐
    #icon-yinle1
  • 电脑
    #icon-diannao4
  • 阅读
    #icon-techreport-
  • 音乐
    #icon-yinle2
  • 业务能力
    #icon-kujialeqiyezhan_yewunengli
  • 日历
    #icon-rili3
  • 冥想
    #icon-mingxiang
  • 眼镜
    #icon-yanjing1
  • 电视
    #icon-dianshi1
  • 阅读
    #icon-tubiaozhizuomoban1
  • 笔记本
    #icon-bijiben
  • 休息一下
    #icon-xiuxiyixia1
  • 打扫
    #icon-dasao2
  • 待办
    #icon-daiban2
  • 待办
    #icon-daiban3
  • 业务管理
    #icon-business-management
  • 水果
    #icon-shuiguo2
  • 电脑
    #icon-shuangsechangyongtubiao-
  • 电脑
    #icon-diannao5
  • 苹果,水果
    #icon-pingguoshuiguo
  • 水果
    #icon-shuiguo3
  • 水果类
    #icon--shuiguolei
  • 眼镜
    #icon-tubiao-
  • 笔记本
    #icon-bijiben1
  • 交流
    #icon-jiaoliu3
  • 待办
    #icon-daiban4
  • 刷牙、刷牙、牙膏
    #icon-shuaya2
  • 广播
    #icon-guangbo1
  • 阅读
    #icon-yuedu2
  • 笔记
    #icon-biji
  • 闹钟
    #icon-naozhong-
  • 音乐
    #icon-yinle4
  • 游戏
    #icon-youxi3
  • 电视
    #icon-dianshi2
  • 亲子成长
    #icon-airudiantubiaohuizhi-zhuanqu_qinzichengchang
  • 游戏
    #icon-youxi4
  • 颈椎
    #icon-jingzhui
  • 领队日记
    #icon-lingduiriji
  • 笔记
    #icon-biji1
  • 阅读
    #icon-yuedu3
  • 广播
    #icon-guangbo2
  • 冥想
    #icon-mingxiang1
  • 体育
    #icon-tiyu2
  • 休息
    #icon-iconfront-
  • 交流
    #icon-jiaoliu4
  • 开心
    #icon-kaixin3
  • 待办1
    #icon-daiban5
  • 3_2亲子关系
    #icon-_qinziguanxi
  • 微笑
    #icon-weixiao1
  • 眼睛
    #icon-view
  • 禁止
    #icon-jinzhi2
  • 英语
    #icon-yingyu2
  • 记账本
    #icon-xinbaniconshangchuan-

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>