• 临时关闭
    
  • 兴业logo
    
  • 手机
    
  • 验证码
    
  • qq空间
    
  • 朋友圈
    
  • 微信
    
  • qq
    
  • 关闭
    
  • 推广有奖
    
  • 活动规则
    
  • 智能诱导@3x
    
  • 例外停车场
    
  • 车牌
    
  • 换向2
    
  • 费用、金币
    
  • 剩余车位
    
  • 过期提醒
    
  • 须知
    
  • 商城
    
  • 
  • 
  • 积分1
    
  • 电话 呼出
    
  • 216更多-竖向
    
  • 中国
    
  • 反向寻车
    
  • 地图点位-门店
    
  • 点位背景
    
  • 门店
    
  • 趣味停车
    
  • 自助缴费
    
  • 积分
    
  • 评价
    
  • 收藏
    
  • 账单
    
  • 设置
    
  • 消息
    
  • 投诉
    
  • 优惠券
    
  • ETC
    
  • 搜索
    
  • 63向右交换
    
  • 地铁
    
  • 步行
    
  • 包月停车
    
  • 公交车服务
    
  • 预约停车
    
  • 共享停车
    
  • 场库排行
    
  • 限行信息
    
  • 线路箭头
    
  • 提示-自动识别
    
  • 换向
    
  • 自动识别
    
  • 车站
    
  • 线路
    
  • 服务
    
  • 关闭
    
  • hot
    
  • order_fill
    
  • order
    
  • 电子发票复制
    
  • 泊位提醒复制
    
  • 停车费补交复制
    
  • 我的评价复制
    
  • 共享停车复制
    
  • 我的积分复制
    
  • 停车记录复制
    
  • 我的消息复制
    
  • 我的收藏复制
    
  • 一点达复制
    
  • 我的投诉复制
    
  • 我的账单复制
    
  • 先离场后付费复制
    
  • 优惠券复制
    
  • 共享停车
    
  • 
    泊位提醒
    
  • 我的收藏
    
  • 电子发票
    
  • 停车记录
    
  • 我的积分
    
  • 停车费补交
    
  • 我的账单
    
  • 我的评价
    
  • 我的消息
    
  • 一点达
    
  • 优惠券
    
  • 我的投诉
    
  • 先离场后付费
    
  • 投诉
    
  • 停车场列表
    
  • 便捷泊车
    
  • 我的消息
    
  • 电子发票
    
  • 发票历史
    
  • 我的账单
    
  • 
  • labels
    
  • 向下
    
  • 星星
    
  • 星星
    
  • 帮助
    
  • 预约
    
  • 导航
    
  • 闹钟
    
  • 爱心
    
  • 爱心
    
  • 信号
    
  • 筛选
    
  • 足迹
    
  • 定位
    
  • 上下
    
  • 我的消息
    
  • 我的投诉
    
  • 停车记录
    
  • 我的收藏
    
  • 停车缴费2
    
  • 解绑
    
  • 添加
    
  • 我的车牌
    
  • 泊位提醒
    
  • 我的评价
    
  • 停车记录
    
  • 我的信息
    
  • 我的投诉
    
  • 系统设置
    
  • 公共停车场
    
  • 建筑物配建停车场
    
  • 道路停车泊位
    
  • traffic
    
  • enlarge
    
  • radius
    
  • reduce
    
  • legend
    
  • tips
    
  • service
    
  • 我的
    
  • 一点达
    
  • 首页
    
  • 共享停车
    
  • 泊位提醒
    
  • 停车费补交
    
  • 先离后缴
    
  • qq
    
  • wechat
    
  • weibo
    
  • eye
    
  • eye-slash
    
  • icon_cp_colorful
    
  • icon_cp
    
  • 停车场列表
    
  • 消息通知
    
  • 扣款顺序
    
  • 投诉建议
    
  • 取消签约
    
  • 交通银行
    
  • 中国银行
    
  • 欠费补缴
    
  • 支付额度设置
    
  • 删除
    
  • 向上箭头
    
  • 下 箭头大
    
  • 差评2
    
  • 点赞
    
  • 布丁
    
  • tick
    
  • 银联
    
  • 市民卡
    
  • 工商银行
    
  • 建设银行
    
  • 农业银行
    
  • 微信
    
  • 光大银行
    
  • 支付宝
    
  • 招商银行
    
  • uncheck
    
  • 欠费补缴
    
  • 微信
    
  • fail
    
  • checked
    
  • close
    
  • 支付宝
    
  • tick
    
  • success
    
  • 银联彩色
    
  • 银联
    
  • 相机
    
  • 列表
    
  • 投诉建议
    
  • 扣款顺序
    
  • 取消签约
    
  • 银联单色
    
  • 支付宝圆形
    
  • 银联
    
  • 导航
    
  • 停车联盟
    
  • 定位
    
  • 手机
    
  • 叉叉
    
  • 微信
    
  • 删除
    
  • 签约
    
  • 支付宝
    
  • 账单
    
  • 删除
    
  • 
    右箭头
    
  • 加号
    
  • 勾勾
    
  • 先离后缴
    
  • 取消发布
    
  • 时间
    
  • 设置
    
  • 左箭头
    
  • 我的
    
  • 费用
    
  • 关联
    
  • 录入
    
  • 积分
    
  • 我的钱包
    
  • 喇叭
    
  • 泊位提醒
    
  • 缴费通知
    
  • 搜索
    
  • 预定
    
  • 先离后缴
    
  • 相机
    
  • 我的系统设置
    
  • 泊位提醒记录
    
  • 预定
    
  • 时间
    
  • 收藏01
    
  • 评星02
    
  • 闹钟02
    
  • 收藏02
    
  • 问号
    
  • 闹钟01
    
  • 导航
    
  • 费用
    
  • 箭头
    
  • 筛选
    
  • 停车记录
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'BSiconfont';
  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#BSiconfont') format('svg');
}

