• 公交
    
  • open_email
    
  • 银行账号icon
    
  • 退票
    
  • 大巴
    
  • bus
    
  • e-mail
    
  • 金额
    
  • 步行
    
  • 订单
    
  • 物流快递
    
  • 刷新
    
  • 打勾
    
  • 中巴车
    
  • 保养
    
  • 保养
    
  • 群蜂头像
    
  • 姓名
    
  • 搜索
    
  • 箭头
    
  • 视频监控
    
  • 充值
    
  • 箭头
    
  • email
    
  • 客单价最低
    
  • 座位数
    
  • 首页
    
  • 会员
    
  • 电话
    
  • 申领查询
    
  • 向右箭头
    
  • 会员
    
  • 打勾
    
  • 条码
    
  • 订单
    
  • 箭头
    
  • 金额
    
  • 失败
    
  • 箭头
    
  • 箭头
    
  • 星级
    
  • 位置
    
  • 意见反馈
    
  • 向下箭头
    
  • 充值
    
  • 身份证
    
  • 首页
    
  • 位置
    
  • 展开
    
  • 交易记录
    
  • 钱包 支付买家
    
  • bus
    
  • 刷新
    
  • 会员
    
  • 定制
    
  • 下拉
    
  • bus
    
  • 关注
    
  • 404
    
  • 设置
    
  • 箭头
    
  • 刷卡
    
  • 验证码
    
  • 箭头2
    
  • 退出
    
  • 技术支持 支持 智能 智能服务 服务 客服 技术
    
  • 客单价
    
  • 客服
    
  • 钱包
    
  • 交易记录
    
  • 购票1
    
  • 购票2
    
  • 旅游
    
  • 反馈_
    
  • 打勾
    
  • 通知
    
  • 座位数
    
  • 旅游
    
  • bus
    
  • 充值
    
  • icon-电话拨打
    
  • 资产统计
    
  • 抢单
    
  • 密码
    
  • 位置
    
  • 姓名
    
  • 离场休息
    
  • 金额
    
  • 通知
    
  • 巴士
    
  • 购票
    
  • 实名认证
    
  • q-取消订单
    
  • 地图类_公交车正常
    
  • 投诉
    
  • 图标1_书、小说
    
  • 上箭头大
    
  • 审批
    
  • 来源
    
  • 步行
    
  • 公交车
    
  • 退款
    
  • 销量箭头
    
  • 部门
    
  • 已完成
    
  • 反馈
    
  • 拍照
    
  • 条码
    
  • 原因
    
  • 反馈
    
  • 取消原因
    
  • 服务
    
  • 退款
    
  • 卡券
    
  • 会员
    
  • 箭头
    
  • 位置
    
  • 圈钩
    
  • 右箭头
    
  • 箭头
    
  • 宇宙星球-11
    
  • 退款
    
  • 余额
    
  • 统计
    
  • 定制游
    
  • 统计
    
  • 30公交站点
    
  • 手机
    
  • email-open-outline
    
  • 物料管理
    
  • time
    
  • 通知
    
  • 新增
    
  • 消费
    
  • 已完成
    
  • 取消订单
    
  • 企业
    
  • 会员
    
  • 倒计时
    
  • 站牌
    
  • 客户详情-拨打电话
    
  • 汽车票
    
  • 投诉
    
  • 旅游
    
  • 计划
    
  • 微信
    
  • 拨打
    
  • 拨打
    
  • 短信验证码
    
  • 事务管理
    
  • bus_tickets
    
  • web__比特币右箭头
    
  • web__比特币左箭头
    
  • 
  • 切换
    
  • 退货
    
  • 油耗统计
    
  • loading
    
  • 手机
    
  • 库存
    
  • 订单
    
  • 免费穿梭巴士
    
  • 评价
    
  • 分享
    
  • 会员
    
  • 校园
    
  • 修改价格
    
  • 位置
    
  • 新闻
    
  • 投诉
    
  • 支付
    
  • 统计
    
  • 司机
    
  • 发票
    
  • 倒计时
    
  • 微信
    
  • 路线
    
  • 来源
    
  • 新增
    
  • 大巴
    
  • 箭头
    
  • 箭头
    
  • 待确认
    
  • 客服
    
  • 验证码
    
  • 双箭头
    
  • 搜索
    
  • 站点
    
  • 日期
    
  • 打勾
    
  • 通知
    
  • 倒计时
    
  • 身份证
    
  • 日期
    
  • 定制
    
  • loading
    
  • 计划
    
  • 退
    
  • 审批
    
  • 评价
    
  • 投诉
    
  • 箭头
    
  • fe-mail
    
  • 配置
    
  • 旅客
    
  • 回复
    
  • 统计
    
  • 钱包
    
  • 游戏
    
  • 车牌
    
  • 租车出行
    
  • 视频监控
    
  • 违规处罚
    
  • 404
    
  • 报警
    
  • 手机
    
  • 已完成
    
  • 支付宝
    
  • 倒计时
    
  • 视频监控
    
  • 头像
    
  • 删 除
    
  • 密码
    
  • 电话
    
  • 取消订单
    
  • 关注 (1)
    
  • 搜索
    
  • 倒计时
    
  • 身份证
    
  • 密码
    
  • 手机
    
  • 车牌
    
  • 
  • 客运站查询
    
  • 司机
    
  • 暂停
    
  • 消费
    
  • 下箭头
    
  • 编辑
    
  • 运行时-倒计时
    
  • 投诉
    
  • 十字线,大牛财经
    
  • 员工工号
    
  • search close
    
  • 切换
    
  • 数量
    
  • 付款
    
  • 乘车
    
  • 失败
    
  • 上传
    
  • 倒计时
    
  • loading
    
  • loading
    
  • 打勾
    
  • 密码
    
  • 支付
    
  • 订单
    
  • 双箭头
    
  • 失败
    
  • 物料
    
  • 密码
    
  • 员工工号
    
  • 分享
    
  • 分享
    
  • 车牌号
    
  • 原因
    
  • 校园
    
  • 车巴巴-油耗2
    
  • 钱包
    
  • 座机拨打-挂断
    
  • 位置
    
  • 视频监控
    
  • 包车客运
    
  • bus
    
  • 双箭头
    
  • 下箭头
    
  • 成功
    
  • 司机
    
  • 客服
    
  • 23验票
    
  • 日期
    
  • 待拨打
    
  • 404
    
  • 轿车
    
  • 金额
    
  • 404
    
  • 服务商
    
  • 服务商
    
  • 编辑
    
  • 刷新
    
  • 新增
    
  • AK-JT轿车
    
  • 服务商
    
  • 评价
    
  • 税号
    
  • 旅客升舱
    
  • 配置
    
  • 轿车正面
    
  • 妈妈新知icon_休息一下
    
  • 倒计时
    
  • 视频监控
    
  • 手机
    
  • 设置
    
  • 数据配置_汽车票
    
  • 
  • 企业
    
  • 关注
    
  • 秒表 倒计时 计时器 线性
    
  • 通知
    
  • 司机
    
  • 电话
    
  • 投诉
    
  • 来源
    
  • 旅游巴士停车站
    
  • 司机管理
    
  • 搜索
    
  • 退款
    
  • 星级
    
  • 位置
    
  • 双箭头
    
  • 打勾
    
  • 付款通知
    
  • 退款关怀
    
  • 部门
    
  • 旅游
    
  • bus
    
  • 税号管理
    
  • 付款
    
  • 校园
    
  • 数量
    
  • 取消原因
    
  • 订单
    
  • 金额
    
  • 服务商
    
  • 浏览
    
  • 切换
    
  • 验证码
    
  • 报警
    
  • 搜索
    
  • 已完成 (1)
    
  • 站点
    
  • 视频监控
    
  • 箭头
    
  • 新增
    
  • 上传
    
  • 申请
    
  • 待确认
    
  • 播放
    
  • 银行
    
  • 车票机票
    
  • 投诉
    
  • 刷新 (2)
    
  • 报警
    
  • 小轿车
    
  • 企业
    
  • 发票
    
  • 电话
    
  • 验票
    
  • 下箭头
    
  • 姓名
    
  • 支付宝
    
  • 
  • email
    
  • 验证码
    
  • 付款
    
  • 客服
    
  • 切换
    
  • 来源
    
  • 会员
    
  • 微信
    
  • 考勤
    
  • 身份证
    
  • 密码
    
  • 日期
    
  • 编辑
    
  • 箭头
    
  • 密码
    
  • 支付宝
    
  • 删 除
    
  • 携带服务犬旅客
    
  • 下箭头
    
  • icon_车辆停靠
    
  • 退出
    
  • 箭头-右-粗线条1
    
  • 金额
    
  • 银行
    
  • 倒计时
    
  • bus
    
  • 今日取消订单
    
  • 21 E-mail
    
  • 刷新
    
  • 快进
    
  • 首页
    
  • 通知
    
  • 收入
    
  • 电话-400拨打
    
  • 设置
    
  • 02-路线
    
  • 车牌
    
  • 切换
    
  • 失败
    
  • 机场大巴
    
  • 企业
    
  • 车牌
    
  • 错题
    
  • 日期
    
  • 车票
    
  • 新增
    
  • 错题
    
  • 星级
    
  • 收入
    
  • 轨迹路线
    
  • 性别
    
  • icon_行驶里程
    
  • close
    
  • 5-1小轿车
    
  • 切换
    
  • 退出
    
  • iconfont icon-yonghu
    
  • 拨打客服
    
  • 路线管理
    
  • close
    
  • 新东方-刷新图标
    
  • 企业
    
  • 打勾
    
  • 暂停 停止
    
  • 计划管理
    
  • 退出
    
  • 已完成
    
  • 新东方-刷新图标
    
  • 二维码
    
  • 横竖屏
    
  • 钱包
    
  • 今日行驶里程:339.00km
    
  • 投诉
    
  • 旅游
    
  • 用车申请
    
  • 
    新增
    
  • email
    
  • 工号
    
  • 统计
    
  • 来源码-o
    
  • 行驶里程
    
  • 规_双箭头
    
  • 校园地图
    
  • 旅客
    
  • 返回顶部
    
  • 路线推荐
    
  • 校园
    
  • 密码
    
  • 客运发送旅客
    
  • 长途车票
    
  • 保养
    
  • 公交客流总量
    
  • 条码
    
  • 播放
    
  • 双向箭头
    
  • 003-email
    
  • 拨打
    
  • 电子站牌
    
  • 订单
    
  • 报警
    
  • 拨打电话
    
  • 事务中心
    
  • 拨打电话
    
  • 视频
    
  • 题库
    
  • 客运站
    
  • 配置
    
  • 消费
    
  • bus
    
  • 二维码
    
  • 领取工单
    
  • 客 服
    
  • 网约车
    
  • 6.2.21港湾式公交停靠站
    
  • 向下
    
  • 休息
    
  • 地图
    
  • 违规
    
  • 旅游线路
    
  • 灵活就业社保补贴申领
    
  • 视频监控
    
  • 巴士
    
  • 休息
    
  • 出行
    
  • 坏坏表情
    
  • 花痴表情
    
  • 暂停 停止
    
  • 其他考试记录
    
  • 油耗
    
  • 行人
    
  • 用户协议
    

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

  • 公交
    .icongongjiao
  • open_email
    .iconopenemail
  • 银行账号icon
    .iconyinxingzhanghaoicon
  • 退票
    .icontuipiao
  • 大巴
    .iconweibiaoti107
  • bus
    .iconbus5
  • e-mail
    .icone-mail
  • 金额
    .iconjine
  • 步行
    .iconbuxing
  • 订单
    .icondingdan
  • 物流快递
    .iconwuliukuaidi
  • 刷新
    .iconshuaxin
  • 打勾
    .icondagou
  • 中巴车
    .icon4
  • 保养
    .iconbaoyang
  • 保养
    .iconbaoyang1
  • 群蜂头像
    .iconqunfengtouxiang
  • 姓名
    .iconxingming
  • 搜索
    .iconbuchongiconsvg08
  • 箭头
    .iconjiantou2
  • 视频监控
    .iconshipinjiankong
  • 充值
    .iconchongzhi
  • 箭头
    .iconjiantou-copy
  • email
    .iconemail
  • 客单价最低
    .iconiconfontmin
  • 座位数
    .iconzuoweishu
  • 首页
    .iconshouye
  • 会员
    .iconhuiyuan
  • 电话
    .icondianhua
  • 申领查询
    .iconshenlingchaxun
  • 向右箭头
    .iconiconset0438
  • 会员
    .iconhuiyuan1
  • 打勾
    .icondagou1
  • 条码
    .icontiaoma
  • 订单
    .icondingdan1
  • 箭头
    .iconjiantou1
  • 金额
    .iconjine4
  • 失败
    .iconshibai
  • 箭头
    .iconjiantouarrow484
  • 箭头
    .iconjiantouarrow493
  • 星级
    .iconxingji
  • 位置
    .iconweizhi
  • 意见反馈
    .iconyijianfankui
  • 向下箭头
    .iconxiangxiajiantou
  • 充值
    .iconchongzhi0101
  • 身份证
    .iconzv1
  • 首页
    .iconshouye1
  • 位置
    .iconicon-yxj-location
  • 展开
    .iconzhankai
  • 交易记录
    .iconjiaoyijilu1
  • 钱包 支付买家
    .iconqianbaozhifumaijia
  • bus
    .iconbus
  • 刷新
    .iconshuaxin1
  • 会员
    .iconhuiyuan2
  • 定制
    .icondingzhi
  • 下拉
    .iconxiala
  • bus
    .iconbus1
  • 关注
    .iconxiazai12
  • 404
    .icon404
  • 设置
    .iconai-set
  • 箭头
    .iconjiantou-copy1
  • 刷卡
    .iconswipe
  • 验证码
    .iconellipsis
  • 箭头2
    .iconjiantou21
  • 退出
    .icontuichu
  • 技术支持 支持 智能 智能服务 服务 客服 技术
    .iconjishuzhichizhichizhinengzhinengfuwufuwukefujishu
  • 客单价
    .iconkedanjia
  • 客服
    .iconkefu
  • 钱包
    .iconqianbao
  • 交易记录
    .iconjiaoyijilu
  • 购票1
    .icongoupiao1
  • 购票2
    .icongoupiao2
  • 旅游
    .iconlvyou
  • 反馈_
    .iconfankui
  • 打勾
    .icondagou2
  • 通知
    .icontongzhi
  • 座位数
    .iconzuoweishu1
  • 旅游
    .iconlvyou1
  • bus
    .iconbus2
  • 充值
    .iconchongzhi2
  • icon-电话拨打
    .iconiconfontdianhua
  • 资产统计
    .icontongji
  • 抢单
    .iconqiangdan
  • 密码
    .iconmima5
  • 位置
    .icondizhi
  • 姓名
    .iconxingming1
  • 离场休息
    .iconlichangxiuxi
  • 金额
    .iconjine1
  • 通知
    .icontongzhi5
  • 巴士
    .iconbashi
  • 购票
    .icongoupiao
  • 实名认证
    .iconwebicon301
  • q-取消订单
    .iconqquxiaodingdan
  • 地图类_公交车正常
    .icondituleigongjiaochezhengchang
  • 投诉
    .icontousu6
  • 图标1_书、小说
    .icontubiao1shuxiaoshuo
  • 上箭头大
    .iconuparrowbig
  • 审批
    .iconshenpi
  • 来源
    .iconlaiyuan
  • 步行
    .iconbuxing1
  • 公交车
    .icongongjiaoche
  • 退款
    .icontuikuan
  • 销量箭头
    .iconxiaoliangjiantou
  • 部门
    .icon48copy9
  • 已完成
    .iconyiwancheng
  • 反馈
    .iconfankui1
  • 拍照
    .iconpaizhao
  • 条码
    .iconicon183
  • 原因
    .iconyuanyin
  • 反馈
    .iconfankui2
  • 取消原因
    .icone64c
  • 服务
    .iconfuwu
  • 退款
    .icontuikuan1
  • 卡券
    .iconqiaquan
  • 会员
    .iconhuiyuan3
  • 箭头
    .iconarrowll-copy
  • 位置
    .iconweizhi1
  • 圈钩
    .iconquangou
  • 右箭头
    .iconright
  • 箭头
    .iconjiantou
  • 宇宙星球-11
    .iconyuzhouxingqiu-11
  • 退款
    .icontuikuan2
  • 余额
    .iconyue
  • 统计
    .icontongji1
  • 定制游
    .icondingzhiyou
  • 统计
    .icontongji4
  • 30公交站点
    .icongongjiaozhandian
  • 手机
    .iconshouji
  • email-open-outline
    .iconemail-open-outline
  • 物料管理
    .iconwuliaoguanli
  • time
    .icontime
  • 通知
    .icontongzhi1
  • 新增
    .iconxinzeng
  • 消费
    .iconxiaofei
  • 已完成
    .iconyiwancheng1
  • 取消订单
    .iconquxiaodindan
  • 企业
    .iconqiye
  • 会员
    .iconhuiyuan4
  • 倒计时
    .icondaojishi
  • 站牌
    .iconzhanpai
  • 客户详情-拨打电话
    .iconkehuxiangqing-bodadianhua
  • 汽车票
    .iconqichepiao
  • 投诉
    .icontousu
  • 旅游
    .iconlvyou2
  • 计划
    .iconjihua
  • 微信
    .iconweixin
  • 拨打
    .iconboda
  • 拨打
    .iconboda1
  • 短信验证码
    .iconyanzhengma
  • 事务管理
    .iconshiwuguanli
  • bus_tickets
    .iconbus_tickets
  • web__比特币右箭头
    .iconweb__bitebiyoujiantou
  • web__比特币左箭头
    .iconweb__bitebizuojiantou
  • .iconyun
  • 切换
    .iconqiehuan5
  • 退货
    .icontuihuo
  • 油耗统计
    .iconyouhaotongji
  • loading
    .iconloading
  • 手机
    .iconshouji1
  • 库存
    .iconkucun
  • 订单
    .icondingdan2
  • 免费穿梭巴士
    .iconmianfeichuansuobashi
  • 评价
    .iconsps
  • 分享
    .icontubiaozhizuomoban
  • 会员
    .iconhuiyuan5
  • 校园
    .iconxiaoyuan
  • 修改价格
    .iconxiugaijiage
  • 位置
    .iconweizhi2
  • 新闻
    .iconnews_icon
  • 投诉
    .icontousu1
  • 支付
    .iconzhifu
  • 统计
    .icontongji5
  • 司机
    .iconsiji
  • 发票
    .iconfapiao
  • 倒计时
    .icondaojishi1
  • 微信
    .iconweixin1
  • 路线
    .iconluxian
  • 来源
    .iconlaiyuan1
  • 新增
    .iconxinzeng1
  • 大巴
    .icondaba
  • 箭头
    .iconjiantou-copy-copy
  • 箭头
    .iconjiantou3
  • 待确认
    .icondaiqueren
  • 客服
    .iconkefu1
  • 验证码
    .iconyanzhengma1
  • 双箭头
    .iconshuangjiantou3
  • 搜索
    .iconsousuo
  • 站点
    .iconzhandian
  • 日期
    .iconriqi
  • 打勾
    .icondagou-copy
  • 通知
    .icontongzhi2
  • 倒计时
    .icondaojishi2
  • 身份证
    .iconshenfenzheng
  • 日期
    .iconriqi1
  • 定制
    .icondingzhi1
  • loading
    .iconloading1
  • 计划
    .iconjihua1
  • 退
    .icontui
  • 审批
    .iconshenpi1
  • 评价
    .iconpingjia-copy
  • 投诉
    .iconhot
  • 箭头
    .iconchevron-left
  • fe-mail
    .iconmail
  • 配置
    .iconpeizhi
  • 旅客
    .iconlvke
  • 回复
    .iconhuifu
  • 统计
    .icontongji2
  • 钱包
    .iconqianbao3
  • 游戏
    .iconyouxi
  • 车牌
    .iconchepai
  • 租车出行
    .iconzuchechuhang
  • 视频监控
    .iconshipinjiankong1
  • 违规处罚
    .iconweiguichufa
  • 404
    .iconicon-test
  • 报警
    .iconicon-life-alarm
  • 手机
    .iconshouji2
  • 已完成
    .iconyiwancheng2
  • 支付宝
    .iconzhifubao
  • 倒计时
    .icondaojishi3
  • 视频监控
    .iconshipinjiankong2
  • 头像
    .icontouxiang
  • 删 除
    .iconshanchu1
  • 密码
    .iconmima
  • 电话
    .icondianhua1
  • 取消订单
    .iconquxiaodingdan
  • 关注 (1)
    .iconguanzhu
  • 搜索
    .iconsousuo1
  • 倒计时
    .icondaojishi6
  • 身份证
    .iconcredentials_icon
  • 密码
    .iconpassword
  • 手机
    .icontubiao
  • 车牌
    .iconchepai1
  • .iconyun1
  • 客运站查询
    .iconkeyunzhanchaxun
  • 司机
    .iconsiji1
  • 暂停
    .iconzanting
  • 消费
    .iconcurrency
  • 下箭头
    .iconf11-copy1-copy
  • 编辑
    .iconbianji
  • 运行时-倒计时
    .iconyunhangshi-daojishi
  • 投诉
    .icontousu2
  • 十字线,大牛财经
    .iconshizixian
  • 员工工号
    .iconyuangonggonghao
  • search close
    .iconsearchclose
  • 切换
    .iconqiehuan
  • 数量
    .iconshuliang
  • 付款
    .iconfukuan
  • 乘车
    .iconchengche
  • 失败
    .iconshibai1
  • 上传
    .iconshangchuan
  • 倒计时
    .iconFill
  • loading
    .iconloading2
  • loading
    .iconloading3
  • 打勾
    .icondagou4
  • 密码
    .iconweibiaoti-1
  • 支付
    .iconicon_pay
  • 订单
    .icontubiaolunkuo-
  • 双箭头
    .iconarrow-double-right
  • 失败
    .iconshibai2
  • 物料
    .iconwuliao
  • 密码
    .iconmima1
  • 员工工号
    .iconyuangonggonghao1
  • 分享
    .iconfenxiang
  • 分享
    .iconfenxiang1
  • 车牌号
    .iconchepaihao
  • 原因
    .iconyuanyin1
  • 校园
    .iconxiaoyuan1
  • 车巴巴-油耗2
    .iconchebaba-youhao
  • 钱包
    .iconqianbao1
  • 座机拨打-挂断
    .iconzuojiboda-guaduan
  • 位置
    .iconweizhi3
  • 视频监控
    .icongexinghuapingtaitubiao-
  • 包车客运
    .iconbaochekeyun
  • bus
    .iconbus6
  • 双箭头
    .iconshuangjiantou
  • 下箭头
    .iconf11
  • 成功
    .iconchenggong
  • 司机
    .iconsiji2
  • 客服
    .iconkefu2
  • 23验票
    .iconyanpiao
  • 日期
    .iconriqi2
  • 待拨打
    .icondaiboda
  • 404
    .iconicon-test1
  • 轿车
    .iconjiaoche
  • 金额
    .iconjine2
  • 404
    .iconicon-test2
  • 服务商
    .iconfuwushang
  • 服务商
    .iconfuwushang1
  • 编辑
    .iconbianji1
  • 刷新
    .iconshuaxin2
  • 新增
    .iconxinzeng2
  • AK-JT轿车
    .iconjt_jiaoche
  • 服务商
    .iconfuwushang2
  • 评价
    .iconpingjiazhuanhuan
  • 税号
    .iconshuihao
  • 旅客升舱
    .iconlvkeshengcang
  • 配置
    .iconpeizhi1
  • 轿车正面
    .iconjiaochezhengmian
  • 妈妈新知icon_休息一下
    .iconmamaxinzhiicon_xiuxiyixia
  • 倒计时
    .icondaojishi4
  • 视频监控
    .iconspjk
  • 手机
    .iconshouji3
  • 设置
    .iconshezhi
  • 数据配置_汽车票
    .iconshujupeizhi_qichepiao
  • .iconqiang
  • 企业
    .iconqiye1
  • 关注
    .iconguanzhu1
  • 秒表 倒计时 计时器 线性
    .iconmiaobiaodaojishijishiqixianxing
  • 通知
    .icontongzhi3
  • 司机
    .iconsiji3
  • 电话
    .icondianhua2
  • 投诉
    .icontousu3
  • 来源
    .iconlaiyuan2
  • 旅游巴士停车站
    .iconlvyoubashitingchezhan
  • 司机管理
    .iconsijiguanli
  • 搜索
    .iconsousuo2
  • 退款
    .icontuikuan3
  • 星级
    .iconxingji1
  • 位置
    .iconweizhi4
  • 双箭头
    .iconshuangjiantou1
  • 打勾
    .icondagou3
  • 付款通知
    .iconfukuantongzhi
  • 退款关怀
    .icontuikuanguanhuai
  • 部门
    .iconbumen
  • 旅游
    .iconlvyou3
  • bus
    .iconbus3
  • 税号管理
    .iconshuihaoguanli
  • 付款
    .iconfukuan1
  • 校园
    .iconxiaoyuan2
  • 数量
    .iconshuliang1
  • 取消原因
    .iconquxiaoyuanyin
  • 订单
    .icondingdan3
  • 金额
    .iconjine3
  • 服务商
    .iconfuwushang3
  • 浏览
    .iconliulan-copy
  • 切换
    .iconqiehuan1
  • 验证码
    .iconyanzhengma3
  • 报警
    .iconbaojing
  • 搜索
    .iconsousuo3
  • 已完成 (1)
    .iconyiwancheng3
  • 站点
    .iconzhandian1
  • 视频监控
    .iconshipinjiankong3
  • 箭头
    .iconarrowRight
  • 新增
    .iconxinzeng3
  • 上传
    .iconshangchuan1
  • 申请
    .iconshenqing
  • 待确认
    .icondaiqueren1
  • 播放
    .iconbofang
  • 银行
    .iconyinhang
  • 车票机票
    .iconchepiaojipiao
  • 投诉
    .icontousu4
  • 刷新 (2)
    .iconshuaxin3
  • 报警
    .iconicon-life-alarm-copy-copy
  • 小轿车
    .iconxiaojiaoche
  • 企业
    .iconqiye2
  • 发票
    .iconfapiao1
  • 电话
    .iconweibiaoti
  • 验票
    .iconyanpiao1
  • 下箭头
    .iconSolid-arrow-down
  • 姓名
    .iconxingming2
  • 支付宝
    .iconalipay
  • .iconxing
  • email
    .iconemail1
  • 验证码
    .iconyanzhengma2
  • 付款
    .iconfukuan2
  • 客服
    .iconkefu3
  • 切换
    .iconqiehuan2
  • 来源
    .iconlaiyuan3
  • 会员
    .iconhuiyuan6
  • 微信
    .iconweixin2
  • 考勤
    .iconkaoqin
  • 身份证
    .iconshenfenzheng1
  • 密码
    .iconmima2
  • 日期
    .iconriqi3
  • 编辑
    .iconxiugaicopy
  • 箭头
    .iconicon-test3
  • 密码
    .iconmima3
  • 支付宝
    .iconzhifubao1
  • 删 除
    .iconshanchu
  • 携带服务犬旅客
    .iconxiedaifuwuquanlvke
  • 下箭头
    .iconarrow_left
  • icon_车辆停靠
    .iconicon_cheliangtingkao
  • 退出
    .icontuichu1
  • 箭头-右-粗线条1
    .iconjiantou-you-cuxiantiao
  • 金额
    .iconweibiaoti-
  • 银行
    .iconzhichiyinhang
  • 倒计时
    .icondaojishi5
  • bus
    .iconbus4
  • 今日取消订单
    .iconjinriquxiaodingdan
  • 21 E-mail
    .iconE-mail
  • 刷新
    .iconshuaxin4
  • 快进
    .iconkuaijin
  • 首页
    .iconshouye2
  • 通知
    .icontongzhi4
  • 收入
    .iconzhichuhuizong
  • 电话-400拨打
    .icondianhua-boda
  • 设置
    .iconshezhi1
  • 02-路线
    .iconluxian-copy
  • 车牌
    .iconchepai2
  • 切换
    .iconqiehuan3
  • 失败
    .iconshibai3
  • 机场大巴
    .iconjichangdaba
  • 企业
    .iconqiye3
  • 车牌
    .iconchepai3
  • 错题
    .iconcuoti
  • 日期
    .iconriqi4
  • 车票
    .iconchepiao
  • 新增
    .iconxinzeng4
  • 错题
    .iconcuoti1
  • 星级
    .iconxingji-b
  • 收入
    .iconshouru
  • 轨迹路线
    .iconguijiluxian
  • 性别
    .icongender
  • icon_行驶里程
    .iconicon_hangshilicheng
  • close
    .iconclose
  • 5-1小轿车
    .icon-xiaojiaoche
  • 切换
    .iconqiehuan4
  • 退出
    .icontuichu2
  • iconfont icon-yonghu
    .iconiconfonticon-yonghu
  • 拨打客服
    .iconbodakefu
  • 路线管理
    .iconluxianguanli
  • close
    .iconclose1
  • 新东方-刷新图标
    .iconrefresh
  • 企业
    .iconqiye4
  • 打勾
    .icondagou5
  • 暂停 停止
    .iconzantingtingzhi
  • 计划管理
    .iconperiodplan
  • 退出
    .icontuichu3
  • 已完成
    .iconyiwancheng4
  • 新东方-刷新图标
    .iconrefresh1
  • 二维码
    .iconerweima
  • 横竖屏
    .iconhengshuping
  • 钱包
    .iconqianbao2
  • 今日行驶里程:339.00km
    .iconjinrihangshilichengkm
  • 投诉
    .icontousu5
  • 旅游
    .iconlvyou4
  • 用车申请
    .iconyongcheshenqing
  • 新增
    .iconxinzeng5
  • email
    .iconemail2
  • 工号
    .icongonghao
  • 统计
    .icontongji3
  • 来源码-o
    .icontubiaokuwenjian-gengxin-
  • 行驶里程
    .iconhangshilicheng
  • 规_双箭头
    .icondbarrow-down
  • 校园地图
    .iconxiaoyuanditu
  • 旅客
    .iconlvke-xian
  • 返回顶部
    .iconfanhuidingbu
  • 路线推荐
    .iconluxiantuijian
  • 校园
    .iconxiaoyuan3
  • 密码
    .iconmima4
  • 客运发送旅客
    .iconkeyunfasonglvke
  • 长途车票
    .iconchangtuchepiao
  • 保养
    .iconbaoyang2
  • 公交客流总量
    .icongongjiaokeliuzongliang
  • 条码
    .icontiaoma1
  • 播放
    .iconbofang1
  • 双向箭头
    .iconshuangxiangjiantou
  • 003-email
    .icon-email
  • 拨打
    .iconboda2
  • 电子站牌
    .icondianzizhanpai
  • 订单
    .icondingdan4
  • 报警
    .iconbaojing1
  • 拨打电话
    .iconbodadianhua
  • 事务中心
    .iconhuabanfuben
  • 拨打电话
    .iconbodadianhua1
  • 视频
    .iconshipin
  • 题库
    .icontiku
  • 客运站
    .iconkeyunzhan
  • 配置
    .iconyonghupeizhi
  • 消费
    .iconxiaofei1
  • bus
    .iconbus7
  • 二维码
    .iconqrcode
  • 领取工单
    .iconlingqugongdan
  • 客 服
    .iconkefu4
  • 网约车
    .iconwangyueche
  • 6.2.21港湾式公交停靠站
    .icongangwanshigongjiaotingkaozhan
  • 向下
    .icondanseshixintubiao-
  • 休息
    .iconxiuxi
  • 地图
    .iconditu
  • 违规
    .iconweigui
  • 旅游线路
    .iconlvyouxianlu
  • 灵活就业社保补贴申领
    .iconlinghuojiuyeshebaobutieshenling
  • 视频监控
    .iconshipinjiankong4
  • 巴士
    .iconbashi1
  • 休息
    .iconxiuxiyixia
  • 出行
    .iconchuhang
  • 坏坏表情
    .iconhuaihuaibiaoqing
  • 花痴表情
    .iconhuachibiaoqing
  • 暂停 停止
    .iconzantingtingzhi1
  • 其他考试记录
    .iconqitakaoshijilu
  • 油耗
    .iconyouhao
  • 行人
    .iconhangren
  • 用户协议
    .iconyonghuxieyi

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 公交
    #icongongjiao
  • open_email
    #iconopenemail
  • 银行账号icon
    #iconyinxingzhanghaoicon
  • 退票
    #icontuipiao
  • 大巴
    #iconweibiaoti107
  • bus
    #iconbus5
  • e-mail
    #icone-mail
  • 金额
    #iconjine
  • 步行
    #iconbuxing
  • 订单
    #icondingdan
  • 物流快递
    #iconwuliukuaidi
  • 刷新
    #iconshuaxin
  • 打勾
    #icondagou
  • 中巴车
    #icon4
  • 保养
    #iconbaoyang
  • 保养
    #iconbaoyang1
  • 群蜂头像
    #iconqunfengtouxiang
  • 姓名
    #iconxingming
  • 搜索
    #iconbuchongiconsvg08
  • 箭头
    #iconjiantou2
  • 视频监控
    #iconshipinjiankong
  • 充值
    #iconchongzhi
  • 箭头
    #iconjiantou-copy
  • email
    #iconemail
  • 客单价最低
    #iconiconfontmin
  • 座位数
    #iconzuoweishu
  • 首页
    #iconshouye
  • 会员
    #iconhuiyuan
  • 电话
    #icondianhua
  • 申领查询
    #iconshenlingchaxun
  • 向右箭头
    #iconiconset0438
  • 会员
    #iconhuiyuan1
  • 打勾
    #icondagou1
  • 条码
    #icontiaoma
  • 订单
    #icondingdan1
  • 箭头
    #iconjiantou1
  • 金额
    #iconjine4
  • 失败
    #iconshibai
  • 箭头
    #iconjiantouarrow484
  • 箭头
    #iconjiantouarrow493
  • 星级
    #iconxingji
  • 位置
    #iconweizhi
  • 意见反馈
    #iconyijianfankui
  • 向下箭头
    #iconxiangxiajiantou
  • 充值
    #iconchongzhi0101
  • 身份证
    #iconzv1
  • 首页
    #iconshouye1
  • 位置
    #iconicon-yxj-location
  • 展开
    #iconzhankai
  • 交易记录
    #iconjiaoyijilu1
  • 钱包 支付买家
    #iconqianbaozhifumaijia
  • bus
    #iconbus
  • 刷新
    #iconshuaxin1
  • 会员
    #iconhuiyuan2
  • 定制
    #icondingzhi
  • 下拉
    #iconxiala
  • bus
    #iconbus1
  • 关注
    #iconxiazai12
  • 404
    #icon404
  • 设置
    #iconai-set
  • 箭头
    #iconjiantou-copy1
  • 刷卡
    #iconswipe
  • 验证码
    #iconellipsis
  • 箭头2
    #iconjiantou21
  • 退出
    #icontuichu
  • 技术支持 支持 智能 智能服务 服务 客服 技术
    #iconjishuzhichizhichizhinengzhinengfuwufuwukefujishu
  • 客单价
    #iconkedanjia
  • 客服
    #iconkefu
  • 钱包
    #iconqianbao
  • 交易记录
    #iconjiaoyijilu
  • 购票1
    #icongoupiao1
  • 购票2
    #icongoupiao2
  • 旅游
    #iconlvyou
  • 反馈_
    #iconfankui
  • 打勾
    #icondagou2
  • 通知
    #icontongzhi
  • 座位数
    #iconzuoweishu1
  • 旅游
    #iconlvyou1
  • bus
    #iconbus2
  • 充值
    #iconchongzhi2
  • icon-电话拨打
    #iconiconfontdianhua
  • 资产统计
    #icontongji
  • 抢单
    #iconqiangdan
  • 密码
    #iconmima5
  • 位置
    #icondizhi
  • 姓名
    #iconxingming1
  • 离场休息
    #iconlichangxiuxi
  • 金额
    #iconjine1
  • 通知
    #icontongzhi5
  • 巴士
    #iconbashi
  • 购票
    #icongoupiao
  • 实名认证
    #iconwebicon301
  • q-取消订单
    #iconqquxiaodingdan
  • 地图类_公交车正常
    #icondituleigongjiaochezhengchang
  • 投诉
    #icontousu6
  • 图标1_书、小说
    #icontubiao1shuxiaoshuo
  • 上箭头大
    #iconuparrowbig
  • 审批
    #iconshenpi
  • 来源
    #iconlaiyuan
  • 步行
    #iconbuxing1
  • 公交车
    #icongongjiaoche
  • 退款
    #icontuikuan
  • 销量箭头
    #iconxiaoliangjiantou
  • 部门
    #icon48copy9
  • 已完成
    #iconyiwancheng
  • 反馈
    #iconfankui1
  • 拍照
    #iconpaizhao
  • 条码
    #iconicon183
  • 原因
    #iconyuanyin
  • 反馈
    #iconfankui2
  • 取消原因
    #icone64c
  • 服务
    #iconfuwu
  • 退款
    #icontuikuan1
  • 卡券
    #iconqiaquan
  • 会员
    #iconhuiyuan3
  • 箭头
    #iconarrowll-copy
  • 位置
    #iconweizhi1
  • 圈钩
    #iconquangou
  • 右箭头
    #iconright
  • 箭头
    #iconjiantou
  • 宇宙星球-11
    #iconyuzhouxingqiu-11
  • 退款
    #icontuikuan2
  • 余额
    #iconyue
  • 统计
    #icontongji1
  • 定制游
    #icondingzhiyou
  • 统计
    #icontongji4
  • 30公交站点
    #icongongjiaozhandian
  • 手机
    #iconshouji
  • email-open-outline
    #iconemail-open-outline
  • 物料管理
    #iconwuliaoguanli
  • time
    #icontime
  • 通知
    #icontongzhi1
  • 新增
    #iconxinzeng
  • 消费
    #iconxiaofei
  • 已完成
    #iconyiwancheng1
  • 取消订单
    #iconquxiaodindan
  • 企业
    #iconqiye
  • 会员
    #iconhuiyuan4
  • 倒计时
    #icondaojishi
  • 站牌
    #iconzhanpai
  • 客户详情-拨打电话
    #iconkehuxiangqing-bodadianhua
  • 汽车票
    #iconqichepiao
  • 投诉
    #icontousu
  • 旅游
    #iconlvyou2
  • 计划
    #iconjihua
  • 微信
    #iconweixin
  • 拨打
    #iconboda
  • 拨打
    #iconboda1
  • 短信验证码
    #iconyanzhengma
  • 事务管理
    #iconshiwuguanli
  • bus_tickets
    #iconbus_tickets
  • web__比特币右箭头
    #iconweb__bitebiyoujiantou
  • web__比特币左箭头
    #iconweb__bitebizuojiantou
  • #iconyun
  • 切换
    #iconqiehuan5
  • 退货
    #icontuihuo
  • 油耗统计
    #iconyouhaotongji
  • loading
    #iconloading
  • 手机
    #iconshouji1
  • 库存
    #iconkucun
  • 订单
    #icondingdan2
  • 免费穿梭巴士
    #iconmianfeichuansuobashi
  • 评价
    #iconsps
  • 分享
    #icontubiaozhizuomoban
  • 会员
    #iconhuiyuan5
  • 校园
    #iconxiaoyuan
  • 修改价格
    #iconxiugaijiage
  • 位置
    #iconweizhi2
  • 新闻
    #iconnews_icon
  • 投诉
    #icontousu1
  • 支付
    #iconzhifu
  • 统计
    #icontongji5
  • 司机
    #iconsiji
  • 发票
    #iconfapiao
  • 倒计时
    #icondaojishi1
  • 微信
    #iconweixin1
  • 路线
    #iconluxian
  • 来源
    #iconlaiyuan1
  • 新增
    #iconxinzeng1
  • 大巴
    #icondaba
  • 箭头
    #iconjiantou-copy-copy
  • 箭头
    #iconjiantou3
  • 待确认
    #icondaiqueren
  • 客服
    #iconkefu1
  • 验证码
    #iconyanzhengma1
  • 双箭头
    #iconshuangjiantou3
  • 搜索
    #iconsousuo
  • 站点
    #iconzhandian
  • 日期
    #iconriqi
  • 打勾
    #icondagou-copy
  • 通知
    #icontongzhi2
  • 倒计时
    #icondaojishi2
  • 身份证
    #iconshenfenzheng
  • 日期
    #iconriqi1
  • 定制
    #icondingzhi1
  • loading
    #iconloading1
  • 计划
    #iconjihua1
  • 退
    #icontui
  • 审批
    #iconshenpi1
  • 评价
    #iconpingjia-copy
  • 投诉
    #iconhot
  • 箭头
    #iconchevron-left
  • fe-mail
    #iconmail
  • 配置
    #iconpeizhi
  • 旅客
    #iconlvke
  • 回复
    #iconhuifu
  • 统计
    #icontongji2
  • 钱包
    #iconqianbao3
  • 游戏
    #iconyouxi
  • 车牌
    #iconchepai
  • 租车出行
    #iconzuchechuhang
  • 视频监控
    #iconshipinjiankong1
  • 违规处罚
    #iconweiguichufa
  • 404
    #iconicon-test
  • 报警
    #iconicon-life-alarm
  • 手机
    #iconshouji2
  • 已完成
    #iconyiwancheng2
  • 支付宝
    #iconzhifubao
  • 倒计时
    #icondaojishi3
  • 视频监控
    #iconshipinjiankong2
  • 头像
    #icontouxiang
  • 删 除
    #iconshanchu1
  • 密码
    #iconmima
  • 电话
    #icondianhua1
  • 取消订单
    #iconquxiaodingdan
  • 关注 (1)
    #iconguanzhu
  • 搜索
    #iconsousuo1
  • 倒计时
    #icondaojishi6
  • 身份证
    #iconcredentials_icon
  • 密码
    #iconpassword
  • 手机
    #icontubiao
  • 车牌
    #iconchepai1
  • #iconyun1
  • 客运站查询
    #iconkeyunzhanchaxun
  • 司机
    #iconsiji1
  • 暂停
    #iconzanting
  • 消费
    #iconcurrency
  • 下箭头
    #iconf11-copy1-copy
  • 编辑
    #iconbianji
  • 运行时-倒计时
    #iconyunhangshi-daojishi
  • 投诉
    #icontousu2
  • 十字线,大牛财经
    #iconshizixian
  • 员工工号
    #iconyuangonggonghao
  • search close
    #iconsearchclose
  • 切换
    #iconqiehuan
  • 数量
    #iconshuliang
  • 付款
    #iconfukuan
  • 乘车
    #iconchengche
  • 失败
    #iconshibai1
  • 上传
    #iconshangchuan
  • 倒计时
    #iconFill
  • loading
    #iconloading2
  • loading
    #iconloading3
  • 打勾
    #icondagou4
  • 密码
    #iconweibiaoti-1
  • 支付
    #iconicon_pay
  • 订单
    #icontubiaolunkuo-
  • 双箭头
    #iconarrow-double-right
  • 失败
    #iconshibai2
  • 物料
    #iconwuliao
  • 密码
    #iconmima1
  • 员工工号
    #iconyuangonggonghao1
  • 分享
    #iconfenxiang
  • 分享
    #iconfenxiang1
  • 车牌号
    #iconchepaihao
  • 原因
    #iconyuanyin1
  • 校园
    #iconxiaoyuan1
  • 车巴巴-油耗2
    #iconchebaba-youhao
  • 钱包
    #iconqianbao1
  • 座机拨打-挂断
    #iconzuojiboda-guaduan
  • 位置
    #iconweizhi3
  • 视频监控
    #icongexinghuapingtaitubiao-
  • 包车客运
    #iconbaochekeyun
  • bus
    #iconbus6
  • 双箭头
    #iconshuangjiantou
  • 下箭头
    #iconf11
  • 成功
    #iconchenggong
  • 司机
    #iconsiji2
  • 客服
    #iconkefu2
  • 23验票
    #iconyanpiao
  • 日期
    #iconriqi2
  • 待拨打
    #icondaiboda
  • 404
    #iconicon-test1
  • 轿车
    #iconjiaoche
  • 金额
    #iconjine2
  • 404
    #iconicon-test2
  • 服务商
    #iconfuwushang
  • 服务商
    #iconfuwushang1
  • 编辑
    #iconbianji1
  • 刷新
    #iconshuaxin2
  • 新增
    #iconxinzeng2
  • AK-JT轿车
    #iconjt_jiaoche
  • 服务商
    #iconfuwushang2
  • 评价
    #iconpingjiazhuanhuan
  • 税号
    #iconshuihao
  • 旅客升舱
    #iconlvkeshengcang
  • 配置
    #iconpeizhi1
  • 轿车正面
    #iconjiaochezhengmian
  • 妈妈新知icon_休息一下
    #iconmamaxinzhiicon_xiuxiyixia
  • 倒计时
    #icondaojishi4
  • 视频监控
    #iconspjk
  • 手机
    #iconshouji3
  • 设置
    #iconshezhi
  • 数据配置_汽车票
    #iconshujupeizhi_qichepiao
  • #iconqiang
  • 企业
    #iconqiye1
  • 关注
    #iconguanzhu1
  • 秒表 倒计时 计时器 线性
    #iconmiaobiaodaojishijishiqixianxing
  • 通知
    #icontongzhi3
  • 司机
    #iconsiji3
  • 电话
    #icondianhua2
  • 投诉
    #icontousu3
  • 来源
    #iconlaiyuan2
  • 旅游巴士停车站
    #iconlvyoubashitingchezhan
  • 司机管理
    #iconsijiguanli
  • 搜索
    #iconsousuo2
  • 退款
    #icontuikuan3
  • 星级
    #iconxingji1
  • 位置
    #iconweizhi4
  • 双箭头
    #iconshuangjiantou1
  • 打勾
    #icondagou3
  • 付款通知
    #iconfukuantongzhi
  • 退款关怀
    #icontuikuanguanhuai
  • 部门
    #iconbumen
  • 旅游
    #iconlvyou3
  • bus
    #iconbus3
  • 税号管理
    #iconshuihaoguanli
  • 付款
    #iconfukuan1
  • 校园
    #iconxiaoyuan2
  • 数量
    #iconshuliang1
  • 取消原因
    #iconquxiaoyuanyin
  • 订单
    #icondingdan3
  • 金额
    #iconjine3
  • 服务商
    #iconfuwushang3
  • 浏览
    #iconliulan-copy
  • 切换
    #iconqiehuan1
  • 验证码
    #iconyanzhengma3
  • 报警
    #iconbaojing
  • 搜索
    #iconsousuo3
  • 已完成 (1)
    #iconyiwancheng3
  • 站点
    #iconzhandian1
  • 视频监控
    #iconshipinjiankong3
  • 箭头
    #iconarrowRight
  • 新增
    #iconxinzeng3
  • 上传
    #iconshangchuan1
  • 申请
    #iconshenqing
  • 待确认
    #icondaiqueren1
  • 播放
    #iconbofang
  • 银行
    #iconyinhang
  • 车票机票
    #iconchepiaojipiao
  • 投诉
    #icontousu4
  • 刷新 (2)
    #iconshuaxin3
  • 报警
    #iconicon-life-alarm-copy-copy
  • 小轿车
    #iconxiaojiaoche
  • 企业
    #iconqiye2
  • 发票
    #iconfapiao1
  • 电话
    #iconweibiaoti
  • 验票
    #iconyanpiao1
  • 下箭头
    #iconSolid-arrow-down
  • 姓名
    #iconxingming2
  • 支付宝
    #iconalipay
  • #iconxing
  • email
    #iconemail1
  • 验证码
    #iconyanzhengma2
  • 付款
    #iconfukuan2
  • 客服
    #iconkefu3
  • 切换
    #iconqiehuan2
  • 来源
    #iconlaiyuan3
  • 会员
    #iconhuiyuan6
  • 微信
    #iconweixin2
  • 考勤
    #iconkaoqin
  • 身份证
    #iconshenfenzheng1
  • 密码
    #iconmima2
  • 日期
    #iconriqi3
  • 编辑
    #iconxiugaicopy
  • 箭头
    #iconicon-test3
  • 密码
    #iconmima3
  • 支付宝
    #iconzhifubao1
  • 删 除
    #iconshanchu
  • 携带服务犬旅客
    #iconxiedaifuwuquanlvke
  • 下箭头
    #iconarrow_left
  • icon_车辆停靠
    #iconicon_cheliangtingkao
  • 退出
    #icontuichu1
  • 箭头-右-粗线条1
    #iconjiantou-you-cuxiantiao
  • 金额
    #iconweibiaoti-
  • 银行
    #iconzhichiyinhang
  • 倒计时
    #icondaojishi5
  • bus
    #iconbus4
  • 今日取消订单
    #iconjinriquxiaodingdan
  • 21 E-mail
    #iconE-mail
  • 刷新
    #iconshuaxin4
  • 快进
    #iconkuaijin
  • 首页
    #iconshouye2
  • 通知
    #icontongzhi4
  • 收入
    #iconzhichuhuizong
  • 电话-400拨打
    #icondianhua-boda
  • 设置
    #iconshezhi1
  • 02-路线
    #iconluxian-copy
  • 车牌
    #iconchepai2
  • 切换
    #iconqiehuan3
  • 失败
    #iconshibai3
  • 机场大巴
    #iconjichangdaba
  • 企业
    #iconqiye3
  • 车牌
    #iconchepai3
  • 错题
    #iconcuoti
  • 日期
    #iconriqi4
  • 车票
    #iconchepiao
  • 新增
    #iconxinzeng4
  • 错题
    #iconcuoti1
  • 星级
    #iconxingji-b
  • 收入
    #iconshouru
  • 轨迹路线
    #iconguijiluxian
  • 性别
    #icongender
  • icon_行驶里程
    #iconicon_hangshilicheng
  • close
    #iconclose
  • 5-1小轿车
    #icon-xiaojiaoche
  • 切换
    #iconqiehuan4
  • 退出
    #icontuichu2
  • iconfont icon-yonghu
    #iconiconfonticon-yonghu
  • 拨打客服
    #iconbodakefu
  • 路线管理
    #iconluxianguanli
  • close
    #iconclose1
  • 新东方-刷新图标
    #iconrefresh
  • 企业
    #iconqiye4
  • 打勾
    #icondagou5
  • 暂停 停止
    #iconzantingtingzhi
  • 计划管理
    #iconperiodplan
  • 退出
    #icontuichu3
  • 已完成
    #iconyiwancheng4
  • 新东方-刷新图标
    #iconrefresh1
  • 二维码
    #iconerweima
  • 横竖屏
    #iconhengshuping
  • 钱包
    #iconqianbao2
  • 今日行驶里程:339.00km
    #iconjinrihangshilichengkm
  • 投诉
    #icontousu5
  • 旅游
    #iconlvyou4
  • 用车申请
    #iconyongcheshenqing
  • 新增
    #iconxinzeng5
  • email
    #iconemail2
  • 工号
    #icongonghao
  • 统计
    #icontongji3
  • 来源码-o
    #icontubiaokuwenjian-gengxin-
  • 行驶里程
    #iconhangshilicheng
  • 规_双箭头
    #icondbarrow-down
  • 校园地图
    #iconxiaoyuanditu
  • 旅客
    #iconlvke-xian
  • 返回顶部
    #iconfanhuidingbu
  • 路线推荐
    #iconluxiantuijian
  • 校园
    #iconxiaoyuan3
  • 密码
    #iconmima4
  • 客运发送旅客
    #iconkeyunfasonglvke
  • 长途车票
    #iconchangtuchepiao
  • 保养
    #iconbaoyang2
  • 公交客流总量
    #icongongjiaokeliuzongliang
  • 条码
    #icontiaoma1
  • 播放
    #iconbofang1
  • 双向箭头
    #iconshuangxiangjiantou
  • 003-email
    #icon-email
  • 拨打
    #iconboda2
  • 电子站牌
    #icondianzizhanpai
  • 订单
    #icondingdan4
  • 报警
    #iconbaojing1
  • 拨打电话
    #iconbodadianhua
  • 事务中心
    #iconhuabanfuben
  • 拨打电话
    #iconbodadianhua1
  • 视频
    #iconshipin
  • 题库
    #icontiku
  • 客运站
    #iconkeyunzhan
  • 配置
    #iconyonghupeizhi
  • 消费
    #iconxiaofei1
  • bus
    #iconbus7
  • 二维码
    #iconqrcode
  • 领取工单
    #iconlingqugongdan
  • 客 服
    #iconkefu4
  • 网约车
    #iconwangyueche
  • 6.2.21港湾式公交停靠站
    #icongangwanshigongjiaotingkaozhan
  • 向下
    #icondanseshixintubiao-
  • 休息
    #iconxiuxi
  • 地图
    #iconditu
  • 违规
    #iconweigui
  • 旅游线路
    #iconlvyouxianlu
  • 灵活就业社保补贴申领
    #iconlinghuojiuyeshebaobutieshenling
  • 视频监控
    #iconshipinjiankong4
  • 巴士
    #iconbashi1
  • 休息
    #iconxiuxiyixia
  • 出行
    #iconchuhang
  • 坏坏表情
    #iconhuaihuaibiaoqing
  • 花痴表情
    #iconhuachibiaoqing
  • 暂停 停止
    #iconzantingtingzhi1
  • 其他考试记录
    #iconqitakaoshijilu
  • 油耗
    #iconyouhao
  • 行人
    #iconhangren
  • 用户协议
    #iconyonghuxieyi

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>