• 左箭头
    
  • 身份证号
    
  • 搜索
    
  • 重要提示
    
  • 未选
    
  • 已选
    
  • 选择
    
  • 添加
    
  • 删除
    
  • 选中
    
  • 未选-蓝
    
  • 未选
    
  • 免税店
    
  • 12306
    
  • 编组 6
    
  • 编组 4
    
  • 编组 5
    
  • 编组 7
    
  • 我的-已选
    
  • 首页-未选
    
  • 设置-已选
    
  • 助手-已选
    
  • yemian-copy-copy
    
  • zhushou
    
  • shezhi
    
  • wode
    
  • icon-message-new
    
  • icon-refund-new
    
  • icon-change-new
    
  • icon-approve-new
    
  • icon-order-new
    
  • icon-car-new
    
  • icon-hotel-new
    
  • icon-train-new
    
  • icon-flight-new
    
  • dutyFree
    
  • 眼睛
    
  • 闭眼睛
    
  • 刷新
    
  • 发送
    
  • 服务条款及隐私
    
  • discover-card
    
  • visa
    
  • diners-club
    
  • american express
    
  • Maestro
    
  • master card@1x
    
  • jcb
    
  • 银联
    
  • 公司管理_差标管理
    
  • icon-bank-shanghai
    
  • icon-bank-nongye
    
  • icon-bank-shenzhen
    
  • icon-bank-xingye
    
  • icon-bank-zhongguo
    
  • icon-bank-zhangshang
    
  • icon-close
    
  • icon-bank-zhongxin
    
  • icon-bank-beijing
    
  • icon-bank-airplus
    
  • icon-bank-gongshang
    
  • icon-bank-guangfa
    
  • icon-bank-huaxia
    
  • icon-bank-jianshe
    
  • icon-bank-jiaotong
    
  • icon-bank-minsheng
    
  • icon-bank-pufa
    
  • list-phone
    
  • list-private
    
  • list-car
    
  • list-airplane
    
  • list-hotel
    
  • list-trian
    
  • service
    
  • share
    
  • 等待
    
  • weather15
    
  • weather13
    
  • weather16
    
  • weather14
    
  • weather17
    
  • weather18
    
  • weather19
    
  • weather20
    
  • weather24
    
  • weather22
    
  • weather21
    
  • weather26
    
  • weather25
    
  • weather23
    
  • weather27
    
  • weather28
    
  • weather30
    
  • weather31
    
  • weather32
    
  • weather34
    
  • weather33
    
  • weather37
    
  • weather36
    
  • weather29
    
  • weather35
    
  • weather99
    
  • weather38
    
  • weather1
    
  • weather3
    
  • weather0
    
  • weather4
    
  • weather5
    
  • weather6
    
  • weather2
    
  • weather9
    
  • weather7
    
  • weather8
    
  • weather10
    
  • weather11
    
  • weather12
    
  • 公务出行
    
  • 私人出行
    
  • 对勾
    
  • 火车换向
    
  • 选择
    
  • 选择
    
  • 支付宝
    
  • 支付-微信
    
  • 快钱
    
  • 订单
    
  • 
  • 
  • 2
    
  • 1
    
  • 车次中心
    
  • 二维码
    
  • 短信
    
  • 导入
    
  • 语言
    
  • 查天气
    
  • 暂无消息
    
  • 升序
    
  • 降序
    
  • 附件
    
  • 转换
    
  • 向上
    
  • 图片
    
  • 微信
    
  • 排序
    
  • 电话
    
  • 银行卡
    
  • 问号
    
  • 通知
    
  • 电话
    
  • 航班
    
  • 用户
    
  • 日历
    
  • 哭脸
    
  • 删除
    
  • 编码
    
  • 向下
    
  • 减号
    
  • E
    
  • 二维码
    
  • 向下
    
  • 电话
    
  • 笑脸
    
  • 热门
    
  • 附件
    
  • 订单
    
  • 修改
    
  • 时间
    
  • 手机
    
  • 物品领用申请
    
  • 放大镜
    
  • 设置
    
  • 行程
    
  • 旅游
    
  • 笑脸
    
  • 对勾
    
  • 叉叉
    
  • 旅游
    
  • 预订
    
  • 添加
    
  • 放大镜
    
  • 对勾
    
  • 粗版2_时间预订成功
    
  • 交通
    
  • 换一换
    
  • 座位
    
  • 坐标
    
  • 住宿
    
  • 头像
    
  • 价格
    
  • 我的订单
    
  • 手机
    
  • 手机
    
  • 对勾
    
  • 飞机
    
  • 往返
    
  • 添加
    
  • 我的预订
    
  • 前往
    
  • 通知
    
  • ios
    
  • 地球
    
  • back
    
  • 机票车票
    
  • 对勾
    
  • 旅游
    
  • 时间
    
  • 文件夹
    
  • 删除
    
  • 商圈
    
  • 线下门店
    
  • 向下
    
  • 其他
    
  • 钱袋
    
  • 二维码
    
  • 单程
    
  • 地图
    
  • 酒店
    
  • 筛选
    
  • 授权
    
  • 飞机
    
  • 预订
    
  • 通知
    
  • 暂停
    
  • 通知
    
  • 叹号
    
  • 轮船
    
  • 电脑
    
  • 餐饮
    
  • 客服
    
  • 提交订单
    
  • 叉叉
    
  • 旅游线路
    
  • 酒店
    
  • 验证码
    
  • 审核中
    
  • 业务_business140
    
  • 客车
    
  • 周边up
    
  • 向下
    
  • 订单审批
    
  • 状态
    
  • 换一换
    
  • 广发
    
  • 简介
    
  • 安卓
    
  • 信息
    
  • 飞机
    
  • 导入
    
  • 叹号
    
  • 修改
    
  • 电脑
    
  • 天气_风暴
    
  • 旅游 (3)
    
  • 快钱-支付
    
  • 转换中
    
  • 禁止
    
  • 天气
    
  • 火车
    
  • 距离
    
  • 设施_客厅
    
  • 火车
    
  • 搜索行政区
    
  • 空心圆
    
  • 
  • 横杠
    
  • 竖线
    
  • 火车
    
  • 时间
    
  • 延期uAddtime
    
  • 成功
    
  • 状态
    
  • 审批
    
  • 任务结果
    
  • 变更
    
  • 飞机
    
  • 到达
    
  • 起飞
    
  • 手势
    
  • 显示
    
  • 关于
    
  • 意见反馈
    
  • 评价
    
  • 推荐
    
  • chair-b
    
  • 行程
    
  • 航班动态
    
  • 座位数
    
  • note
    
  • 球票
    
  • 邮件
    
  • 预订
    
  • 报销
    
  • 列表
    
  • 客服
    
  • 订单
    
  • CN-longhubang
    
  • 个人
    
  • 行程
    
  • 钥匙
    
  • 手机
    
  • 电话
    
  • 位置
    
  • 时间
    
  • 火车(1)
    
  • 车票
    
  • 审批
    
  • 审批
    
  • 住宿
    
  • 日历
    
  • 道路旅客运输
    
  • 汽车
    
  • 套票
    
  • 提交
    
  • 买车
    
  • 火车
    
  • 酒店
    
  • 时间
    
  • 飞机
    
  • 飞机-横
    
  • 首页1
    
  • 首页2
    
  • 信息2
    
  • 信息1
    
  • 我的2
    
  • 我的1
    
  • 助手2
    
  • 助手1
    
  • 设置2
    
  • 设置1
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1643266120655') format('woff2'),
       url('iconfont.woff?t=1643266120655') format('woff'),
       url('iconfont.ttf?t=1643266120655') format('truetype');
}

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

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

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

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

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

  • 左箭头
    .icon-left-arrow
  • 身份证号
    .icon-card
  • 搜索
    .icon-search
  • 重要提示
    .icon-hint
  • 未选
    .icon-square-noselect
  • 已选
    .icon-square-selected
  • 选择
    .icon-right-arrow
  • 添加
    .icon-add
  • 删除
    .icon-trash
  • 选中
    .icon-circle-selected
  • 未选-蓝
    .icon-circle-blue-noselect
  • 未选
    .icon-circle-noselected
  • 免税店
    .icon-mianshuidian
  • 12306
    .icon-train12306
  • 编组 6
    .icon-hotel-cwt
  • 编组 4
    .icon-flight-cwt
  • 编组 5
    .icon-train-cwt
  • 编组 7
    .icon-car-cwt
  • 我的-已选
    .icon-wode-yixuan
  • 首页-未选
    .icon-shouye-weixuan
  • 设置-已选
    .icon-shezhi-yixuan
  • 助手-已选
    .icon-zhushou-yixuan
  • yemian-copy-copy
    .icon-shouye-yixuan
  • zhushou
    .icon-zhushou-weixuan
  • shezhi
    .icon-shezhi-weixuan
  • wode
    .icon-wode-weixuan
  • icon-message-new
    .icon-message-new
  • icon-refund-new
    .icon-refund-new
  • icon-change-new
    .icon-change-new
  • icon-approve-new
    .icon-approve-new
  • icon-order-new
    .icon-order-new
  • icon-car-new
    .icon-car-new
  • icon-hotel-new
    .icon-hotel-new
  • icon-train-new
    .icon-train-new
  • icon-flight-new
    .icon-flight-new
  • dutyFree
    .icon-mianshuidian2
  • 眼睛
    .icon-yanjing
  • 闭眼睛
    .icon-biyanjing
  • 刷新
    .icon-refresh
  • 发送
    .icon-send
  • 服务条款及隐私
    .icon-yinsi
  • discover-card
    .icon-discover-card
  • visa
    .icon-visa
  • diners-club
    .icon-diners-club
  • american express
    .icon-american-express
  • Maestro
    .icon-maestro
  • master card@1x
    .icon-mastercard
  • jcb
    .icon-jcb
  • 银联
    .icon-yinlian
  • 公司管理_差标管理
    .icon-policy
  • icon-bank-shanghai
    .icon-icon-bank-shanghai
  • icon-bank-nongye
    .icon-icon-bank-nongye
  • icon-bank-shenzhen
    .icon-icon-bank-shenzhen
  • icon-bank-xingye
    .icon-icon-bank-xingye
  • icon-bank-zhongguo
    .icon-icon-bank-zhongguo
  • icon-bank-zhangshang
    .icon-icon-bank-zhangshang
  • icon-close
    .icon-icon-close
  • icon-bank-zhongxin
    .icon-icon-bank-zhongxin
  • icon-bank-beijing
    .icon-icon-bank-beijing
  • icon-bank-airplus
    .icon-icon-bank-airplus
  • icon-bank-gongshang
    .icon-icon-bank-gongshang
  • icon-bank-guangfa
    .icon-icon-bank-guangfa
  • icon-bank-huaxia
    .icon-icon-bank-huaxia
  • icon-bank-jianshe
    .icon-icon-bank-jianshe
  • icon-bank-jiaotong
    .icon-icon-bank-jiaotong
  • icon-bank-minsheng
    .icon-icon-bank-minsheng
  • icon-bank-pufa
    .icon-icon-bank-pufa
  • list-phone
    .icon-list-phonebeifen
  • list-private
    .icon-list-yinsibeifen
  • list-car
    .icon-list-car
  • list-airplane
    .icon-list-airplane
  • list-hotel
    .icon-list-hotel
  • list-trian
    .icon-list-trian
  • service
    .icon-service
  • share
    .icon-share
  • 等待
    .icon-dengdai
  • weather15
    .icon-weather15
  • weather13
    .icon-weather13
  • weather16
    .icon-weather16
  • weather14
    .icon-weather14
  • weather17
    .icon-weather17
  • weather18
    .icon-weather18
  • weather19
    .icon-weather19
  • weather20
    .icon-weather20
  • weather24
    .icon-weather24
  • weather22
    .icon-weather22
  • weather21
    .icon-weather21
  • weather26
    .icon-weather26
  • weather25
    .icon-weather25
  • weather23
    .icon-weather23
  • weather27
    .icon-weather27
  • weather28
    .icon-weather28
  • weather30
    .icon-weather30
  • weather31
    .icon-weather31
  • weather32
    .icon-weather32
  • weather34
    .icon-weather34
  • weather33
    .icon-weather33
  • weather37
    .icon-weather37
  • weather36
    .icon-weather36
  • weather29
    .icon-weather29
  • weather35
    .icon-weather35
  • weather99
    .icon-weather99
  • weather38
    .icon-weather38
  • weather1
    .icon-weather1
  • weather3
    .icon-weather3
  • weather0
    .icon-weather0
  • weather4
    .icon-weather4
  • weather5
    .icon-weather5
  • weather6
    .icon-weather6
  • weather2
    .icon-weather2
  • weather9
    .icon-weather9
  • weather7
    .icon-weather7
  • weather8
    .icon-weather8
  • weather10
    .icon-weather10
  • weather11
    .icon-weather11
  • weather12
    .icon-weather12
  • 公务出行
    .icon-gongwuchuhang
  • 私人出行
    .icon-sirenchuhang
  • 对勾
    .icon-yes
  • 火车换向
    .icon-huochehuanxiang
  • 选择
    .icon-xuanze
  • 选择
    .icon-xuanze1
  • 支付宝
    .icon-zhifubao
  • 支付-微信
    .icon-pay-wechat
  • 快钱
    .icon-kuaiqian
  • 订单
    .icon-order
  • .icon-you
  • .icon-zuo
  • 2
    .icon-icon-test
  • 1
    .icon-icon-test1
  • 车次中心
    .icon-checizhongxin
  • 二维码
    .icon-erweima2
  • 短信
    .icon-sms
  • 导入
    .icon-daoru1
  • 语言
    .icon-yuyan
  • 查天气
    .icon-chatianqi
  • 暂无消息
    .icon-zanwuxiaoxi
  • 升序
    .icon-shengxu
  • 降序
    .icon-jiangxu
  • 附件
    .icon-fujian2
  • 转换
    .icon-zhuanhuan
  • 向上
    .icon-iconfontup2
  • 图片
    .icon-tupian
  • 微信
    .icon-weixin
  • 排序
    .icon-paixu
  • 电话
    .icon-dianhua
  • 银行卡
    .icon-yinxingqia
  • 问号
    .icon-14052218
  • 通知
    .icon-tongzhi
  • 电话
    .icon-dianhua2
  • 航班
    .icon-hangban
  • 用户
    .icon-101
  • 日历
    .icon-rili
  • 哭脸
    .icon-kulian
  • 删除
    .icon-shanchu
  • 编码
    .icon-bianma
  • 向下
    .icon-iconfontdown2
  • 减号
    .icon-jianhao
  • E
    .icon-letter-e
  • 二维码
    .icon-erweima
  • 向下
    .icon-icon123
  • 电话
    .icon-dianhua3
  • 笑脸
    .icon-xiaolian
  • 热门
    .icon-remen
  • 附件
    .icon-fujian
  • 订单
    .icon-dingdan
  • 修改
    .icon-xiugai
  • 时间
    .icon-shijian2
  • 手机
    .icon-shouji
  • 物品领用申请
    .icon-wupinlingyongshenqing
  • 放大镜
    .icon-fangdajing
  • 设置
    .icon-set
  • 行程
    .icon-importedlayers
  • 旅游
    .icon-lvyou
  • 笑脸
    .icon-xiaolian1
  • 对勾
    .icon-duigou
  • 叉叉
    .icon-chacha
  • 旅游
    .icon-lvyou1
  • 预订
    .icon-yuding11
  • 添加
    .icon-icontianjia01
  • 放大镜
    .icon-fangdajing1
  • 对勾
    .icon-duigou1
  • 粗版2_时间预订成功
    .icon-cuban2shijianyudingchenggong
  • 交通
    .icon-jiaotong
  • 换一换
    .icon-huanyihuan
  • 座位
    .icon-zuowei
  • 坐标
    .icon-zuobiao
  • 住宿
    .icon-iconfontchuang
  • 头像
    .icon-touxiang
  • 价格
    .icon-icon06
  • 我的订单
    .icon-wodedingdan
  • 手机
    .icon-shouji2
  • 手机
    .icon-shouji3
  • 对勾
    .icon-duigou2
  • 飞机
    .icon-feiji1
  • 往返
    .icon-icon11
  • 添加
    .icon-15
  • 我的预订
    .icon-wodeyuding
  • 前往
    .icon-qianwang
  • 通知
    .icon-notice
  • ios
    .icon-ios
  • 地球
    .icon-diqiu
  • back
    .icon-back
  • 机票车票
    .icon-jipiaochepiao
  • 对勾
    .icon-duigou3
  • 旅游
    .icon-lvyou2
  • 时间
    .icon-shijian21
  • 文件夹
    .icon-wenjianjia
  • 删除
    .icon-shanchu1
  • 商圈
    .icon-shangquan
  • 线下门店
    .icon-store
  • 向下
    .icon-xiangxia
  • 其他
    .icon-qita
  • 钱袋
    .icon-qiandai
  • 二维码
    .icon-erweima1
  • 单程
    .icon-eg
  • 地图
    .icon-map
  • 酒店
    .icon-jiudian1
  • 筛选
    .icon-shaixuan
  • 授权
    .icon-shouquan
  • 飞机
    .icon-feiji11
  • 预订
    .icon-yuding2
  • 通知
    .icon-tongzhi1
  • 暂停
    .icon-zanting
  • 通知
    .icon-tongzhi2
  • 叹号
    .icon-information
  • 轮船
    .icon-lunchuan
  • 电脑
    .icon-diannao
  • 餐饮
    .icon-canyin
  • 客服
    .icon-1
  • 提交订单
    .icon-tijiao1
  • 叉叉
    .icon-chacha1
  • 旅游线路
    .icon-lvyouxianlu
  • 酒店
    .icon-jiudian2
  • 验证码
    .icon-yanzhengma
  • 审核中
    .icon-xingzhuang1
  • 业务_business140
    .icon-yewubusiness140
  • 客车
    .icon-keche
  • 周边up
    .icon-zhoubianup
  • 向下
    .icon-xiangxia1
  • 订单审批
    .icon-dingdanshengpi
  • 状态
    .icon-zhuangtai11
  • 换一换
    .icon-huanyihuan1
  • 广发
    .icon-guangfa
  • 简介
    .icon-intro3
  • 安卓
    .icon-anzhuo-copy
  • 信息
    .icon-12zhengqiuyijian
  • 飞机
    .icon-feiji-copy
  • 导入
    .icon-daoru
  • 叹号
    .icon-tanhao
  • 修改
    .icon-xiugai1
  • 电脑
    .icon-diannao1
  • 天气_风暴
    .icon-tianqifengbao
  • 旅游 (3)
    .icon-lvyou3
  • 快钱-支付
    .icon-kuaiqianzhifu
  • 转换中
    .icon-zhuanhuanzhong
  • 禁止
    .icon-jinzhi
  • 天气
    .icon-tianqi
  • 火车
    .icon-huoche111
  • 距离
    .icon-juli
  • 设施_客厅
    .icon-sheshiketing
  • 火车
    .icon-huoche31
  • 搜索行政区
    .icon-sousuoxingzhengqu
  • 空心圆
    .icon-kongxinyuan
  • .icon-dian
  • 横杠
    .icon-arrow-cross
  • 竖线
    .icon-shuxian
  • 火车
    .icon-huoche2
  • 时间
    .icon-shijian11
  • 延期uAddtime
    .icon-yanqiuaddtime
  • 成功
    .icon-chenggong
  • 状态
    .icon-zhuangtai
  • 审批
    .icon-shenpi2
  • 任务结果
    .icon-renwujieguo
  • 变更
    .icon-biangeng
  • 飞机
    .icon-feiji-big
  • 到达
    .icon-daoda
  • 起飞
    .icon-qifei
  • 手势
    .icon-touch
  • 显示
    .icon-xianshi
  • 关于
    .icon-guanyu
  • 意见反馈
    .icon-yijianfankui
  • 评价
    .icon-pingjia
  • 推荐
    .icon-icon05
  • chair-b
    .icon-chair-b
  • 行程
    .icon-xingcheng
  • 航班动态
    .icon-icon
  • 座位数
    .icon-zuoweishu
  • note
    .icon-note
  • 球票
    .icon-qiupiao
  • 邮件
    .icon-youjian
  • 预订
    .icon-yuding
  • 报销
    .icon-baoxiao
  • 列表
    .icon-liebiao
  • 客服
    .icon-htmal5icon31
  • 订单
    .icon-dingdan1
  • CN-longhubang
    .icon-cnlonghubang
  • 个人
    .icon-geren
  • 行程
    .icon-xingcheng1
  • 钥匙
    .icon-yaochi
  • 手机
    .icon-shouji1
  • 电话
    .icon-dianhua1
  • 位置
    .icon-weizhi
  • 时间
    .icon-shijian1
  • 火车(1)
    .icon-huoche1
  • 车票
    .icon-chepiao
  • 审批
    .icon-shenpi
  • 审批
    .icon-shenpi1
  • 住宿
    .icon-zhusu
  • 日历
    .icon-rili1
  • 道路旅客运输
    .icon-daolulvkeyunshu
  • 汽车
    .icon-qiche
  • 套票
    .icon-taopiao
  • 提交
    .icon-tijiao
  • 买车
    .icon-maiche
  • 火车
    .icon-huoche
  • 酒店
    .icon-jiudian
  • 时间
    .icon-shijian
  • 飞机
    .icon-feiji
  • 飞机-横
    .icon-feiji-heng
  • 首页1
    .icon-shouye1
  • 首页2
    .icon-shouye2
  • 信息2
    .icon-xinxi2
  • 信息1
    .icon-xinxi1
  • 我的2
    .icon-wode2
  • 我的1
    .icon-wode1
  • 助手2
    .icon-zhushou2
  • 助手1
    .icon-zhushou1
  • 设置2
    .icon-shezhi2
  • 设置1
    .icon-shezhi1

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 左箭头
    #icon-left-arrow
  • 身份证号
    #icon-card
  • 搜索
    #icon-search
  • 重要提示
    #icon-hint
  • 未选
    #icon-square-noselect
  • 已选
    #icon-square-selected
  • 选择
    #icon-right-arrow
  • 添加
    #icon-add
  • 删除
    #icon-trash
  • 选中
    #icon-circle-selected
  • 未选-蓝
    #icon-circle-blue-noselect
  • 未选
    #icon-circle-noselected
  • 免税店
    #icon-mianshuidian
  • 12306
    #icon-train12306
  • 编组 6
    #icon-hotel-cwt
  • 编组 4
    #icon-flight-cwt
  • 编组 5
    #icon-train-cwt
  • 编组 7
    #icon-car-cwt
  • 我的-已选
    #icon-wode-yixuan
  • 首页-未选
    #icon-shouye-weixuan
  • 设置-已选
    #icon-shezhi-yixuan
  • 助手-已选
    #icon-zhushou-yixuan
  • yemian-copy-copy
    #icon-shouye-yixuan
  • zhushou
    #icon-zhushou-weixuan
  • shezhi
    #icon-shezhi-weixuan
  • wode
    #icon-wode-weixuan
  • icon-message-new
    #icon-message-new
  • icon-refund-new
    #icon-refund-new
  • icon-change-new
    #icon-change-new
  • icon-approve-new
    #icon-approve-new
  • icon-order-new
    #icon-order-new
  • icon-car-new
    #icon-car-new
  • icon-hotel-new
    #icon-hotel-new
  • icon-train-new
    #icon-train-new
  • icon-flight-new
    #icon-flight-new
  • dutyFree
    #icon-mianshuidian2
  • 眼睛
    #icon-yanjing
  • 闭眼睛
    #icon-biyanjing
  • 刷新
    #icon-refresh
  • 发送
    #icon-send
  • 服务条款及隐私
    #icon-yinsi
  • discover-card
    #icon-discover-card
  • visa
    #icon-visa
  • diners-club
    #icon-diners-club
  • american express
    #icon-american-express
  • Maestro
    #icon-maestro
  • master card@1x
    #icon-mastercard
  • jcb
    #icon-jcb
  • 银联
    #icon-yinlian
  • 公司管理_差标管理
    #icon-policy
  • icon-bank-shanghai
    #icon-icon-bank-shanghai
  • icon-bank-nongye
    #icon-icon-bank-nongye
  • icon-bank-shenzhen
    #icon-icon-bank-shenzhen
  • icon-bank-xingye
    #icon-icon-bank-xingye
  • icon-bank-zhongguo
    #icon-icon-bank-zhongguo
  • icon-bank-zhangshang
    #icon-icon-bank-zhangshang
  • icon-close
    #icon-icon-close
  • icon-bank-zhongxin
    #icon-icon-bank-zhongxin
  • icon-bank-beijing
    #icon-icon-bank-beijing
  • icon-bank-airplus
    #icon-icon-bank-airplus
  • icon-bank-gongshang
    #icon-icon-bank-gongshang
  • icon-bank-guangfa
    #icon-icon-bank-guangfa
  • icon-bank-huaxia
    #icon-icon-bank-huaxia
  • icon-bank-jianshe
    #icon-icon-bank-jianshe
  • icon-bank-jiaotong
    #icon-icon-bank-jiaotong
  • icon-bank-minsheng
    #icon-icon-bank-minsheng
  • icon-bank-pufa
    #icon-icon-bank-pufa
  • list-phone
    #icon-list-phonebeifen
  • list-private
    #icon-list-yinsibeifen
  • list-car
    #icon-list-car
  • list-airplane
    #icon-list-airplane
  • list-hotel
    #icon-list-hotel
  • list-trian
    #icon-list-trian
  • service
    #icon-service
  • share
    #icon-share
  • 等待
    #icon-dengdai
  • weather15
    #icon-weather15
  • weather13
    #icon-weather13
  • weather16
    #icon-weather16
  • weather14
    #icon-weather14
  • weather17
    #icon-weather17
  • weather18
    #icon-weather18
  • weather19
    #icon-weather19
  • weather20
    #icon-weather20
  • weather24
    #icon-weather24
  • weather22
    #icon-weather22
  • weather21
    #icon-weather21
  • weather26
    #icon-weather26
  • weather25
    #icon-weather25
  • weather23
    #icon-weather23
  • weather27
    #icon-weather27
  • weather28
    #icon-weather28
  • weather30
    #icon-weather30
  • weather31
    #icon-weather31
  • weather32
    #icon-weather32
  • weather34
    #icon-weather34
  • weather33
    #icon-weather33
  • weather37
    #icon-weather37
  • weather36
    #icon-weather36
  • weather29
    #icon-weather29
  • weather35
    #icon-weather35
  • weather99
    #icon-weather99
  • weather38
    #icon-weather38
  • weather1
    #icon-weather1
  • weather3
    #icon-weather3
  • weather0
    #icon-weather0
  • weather4
    #icon-weather4
  • weather5
    #icon-weather5
  • weather6
    #icon-weather6
  • weather2
    #icon-weather2
  • weather9
    #icon-weather9
  • weather7
    #icon-weather7
  • weather8
    #icon-weather8
  • weather10
    #icon-weather10
  • weather11
    #icon-weather11
  • weather12
    #icon-weather12
  • 公务出行
    #icon-gongwuchuhang
  • 私人出行
    #icon-sirenchuhang
  • 对勾
    #icon-yes
  • 火车换向
    #icon-huochehuanxiang
  • 选择
    #icon-xuanze
  • 选择
    #icon-xuanze1
  • 支付宝
    #icon-zhifubao
  • 支付-微信
    #icon-pay-wechat
  • 快钱
    #icon-kuaiqian
  • 订单
    #icon-order
  • #icon-you
  • #icon-zuo
  • 2
    #icon-icon-test
  • 1
    #icon-icon-test1
  • 车次中心
    #icon-checizhongxin
  • 二维码
    #icon-erweima2
  • 短信
    #icon-sms
  • 导入
    #icon-daoru1
  • 语言
    #icon-yuyan
  • 查天气
    #icon-chatianqi
  • 暂无消息
    #icon-zanwuxiaoxi
  • 升序
    #icon-shengxu
  • 降序
    #icon-jiangxu
  • 附件
    #icon-fujian2
  • 转换
    #icon-zhuanhuan
  • 向上
    #icon-iconfontup2
  • 图片
    #icon-tupian
  • 微信
    #icon-weixin
  • 排序
    #icon-paixu
  • 电话
    #icon-dianhua
  • 银行卡
    #icon-yinxingqia
  • 问号
    #icon-14052218
  • 通知
    #icon-tongzhi
  • 电话
    #icon-dianhua2
  • 航班
    #icon-hangban
  • 用户
    #icon-101
  • 日历
    #icon-rili
  • 哭脸
    #icon-kulian
  • 删除
    #icon-shanchu
  • 编码
    #icon-bianma
  • 向下
    #icon-iconfontdown2
  • 减号
    #icon-jianhao
  • E
    #icon-letter-e
  • 二维码
    #icon-erweima
  • 向下
    #icon-icon123
  • 电话
    #icon-dianhua3
  • 笑脸
    #icon-xiaolian
  • 热门
    #icon-remen
  • 附件
    #icon-fujian
  • 订单
    #icon-dingdan
  • 修改
    #icon-xiugai
  • 时间
    #icon-shijian2
  • 手机
    #icon-shouji
  • 物品领用申请
    #icon-wupinlingyongshenqing
  • 放大镜
    #icon-fangdajing
  • 设置
    #icon-set
  • 行程
    #icon-importedlayers
  • 旅游
    #icon-lvyou
  • 笑脸
    #icon-xiaolian1
  • 对勾
    #icon-duigou
  • 叉叉
    #icon-chacha
  • 旅游
    #icon-lvyou1
  • 预订
    #icon-yuding11
  • 添加
    #icon-icontianjia01
  • 放大镜
    #icon-fangdajing1
  • 对勾
    #icon-duigou1
  • 粗版2_时间预订成功
    #icon-cuban2shijianyudingchenggong
  • 交通
    #icon-jiaotong
  • 换一换
    #icon-huanyihuan
  • 座位
    #icon-zuowei
  • 坐标
    #icon-zuobiao
  • 住宿
    #icon-iconfontchuang
  • 头像
    #icon-touxiang
  • 价格
    #icon-icon06
  • 我的订单
    #icon-wodedingdan
  • 手机
    #icon-shouji2
  • 手机
    #icon-shouji3
  • 对勾
    #icon-duigou2
  • 飞机
    #icon-feiji1
  • 往返
    #icon-icon11
  • 添加
    #icon-15
  • 我的预订
    #icon-wodeyuding
  • 前往
    #icon-qianwang
  • 通知
    #icon-notice
  • ios
    #icon-ios
  • 地球
    #icon-diqiu
  • back
    #icon-back
  • 机票车票
    #icon-jipiaochepiao
  • 对勾
    #icon-duigou3
  • 旅游
    #icon-lvyou2
  • 时间
    #icon-shijian21
  • 文件夹
    #icon-wenjianjia
  • 删除
    #icon-shanchu1
  • 商圈
    #icon-shangquan
  • 线下门店
    #icon-store
  • 向下
    #icon-xiangxia
  • 其他
    #icon-qita
  • 钱袋
    #icon-qiandai
  • 二维码
    #icon-erweima1
  • 单程
    #icon-eg
  • 地图
    #icon-map
  • 酒店
    #icon-jiudian1
  • 筛选
    #icon-shaixuan
  • 授权
    #icon-shouquan
  • 飞机
    #icon-feiji11
  • 预订
    #icon-yuding2
  • 通知
    #icon-tongzhi1
  • 暂停
    #icon-zanting
  • 通知
    #icon-tongzhi2
  • 叹号
    #icon-information
  • 轮船
    #icon-lunchuan
  • 电脑
    #icon-diannao
  • 餐饮
    #icon-canyin
  • 客服
    #icon-1
  • 提交订单
    #icon-tijiao1
  • 叉叉
    #icon-chacha1
  • 旅游线路
    #icon-lvyouxianlu
  • 酒店
    #icon-jiudian2
  • 验证码
    #icon-yanzhengma
  • 审核中
    #icon-xingzhuang1
  • 业务_business140
    #icon-yewubusiness140
  • 客车
    #icon-keche
  • 周边up
    #icon-zhoubianup
  • 向下
    #icon-xiangxia1
  • 订单审批
    #icon-dingdanshengpi
  • 状态
    #icon-zhuangtai11
  • 换一换
    #icon-huanyihuan1
  • 广发
    #icon-guangfa
  • 简介
    #icon-intro3
  • 安卓
    #icon-anzhuo-copy
  • 信息
    #icon-12zhengqiuyijian
  • 飞机
    #icon-feiji-copy
  • 导入
    #icon-daoru
  • 叹号
    #icon-tanhao
  • 修改
    #icon-xiugai1
  • 电脑
    #icon-diannao1
  • 天气_风暴
    #icon-tianqifengbao
  • 旅游 (3)
    #icon-lvyou3
  • 快钱-支付
    #icon-kuaiqianzhifu
  • 转换中
    #icon-zhuanhuanzhong
  • 禁止
    #icon-jinzhi
  • 天气
    #icon-tianqi
  • 火车
    #icon-huoche111
  • 距离
    #icon-juli
  • 设施_客厅
    #icon-sheshiketing
  • 火车
    #icon-huoche31
  • 搜索行政区
    #icon-sousuoxingzhengqu
  • 空心圆
    #icon-kongxinyuan
  • #icon-dian
  • 横杠
    #icon-arrow-cross
  • 竖线
    #icon-shuxian
  • 火车
    #icon-huoche2
  • 时间
    #icon-shijian11
  • 延期uAddtime
    #icon-yanqiuaddtime
  • 成功
    #icon-chenggong
  • 状态
    #icon-zhuangtai
  • 审批
    #icon-shenpi2
  • 任务结果
    #icon-renwujieguo
  • 变更
    #icon-biangeng
  • 飞机
    #icon-feiji-big
  • 到达
    #icon-daoda
  • 起飞
    #icon-qifei
  • 手势
    #icon-touch
  • 显示
    #icon-xianshi
  • 关于
    #icon-guanyu
  • 意见反馈
    #icon-yijianfankui
  • 评价
    #icon-pingjia
  • 推荐
    #icon-icon05
  • chair-b
    #icon-chair-b
  • 行程
    #icon-xingcheng
  • 航班动态
    #icon-icon
  • 座位数
    #icon-zuoweishu
  • note
    #icon-note
  • 球票
    #icon-qiupiao
  • 邮件
    #icon-youjian
  • 预订
    #icon-yuding
  • 报销
    #icon-baoxiao
  • 列表
    #icon-liebiao
  • 客服
    #icon-htmal5icon31
  • 订单
    #icon-dingdan1
  • CN-longhubang
    #icon-cnlonghubang
  • 个人
    #icon-geren
  • 行程
    #icon-xingcheng1
  • 钥匙
    #icon-yaochi
  • 手机
    #icon-shouji1
  • 电话
    #icon-dianhua1
  • 位置
    #icon-weizhi
  • 时间
    #icon-shijian1
  • 火车(1)
    #icon-huoche1
  • 车票
    #icon-chepiao
  • 审批
    #icon-shenpi
  • 审批
    #icon-shenpi1
  • 住宿
    #icon-zhusu
  • 日历
    #icon-rili1
  • 道路旅客运输
    #icon-daolulvkeyunshu
  • 汽车
    #icon-qiche
  • 套票
    #icon-taopiao
  • 提交
    #icon-tijiao
  • 买车
    #icon-maiche
  • 火车
    #icon-huoche
  • 酒店
    #icon-jiudian
  • 时间
    #icon-shijian
  • 飞机
    #icon-feiji
  • 飞机-横
    #icon-feiji-heng
  • 首页1
    #icon-shouye1
  • 首页2
    #icon-shouye2
  • 信息2
    #icon-xinxi2
  • 信息1
    #icon-xinxi1
  • 我的2
    #icon-wode2
  • 我的1
    #icon-wode1
  • 助手2
    #icon-zhushou2
  • 助手1
    #icon-zhushou1
  • 设置2
    #icon-shezhi2
  • 设置1
    #icon-shezhi1

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>