第二步:定义使用 iconfont 的样式

.BSiconfont {
  font-family: "BSiconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="BSiconfont">&#x33;</span>

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

  • 临时关闭
    .icon-linshiguanbi
  • 兴业logo
    .icon-xingyelogo
  • 手机
    .icon-shouji1
  • 验证码
    .icon-yanzhengma
  • qq空间
    .icon-qqkongjian
  • 朋友圈
    .icon-pengyouquan
  • 微信
    .icon-weixin3
  • qq
    .icon-qq1
  • 关闭
    .icon-guanbi1
  • 推广有奖
    .icon-tuiguangyoujiang
  • 活动规则
    .icon-huodongguize
  • 智能诱导@3x
    .icon-zhinengyoudaox
  • 例外停车场
    .icon-liwaitingchechang
  • 车牌
    .icon-chepai
  • 换向2
    .icon-huanxiang1
  • 费用、金币
    .icon-feiyongjinbi
  • 剩余车位
    .icon-shengyuchewei
  • 过期提醒
    .icon-guoqitixing
  • 须知
    .icon-xuzhi
  • 商城
    .icon-shangcheng
  • .icon-jia
  • .icon-jian-tianchong
  • 积分1
    .icon-jifen2
  • 电话 呼出
    .icon-changyongtubiao-mianxing-
  • 216更多-竖向
    .icon-gengduo-shuxiang
  • 中国
    .icon-zhongguo
  • 反向寻车
    .icon-fanxiangxunche
  • 地图点位-门店
    .icon-ditudianwei-mendian
  • 点位背景
    .icon-dianweibeijing
  • 门店
    .icon-mendian
  • 趣味停车
    .icon-quweitingche
  • 自助缴费
    .icon-zizhujiaofei
  • 积分
    .icon-jifen1
  • 评价
    .icon-pingjia
  • 收藏
    .icon-shoucang2
  • 账单
    .icon-zhangdan1
  • 设置
    .icon-shezhi1
  • 消息
    .icon-xiaoxi
  • 投诉
    .icon-tousu1
  • 优惠券
    .icon-youhuiquan1
  • ETC
    .icon-ETC
  • 搜索
    .icon-sousuo1
  • 63向右交换
    .icon-xiangyoujiaohuan
  • 地铁
    .icon-ditie
  • 步行
    .icon-buxing
  • 包月停车
    .icon-baoyuetingche
  • 公交车服务
    .icon-gongjiaochefuwu
  • 预约停车
    .icon-yuyuetingche
  • 共享停车
    .icon-gongxiangtingche2
  • 场库排行
    .icon-changkupaihang
  • 限行信息
    .icon-xianhangxinxi
  • 线路箭头
    .icon-xianlujiantou
  • 提示-自动识别
    .icon-tishi-zidongshibie
  • 换向
    .icon-huanxiang
  • 自动识别
    .icon-zidongshibie
  • 车站
    .icon-chezhan
  • 线路
    .icon-xianlu
  • 服务
    .icon-fuwu
  • 关闭
    .icon-guanbi
  • hot
    .icon-hot
  • order_fill
    .icon-order_fill
  • order
    .icon-order
  • 电子发票复制
    .icon-dianzifapiaofuzhi
  • 泊位提醒复制
    .icon-boweitixingfuzhi
  • 停车费补交复制
    .icon-tingchefeibujiaofuzhi
  • 我的评价复制
    .icon-wodepingjiafuzhi
  • 共享停车复制
    .icon-gongxiangtingchefuzhi
  • 我的积分复制
    .icon-wodejifenfuzhi
  • 停车记录复制
    .icon-tingchejilufuzhi
  • 我的消息复制
    .icon-wodexiaoxifuzhi
  • 我的收藏复制
    .icon-wodeshoucangfuzhi
  • 一点达复制
    .icon-yidiandafuzhi
  • 我的投诉复制
    .icon-wodetousufuzhi
  • 我的账单复制
    .icon-wodezhangdanfuzhi
  • 先离场后付费复制
    .icon-xianlichanghoufufeifuzhi
  • 优惠券复制
    .icon-youhuiquanfuzhi
  • 共享停车
    .icon-gongxiangtingche1
  • 泊位提醒
    .icon-boweitixing3
  • 我的收藏
    .icon-wodeshoucang2
  • 电子发票
    .icon-dianzifapiao1
  • 停车记录
    .icon-tingchejilu3
  • 我的积分
    .icon-wodejifen
  • 停车费补交
    .icon-tingchefeibujiao1
  • 我的账单
    .icon-wodezhangdan1
  • 我的评价
    .icon-wodepingjia1
  • 我的消息
    .icon-wodexiaoxi2
  • 一点达
    .icon-yidianda1
  • 优惠券
    .icon-youhuiquan
  • 我的投诉
    .icon-wodetousu2
  • 先离场后付费
    .icon-xianlichanghoufufei
  • 投诉
    .icon-tousu
  • 停车场列表
    .icon-tingchechangliebiao1
  • 便捷泊车
    .icon-bianjieboche
  • 我的消息
    .icon-wodexiaoxi1
  • 电子发票
    .icon-dianzifapiao
  • 发票历史
    .icon-fapiaolishi
  • 我的账单
    .icon-wodezhangdan
  • .icon-gou
  • labels
    .icon-labels
  • 向下
    .icon-unie621
  • 星星
    .icon-xingxing2
  • 星星
    .icon-xingxing3
  • 帮助
    .icon-bangzhu-copy
  • 预约
    .icon-icon77
  • 导航
    .icon-daohang11
  • 闹钟
    .icon-clock
  • 爱心
    .icon-icon-test
  • 爱心
    .icon-aixin1
  • 信号
    .icon-cloud-signal
  • 筛选
    .icon-shaixuan1
  • 足迹
    .icon-foot
  • 定位
    .icon-dingwei
  • 上下
    .icon-shangxia
  • 我的消息
    .icon-wodexiaoxi
  • 我的投诉
    .icon-wodetousu1
  • 停车记录
    .icon-tingchejilu2
  • 我的收藏
    .icon-wodeshoucang1
  • 停车缴费2
    .icon-tingchejiaofei
  • 解绑
    .icon-jiebang
  • 添加
    .icon-tianjia
  • 我的车牌
    .icon-wodechepai
  • 泊位提醒
    .icon-boweitixing2
  • 我的评价
    .icon-wodepingjia
  • 停车记录
    .icon-tingchejilu1
  • 我的信息
    .icon-wodexinxi
  • 我的投诉
    .icon-wodetousu
  • 系统设置
    .icon-xitongshezhi
  • 公共停车场
    .icon-gonggongtingchechang
  • 建筑物配建停车场
    .icon-jianzhuwupeijiantingchechang
  • 道路停车泊位
    .icon-daolutingchebowei
  • traffic
    .icon-traffic
  • enlarge
    .icon-enlarge
  • radius
    .icon-radius
  • reduce
    .icon-reduce
  • legend
    .icon-legend
  • tips
    .icon-tips
  • service
    .icon-service
  • 我的
    .icon-wode1
  • 一点达
    .icon-yidianda
  • 首页
    .icon-shouye
  • 共享停车
    .icon-gongxiangtingche
  • 泊位提醒
    .icon-boweitixing1
  • 停车费补交
    .icon-tingchefeibujiao
  • 先离后缴
    .icon-xianlihoujiao2
  • qq
    .icon-qq
  • wechat
    .icon-wechat
  • weibo
    .icon-weibo
  • eye
    .icon-eye
  • eye-slash
    .icon-eye-slash
  • icon_cp_colorful
    .icon-icon_cp_colorful
  • icon_cp
    .icon-icon_cp
  • 停车场列表
    .icon-tingchechangliebiao
  • 消息通知
    .icon-xiaoxitongzhi
  • 扣款顺序
    .icon-koukuanshunxu1
  • 投诉建议
    .icon-tousujianyi
  • 取消签约
    .icon-quxiaoqianyue1
  • 交通银行
    .icon-yinhanglogo-
  • 中国银行
    .icon-yinhanglogo-1
  • 欠费补缴
    .icon-qianfeibujiao1
  • 支付额度设置
    .icon-zhifuedushezhi
  • 删除
    .icon-shanchu2
  • 向上箭头
    .icon-xiangshangjiantou
  • 下 箭头大
    .icon-jiantou8
  • 差评2
    .icon-chaping
  • 点赞
    .icon-dianzan
  • 布丁
    .icon-food-pudding
  • tick
    .icon-tick1
  • 银联
    .icon-yinlian3
  • 市民卡
    .icon-shiminka
  • 工商银行
    .icon-gongshangyinhang
  • 建设银行
    .icon-jiansheyinhang
  • 农业银行
    .icon-nongyeyinhang
  • 微信
    .icon-weixin2
  • 光大银行
    .icon-guangdayinhang
  • 支付宝
    .icon-zhifubao2
  • 招商银行
    .icon-zhaoshangyinhang
  • uncheck
    .icon-uncheck
  • 欠费补缴
    .icon-qianfeibujiao
  • 微信
    .icon-weixin1
  • fail
    .icon-fail
  • checked
    .icon-checked
  • close
    .icon-close
  • 支付宝
    .icon-zhifubao1
  • tick
    .icon-tick
  • success
    .icon-success
  • 银联彩色
    .icon-yinliancaise
  • 银联
    .icon-yinlian
  • 相机
    .icon-xiangji1
  • 列表
    .icon-list_icon
  • 投诉建议
    .icon-tousujianyi1
  • 扣款顺序
    .icon-koukuanshunxu
  • 取消签约
    .icon-quxiaoqianyue
  • 银联单色
    .icon-yinliandanse1
  • 支付宝圆形
    .icon-zhifubaoyuanxing
  • 银联
    .icon-yinlian1
  • 导航
    .icon-daohang1
  • 停车联盟
    .icon-tingchelianmeng
  • 定位
    .icon-dingweishangwu
  • 手机
    .icon-shouji
  • 叉叉
    .icon-chacha
  • 微信
    .icon-weixin
  • 删除
    .icon-shanchu1
  • 签约
    .icon-qianyue
  • 支付宝
    .icon-zhifubao
  • 账单
    .icon-zhangdan
  • 删除
    .icon-shanchu
  • 右箭头
    .icon-youjiantou
  • 加号
    .icon-jiahao
  • 勾勾
    .icon-gougou
  • 先离后缴
    .icon-xianlihoujiao1
  • 取消发布
    .icon-quxiaofabu
  • 时间
    .icon-shijian1
  • 设置
    .icon-shezhi
  • 左箭头
    .icon-zuojiantou
  • 我的
    .icon-wode
  • 费用
    .icon-feiyong1
  • 关联
    .icon-guanlian
  • 录入
    .icon-luru
  • 积分
    .icon-jifen
  • 我的钱包
    .icon-wodeqianbao
  • 喇叭
    .icon-laba
  • 泊位提醒
    .icon-boweitixing
  • 缴费通知
    .icon-jiaofeitongzhi
  • 搜索
    .icon-sousuo
  • 预定
    .icon-yuding1
  • 先离后缴
    .icon-xianlihoujiao
  • 相机
    .icon-xiangji
  • 我的系统设置
    .icon-wodexitongshezhi
  • 泊位提醒记录
    .icon-boweitixingjilu
  • 预定
    .icon-yuding
  • 时间
    .icon-shijian
  • 收藏01
    .icon-shoucang
  • 评星02
    .icon-pingxing
  • 闹钟02
    .icon-naozhong
  • 收藏02
    .icon-shoucang1
  • 问号
    .icon-wenhao
  • 闹钟01
    .icon-naozhong1
  • 导航
    .icon-daohang
  • 费用
    .icon-feiyong
  • 箭头
    .icon-jiantou
  • 筛选
    .icon-shaixuan
  • 停车记录
    .icon-tingchejilu

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 临时关闭
    #icon-linshiguanbi
  • 兴业logo
    #icon-xingyelogo
  • 手机
    #icon-shouji1
  • 验证码
    #icon-yanzhengma
  • qq空间
    #icon-qqkongjian
  • 朋友圈
    #icon-pengyouquan
  • 微信
    #icon-weixin3
  • qq
    #icon-qq1
  • 关闭
    #icon-guanbi1
  • 推广有奖
    #icon-tuiguangyoujiang
  • 活动规则
    #icon-huodongguize
  • 智能诱导@3x
    #icon-zhinengyoudaox
  • 例外停车场
    #icon-liwaitingchechang
  • 车牌
    #icon-chepai
  • 换向2
    #icon-huanxiang1
  • 费用、金币
    #icon-feiyongjinbi
  • 剩余车位
    #icon-shengyuchewei
  • 过期提醒
    #icon-guoqitixing
  • 须知
    #icon-xuzhi
  • 商城
    #icon-shangcheng
  • #icon-jia
  • #icon-jian-tianchong
  • 积分1
    #icon-jifen2
  • 电话 呼出
    #icon-changyongtubiao-mianxing-
  • 216更多-竖向
    #icon-gengduo-shuxiang
  • 中国
    #icon-zhongguo
  • 反向寻车
    #icon-fanxiangxunche
  • 地图点位-门店
    #icon-ditudianwei-mendian
  • 点位背景
    #icon-dianweibeijing
  • 门店
    #icon-mendian
  • 趣味停车
    #icon-quweitingche
  • 自助缴费
    #icon-zizhujiaofei
  • 积分
    #icon-jifen1
  • 评价
    #icon-pingjia
  • 收藏
    #icon-shoucang2
  • 账单
    #icon-zhangdan1
  • 设置
    #icon-shezhi1
  • 消息
    #icon-xiaoxi
  • 投诉
    #icon-tousu1
  • 优惠券
    #icon-youhuiquan1
  • ETC
    #icon-ETC
  • 搜索
    #icon-sousuo1
  • 63向右交换
    #icon-xiangyoujiaohuan
  • 地铁
    #icon-ditie
  • 步行
    #icon-buxing
  • 包月停车
    #icon-baoyuetingche
  • 公交车服务
    #icon-gongjiaochefuwu
  • 预约停车
    #icon-yuyuetingche
  • 共享停车
    #icon-gongxiangtingche2
  • 场库排行
    #icon-changkupaihang
  • 限行信息
    #icon-xianhangxinxi
  • 线路箭头
    #icon-xianlujiantou
  • 提示-自动识别
    #icon-tishi-zidongshibie
  • 换向
    #icon-huanxiang
  • 自动识别
    #icon-zidongshibie
  • 车站
    #icon-chezhan
  • 线路
    #icon-xianlu
  • 服务
    #icon-fuwu
  • 关闭
    #icon-guanbi
  • hot
    #icon-hot
  • order_fill
    #icon-order_fill
  • order
    #icon-order
  • 电子发票复制
    #icon-dianzifapiaofuzhi
  • 泊位提醒复制
    #icon-boweitixingfuzhi
  • 停车费补交复制
    #icon-tingchefeibujiaofuzhi
  • 我的评价复制
    #icon-wodepingjiafuzhi
  • 共享停车复制
    #icon-gongxiangtingchefuzhi
  • 我的积分复制
    #icon-wodejifenfuzhi
  • 停车记录复制
    #icon-tingchejilufuzhi
  • 我的消息复制
    #icon-wodexiaoxifuzhi
  • 我的收藏复制
    #icon-wodeshoucangfuzhi
  • 一点达复制
    #icon-yidiandafuzhi
  • 我的投诉复制
    #icon-wodetousufuzhi
  • 我的账单复制
    #icon-wodezhangdanfuzhi
  • 先离场后付费复制
    #icon-xianlichanghoufufeifuzhi
  • 优惠券复制
    #icon-youhuiquanfuzhi
  • 共享停车
    #icon-gongxiangtingche1
  • 泊位提醒
    #icon-boweitixing3
  • 我的收藏
    #icon-wodeshoucang2
  • 电子发票
    #icon-dianzifapiao1
  • 停车记录
    #icon-tingchejilu3
  • 我的积分
    #icon-wodejifen
  • 停车费补交
    #icon-tingchefeibujiao1
  • 我的账单
    #icon-wodezhangdan1
  • 我的评价
    #icon-wodepingjia1
  • 我的消息
    #icon-wodexiaoxi2
  • 一点达
    #icon-yidianda1
  • 优惠券
    #icon-youhuiquan
  • 我的投诉
    #icon-wodetousu2
  • 先离场后付费
    #icon-xianlichanghoufufei
  • 投诉
    #icon-tousu
  • 停车场列表
    #icon-tingchechangliebiao1
  • 便捷泊车
    #icon-bianjieboche
  • 我的消息
    #icon-wodexiaoxi1
  • 电子发票
    #icon-dianzifapiao
  • 发票历史
    #icon-fapiaolishi
  • 我的账单
    #icon-wodezhangdan
  • #icon-gou
  • labels
    #icon-labels
  • 向下
    #icon-unie621
  • 星星
    #icon-xingxing2
  • 星星
    #icon-xingxing3
  • 帮助
    #icon-bangzhu-copy
  • 预约
    #icon-icon77
  • 导航
    #icon-daohang11
  • 闹钟
    #icon-clock
  • 爱心
    #icon-icon-test
  • 爱心
    #icon-aixin1
  • 信号
    #icon-cloud-signal
  • 筛选
    #icon-shaixuan1
  • 足迹
    #icon-foot
  • 定位
    #icon-dingwei
  • 上下
    #icon-shangxia
  • 我的消息
    #icon-wodexiaoxi
  • 我的投诉
    #icon-wodetousu1
  • 停车记录
    #icon-tingchejilu2
  • 我的收藏
    #icon-wodeshoucang1
  • 停车缴费2
    #icon-tingchejiaofei
  • 解绑
    #icon-jiebang
  • 添加
    #icon-tianjia
  • 我的车牌
    #icon-wodechepai
  • 泊位提醒
    #icon-boweitixing2
  • 我的评价
    #icon-wodepingjia
  • 停车记录
    #icon-tingchejilu1
  • 我的信息
    #icon-wodexinxi
  • 我的投诉
    #icon-wodetousu
  • 系统设置
    #icon-xitongshezhi
  • 公共停车场
    #icon-gonggongtingchechang
  • 建筑物配建停车场
    #icon-jianzhuwupeijiantingchechang
  • 道路停车泊位
    #icon-daolutingchebowei
  • traffic
    #icon-traffic
  • enlarge
    #icon-enlarge
  • radius
    #icon-radius
  • reduce
    #icon-reduce
  • legend
    #icon-legend
  • tips
    #icon-tips
  • service
    #icon-service
  • 我的
    #icon-wode1
  • 一点达
    #icon-yidianda
  • 首页
    #icon-shouye
  • 共享停车
    #icon-gongxiangtingche
  • 泊位提醒
    #icon-boweitixing1
  • 停车费补交
    #icon-tingchefeibujiao
  • 先离后缴
    #icon-xianlihoujiao2
  • qq
    #icon-qq
  • wechat
    #icon-wechat
  • weibo
    #icon-weibo
  • eye
    #icon-eye
  • eye-slash
    #icon-eye-slash
  • icon_cp_colorful
    #icon-icon_cp_colorful
  • icon_cp
    #icon-icon_cp
  • 停车场列表
    #icon-tingchechangliebiao
  • 消息通知
    #icon-xiaoxitongzhi
  • 扣款顺序
    #icon-koukuanshunxu1
  • 投诉建议
    #icon-tousujianyi
  • 取消签约
    #icon-quxiaoqianyue1
  • 交通银行
    #icon-yinhanglogo-
  • 中国银行
    #icon-yinhanglogo-1
  • 欠费补缴
    #icon-qianfeibujiao1
  • 支付额度设置
    #icon-zhifuedushezhi
  • 删除
    #icon-shanchu2
  • 向上箭头
    #icon-xiangshangjiantou
  • 下 箭头大
    #icon-jiantou8
  • 差评2
    #icon-chaping
  • 点赞
    #icon-dianzan
  • 布丁
    #icon-food-pudding
  • tick
    #icon-tick1
  • 银联
    #icon-yinlian3
  • 市民卡
    #icon-shiminka
  • 工商银行
    #icon-gongshangyinhang
  • 建设银行
    #icon-jiansheyinhang
  • 农业银行
    #icon-nongyeyinhang
  • 微信
    #icon-weixin2
  • 光大银行
    #icon-guangdayinhang
  • 支付宝
    #icon-zhifubao2
  • 招商银行
    #icon-zhaoshangyinhang
  • uncheck
    #icon-uncheck
  • 欠费补缴
    #icon-qianfeibujiao
  • 微信
    #icon-weixin1
  • fail
    #icon-fail
  • checked
    #icon-checked
  • close
    #icon-close
  • 支付宝
    #icon-zhifubao1
  • tick
    #icon-tick
  • success
    #icon-success
  • 银联彩色
    #icon-yinliancaise
  • 银联
    #icon-yinlian
  • 相机
    #icon-xiangji1
  • 列表
    #icon-list_icon
  • 投诉建议
    #icon-tousujianyi1
  • 扣款顺序
    #icon-koukuanshunxu
  • 取消签约
    #icon-quxiaoqianyue
  • 银联单色
    #icon-yinliandanse1
  • 支付宝圆形
    #icon-zhifubaoyuanxing
  • 银联
    #icon-yinlian1
  • 导航
    #icon-daohang1
  • 停车联盟
    #icon-tingchelianmeng
  • 定位
    #icon-dingweishangwu
  • 手机
    #icon-shouji
  • 叉叉
    #icon-chacha
  • 微信
    #icon-weixin
  • 删除
    #icon-shanchu1
  • 签约
    #icon-qianyue
  • 支付宝
    #icon-zhifubao
  • 账单
    #icon-zhangdan
  • 删除
    #icon-shanchu
  • 右箭头
    #icon-youjiantou
  • 加号
    #icon-jiahao
  • 勾勾
    #icon-gougou
  • 先离后缴
    #icon-xianlihoujiao1
  • 取消发布
    #icon-quxiaofabu
  • 时间
    #icon-shijian1
  • 设置
    #icon-shezhi
  • 左箭头
    #icon-zuojiantou
  • 我的
    #icon-wode
  • 费用
    #icon-feiyong1
  • 关联
    #icon-guanlian
  • 录入
    #icon-luru
  • 积分
    #icon-jifen
  • 我的钱包
    #icon-wodeqianbao
  • 喇叭
    #icon-laba
  • 泊位提醒
    #icon-boweitixing
  • 缴费通知
    #icon-jiaofeitongzhi
  • 搜索
    #icon-sousuo
  • 预定
    #icon-yuding1
  • 先离后缴
    #icon-xianlihoujiao
  • 相机
    #icon-xiangji
  • 我的系统设置
    #icon-wodexitongshezhi
  • 泊位提醒记录
    #icon-boweitixingjilu
  • 预定
    #icon-yuding
  • 时间
    #icon-shijian
  • 收藏01
    #icon-shoucang
  • 评星02
    #icon-pingxing
  • 闹钟02
    #icon-naozhong
  • 收藏02
    #icon-shoucang1
  • 问号
    #icon-wenhao
  • 闹钟01
    #icon-naozhong1
  • 导航
    #icon-daohang
  • 费用
    #icon-feiyong
  • 箭头
    #icon-jiantou
  • 筛选
    #icon-shaixuan
  • 停车记录
    #icon-tingchejilu

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>