• 加油站
    
  • 救生圈
    
  • 日用品
    
  • 油漆筒
    
  • 光伏
    
  • 水果
    
  • 辅机设备
    
  • 水泵
    
  • 卫星
    
  • 零配件
    
  • 添加照片
    
  • 已分享角标
    
  • 审核中
    
  • 
  • 
  • 图库
    
  • 审核失败
    
  • 水滴
    
  • 加油站
    
  • 提交成功
    
  • 提交成功
    
  • 认证
    
  • winfo-icon-岸基数据
    
  • G
    
  • B
    
  • BG
    
  • BD-2
    
  • 航道信息
    
  • 待航修
    
  • 定位
    
  • 订单
    
  • 服务
    
  • 链接
    
  • 文件
    
  • 向上
    
  • 公告
    
  • 安全 (1)
    
  • 天气
    
  • 提醒
    
  • 管控
    
  • 筛 选
    
  • 
  • 航运计费
    
  • 安全
    
  • 编辑
    
  • 加号
    
  • 上传 (1)
    
  • 铅笔
    
  • 日历
    
  • 退出
    
  • 刷新
    
  • 删除
    
  • 导出
    
  • 搜索
    
  • HTSCIT_选中
    
  • chevron-double-right
    
  • lock
    
  • power-off
    
  • user-circle
    
  • ship
    
  • home-alt
    
  • chart-bar
    
  • star
    
  • edit
    
  • map-marked
    
  • sync-alt
    
  • 
  • 还原
    
  • 附 件
    
  • 录像
    
  • 摄像头
    
  • 
  • 拉远焦距
    
  • 拉近焦距
    
  • 备注
    
  • 截图
    
  • 摄像头
    
  • 
  • 记录
    
  • 焦距
    
  • 定位 位置 (1)
    
  • 综合
    
  • 消 息
    
  • 退出
    
  • 表情
    
  • 绘制
    
  • 绘制
    
  • 图标22
    
  • 图标21
    
  • 信息
    
  • 监控
    
  • 分期-联系客服
    
  • 意见反馈
    
  • 对象
    
  • 关于
    
  • 波浪能
    
  • 404
    
  • 朋友圈
    
  • 五角星
    
  • 摄像头
    
  • ship
    
  • 设备
    
  • 供应
    
  • 图标/绿点
    
  • 商户
    
  • 日 历
    
  • 通知
    
  • 能源能耗管理
    
  • 货物盘点 goods/wh/inventory
    
  • 留言
    
  • 分享
    
  • 微信
    
  • 店铺
    
  • 钱包
    
  • 货船
    
  • 14定位
    
  • 物流配送-43
    
  • 气泡
    
  • 定位
    
  • 记录
    
  • 分析
    
  • 台风
    
  • 台风
    
  • 暂停
    
  • 执行
    
  • 停止
    
  • 台风
    
  • 购物车
    
  • 基站信号
    
  • 支付宝支付
    
  • 微信支付
    
  • 203右下角勾选
    
  • 商城
    
  • 商城信息
    
  • 公告
    
  • 暂停
    
  • 暂停
    
  • 置顶
    
  • 选中
    
  • 灯塔
    
  • parking-circle-hover
    
  • 灯塔
    
  • 物理网络
    
  • 三角形
    
  • 
  • 灯塔-悬停/点击
    
  • 灯塔-选中
    
  • 灯塔-默认
    
  • 眼睛1
    
  • 眼睛3
    
  • S
    
  • 编辑
    
  • chess-rook-alt
    
  • chess-rook-alt (2)
    
  • broadcast-tower
    
  • icon_右上角
    
  • 下载APP
    
  • 状态-作业
    
  • 状态-航行
    
  • 状态-其他
    
  • 加载图标(需转起来)
    
  • Douboe Tap 双击
    
  • Press 按压
    
  • Press-and-Drag 按压并拖动
    
  • Lasso 套索
    
  • Swipe-Down 下滑
    
  • Press-and-Hold 长按
    
  • Scroll-Vertical 上下移动
    
  • Scroll-Horizontal 水平移动
    
  • Swipe-Right 右滑
    
  • Swipe-Left 左滑
    
  • Swipe-Up 上滑
    
  • Tap 单击
    
  • 客服
    
  • 意见反馈
    
  • 加号
    
  • 登录
    
  • 信封8
    
  • 收起
    
  • 展开
    
  • 屏幕问题158
    
  • ellipsis-h
    
  • bars
    
  • list-ul
    
  • parking-circle
    
  • times
    
  • layer-group
    
  • file-export
    
  • 省略号
    
  • 微信
    
  • 地图
    
  • 箭头
    
  • 加号
    
  • 警告
    
  • 受益客户
    
  • 单选 选中
    
  • 购买
    
  • 设置
    
  • 手机
    
  • 眼睛
    
  • 删除
    
  • 返回
    
  • 信息 - 带圈
    
  • 密码
    
  • 菜单
    
  • 个人信息 ICON
    
  • 微信
    
  • 公告
    
  • 无网络
    
  • 双箭头
    
  • 8测距
    
  • 
  • 旗子
    
  • 定位
    
  • 211铃铛
    
  • 消息
    
  • 设置
    
  • 分类
    
  • 选择-多选
    
  • 选择-多选
    
  • 卫星
    
  • 图层
    
  • 旗子
    
  • 轮船
    
  • 推送
    
  • 
  • 轮船
    
  • 加号
    
  • 意见反馈
    
  • 编辑
    
  • 搜索
    
  • 船舶
    
  • 订单
    
  • 退出
    
  • 河道监管
    
  • 旗帜
    
  • 导入
    
  • 未选中
    
  • winfo-icon-轨迹
    
  • 减号
    
  • 箭头_切换右
    
  • 箭头_切换左
    
  • 上下展开_o
    
  • 地图_地球_o
    
  • 设备状态
    
  • 关闭
    
  • 客服
    
  • 警告 01-01
    
  • 复制
    
  • icon-02
    
  • addition_fill
    
  • addition
    
  • browse_fill
    
  • browse
    
  • close
    
  • editor
    
  • feedback_fill
    
  • feedback
    
  • flag_fill
    
  • flag
    
  • fullscreen
    
  • lock_fill
    
  • lock
    
  • mail
    
  • mail_fill
    
  • mobilephone_fill
    
  • mobilephone
    
  • narrow
    
  • people_fill
    
  • people
    
  • remind_fill
    
  • remind
    
  • 设备11-01
    
  • grin-beam-sweat
    
  • chuan c
    
  • chuan h
    
  • chuan n
    
  • route
    
  • draw-polygon
    
  • draw-square
    
  • draw-circle
    
  • map-marker-alt
    
  • 菜单栏-标记管理
    
  • 我的设备2
    
  • filter
    
  • location
    
  • ruler
    
  • plus
    
  • minus
    
  • info
    
  • exclamation-circle
    
  • exclamation-circle
    
  • check
    
  • check-circle
    
  • info
    
  • info-circle
    
  • exclamation
    
  • exclamation-circle
    
  • times-circle
    
  • times
    
  • chart-network
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

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

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

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

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

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

  • 加油站
    .icon-jiayouzhan1
  • 救生圈
    .icon-jiushengquan
  • 日用品
    .icon-riyongpin
  • 油漆筒
    .icon-youqitong
  • 光伏
    .icon-guangfu
  • 水果
    .icon-shuiguo
  • 辅机设备
    .icon-fujishebei
  • 水泵
    .icon-shuibeng
  • 卫星
    .icon-weixing1
  • 零配件
    .icon-lingpeijian
  • 添加照片
    .icon-tianjiazhaopian
  • 已分享角标
    .icon-yifenxiangjiaobiao
  • 审核中
    .icon-daianzhuang1beifen2
  • .icon-ting
  • .icon-man
  • 图库
    .icon-tuku
  • 审核失败
    .icon-daianzhuang1beifen
  • 水滴
    .icon-shuidi
  • 加油站
    .icon-jiayouzhan
  • 提交成功
    .icon-tijiaochenggong
  • 提交成功
    .icon-tijiao
  • 认证
    .icon-renzheng-
  • winfo-icon-岸基数据
    .icon-winfo-icon-anjishuju
  • G
    .icon-letter-g-copy-copy-copy-copy-copy
  • B
    .icon-letter-b-copy-copy-copy
  • BG
    .icon-BG
  • BD-2
    .icon-BD-2
  • 航道信息
    .icon-hangdaoxinxi
  • 待航修
    .icon-daihangxiu
  • 定位
    .icon-dingwei2
  • 订单
    .icon-dingdan1
  • 服务
    .icon-fuwu
  • 链接
    .icon-lianjie
  • 文件
    .icon-wenjian
  • 向上
    .icon-xiangshang
  • 公告
    .icon-gonggao2
  • 安全 (1)
    .icon-anquan1
  • 天气
    .icon-tianqi-copy
  • 提醒
    .icon-tixing
  • 管控
    .icon-guankong
  • 筛 选
    .icon-filter1
  • .icon-you1
  • 航运计费
    .icon-hangyunjifei
  • 安全
    .icon-anquan
  • 编辑
    .icon-bianji1
  • 加号
    .icon-iconfonticon02
  • 上传 (1)
    .icon-shangchuan1
  • 铅笔
    .icon-pencil
  • 日历
    .icon-rili-tianchong
  • 退出
    .icon-tuichu2
  • 刷新
    .icon-shuaxin
  • 删除
    .icon-shanchu1
  • 导出
    .icon-daochu
  • 搜索
    .icon-sousuo1
  • HTSCIT_选中
    .icon-xuanzhong1
  • chevron-double-right
    .icon-chevron-double-right
  • lock
    .icon-lock1
  • power-off
    .icon-power-off
  • user-circle
    .icon-user-circle
  • ship
    .icon-ship2
  • home-alt
    .icon-home-alt
  • chart-bar
    .icon-chart-bar
  • star
    .icon-star
  • edit
    .icon-edit
  • map-marked
    .icon-map-marked
  • sync-alt
    .icon-sync-alt
  • .icon-you
  • 还原
    .icon-huanyuan
  • 附 件
    .icon-fujian
  • 录像
    .icon-luxiang
  • 摄像头
    .icon-shexiangtou-xian
  • .icon-zuo
  • 拉远焦距
    .icon-layuanjiaoju
  • 拉近焦距
    .icon-lajinjiaoju
  • 备注
    .icon-beizhu
  • 截图
    .icon-img
  • 摄像头
    .icon-shexiangtou1
  • .icon-zuo1
  • 记录
    .icon-mo
  • 焦距
    .icon-jiaoju
  • 定位 位置 (1)
    .icon-dingweiweizhi
  • 综合
    .icon-zonghe
  • 消 息
    .icon-xiaoxi1
  • 退出
    .icon-tuichu1
  • 表情
    .icon-biaoqing
  • 绘制
    .icon-huizhi
  • 绘制
    .icon-huizhi1
  • 图标22
    .icon-tubiao22
  • 图标21
    .icon-tubiao21
  • 信息
    .icon-informatiom
  • 监控
    .icon-jiankong
  • 分期-联系客服
    .icon-lianxikefu
  • 意见反馈
    .icon-yijianfankui1
  • 对象
    .icon-duixiang
  • 关于
    .icon-guanyu
  • 波浪能
    .icon-bolangneng
  • 404
    .icon-icon-test2
  • 朋友圈
    .icon-pengyouquan1
  • 五角星
    .icon-xingzhuang60kaobei2
  • 摄像头
    .icon-shexiangtou
  • ship
    .icon-ship1
  • 设备
    .icon-shebei
  • 供应
    .icon-gongying
  • 图标/绿点
    .icon-tubiaolvdian
  • 商户
    .icon-shanghu
  • 日 历
    .icon-rili
  • 通知
    .icon-tongzhi
  • 能源能耗管理
    .icon-nengyuannenghaoguanli
  • 货物盘点 goods/wh/inventory
    .icon-goodswhinventory
  • 留言
    .icon-comment21
  • 分享
    .icon-fenxiang
  • 微信
    .icon-weixin2
  • 店铺
    .icon-dianpu
  • 钱包
    .icon-qianbao
  • 货船
    .icon-huochuan
  • 14定位
    .icon-dingwei1
  • 物流配送-43
    .icon-wuliupeisong-
  • 气泡
    .icon-qipao
  • 定位
    .icon-dingwei
  • 记录
    .icon-jilu
  • 分析
    .icon-fenxi
  • 台风
    .icon-taifeng2
  • 台风
    .icon-taifeng1
  • 暂停
    .icon-zanting2
  • 执行
    .icon-zhihang
  • 停止
    .icon-tingzhi
  • 台风
    .icon-taifeng
  • 购物车
    .icon-gouwuche
  • 基站信号
    .icon-jizhanxinhao
  • 支付宝支付
    .icon-zhifubaozhifu
  • 微信支付
    .icon-weixinzhifu
  • 203右下角勾选
    .icon-youxiajiaogouxuan
  • 商城
    .icon-icon-test1
  • 商城信息
    .icon-shangchengxinxi
  • 公告
    .icon-gonggao1
  • 暂停
    .icon-zanting1
  • 暂停
    .icon-zanting
  • 置顶
    .icon-zhiding
  • 选中
    .icon-xuanzhong
  • 灯塔
    .icon-dengta1
  • parking-circle-hover
    .icon-parking-circle-hover
  • 灯塔
    .icon-dengta
  • 物理网络
    .icon-wuliwangluo
  • 三角形
    .icon-sanjiaoxing
  • .icon-icon1
  • 灯塔-悬停/点击
    .icon-chess-rook-alt-h
  • 灯塔-选中
    .icon-chess-rook-alt-p
  • 灯塔-默认
    .icon-chess-rook-alt-d
  • 眼睛1
    .icon-yanjing1
  • 眼睛3
    .icon-yanjing2
  • S
    .icon-dp-string
  • 编辑
    .icon-bianji2
  • chess-rook-alt
    .icon-chess-rook-alt
  • chess-rook-alt (2)
    .icon-chess-rook-alt1
  • broadcast-tower
    .icon-broadcast-tower
  • icon_右上角
    .icon-icon_youshangjiao
  • 下载APP
    .icon-APPCopy
  • 状态-作业
    .icon-alarm-clock
  • 状态-航行
    .icon-tachometer-alt-fast
  • 状态-其他
    .icon-question-circle
  • 加载图标(需转起来)
    .icon-spinner-third
  • Douboe Tap 双击
    .icon-DouboeTapshuangji
  • Press 按压
    .icon-Pressanya
  • Press-and-Drag 按压并拖动
    .icon-Press-and-Draganyabingtuodong
  • Lasso 套索
    .icon-Lassotaosuo
  • Swipe-Down 下滑
    .icon-Swipe-Downxiahua
  • Press-and-Hold 长按
    .icon-Press-and-Holdchangan
  • Scroll-Vertical 上下移动
    .icon-Scroll-Verticalshangxiayidong
  • Scroll-Horizontal 水平移动
    .icon-Scroll-Horizontalshuipingyidong
  • Swipe-Right 右滑
    .icon-Swipe-Rightyouhua
  • Swipe-Left 左滑
    .icon-Swipe-Leftzuohua
  • Swipe-Up 上滑
    .icon-Swipe-Upshanghua
  • Tap 单击
    .icon-Tapdanji
  • 客服
    .icon-kefu1
  • 意见反馈
    .icon-yijianfankui
  • 加号
    .icon-jiahao2
  • 登录
    .icon-denglu
  • 信封8
    .icon-xinfeng8
  • 收起
    .icon-shouqi
  • 展开
    .icon-zhankai
  • 屏幕问题158
    .icon-pingmuwenti
  • ellipsis-h
    .icon-ellipsis-h
  • bars
    .icon-bars
  • list-ul
    .icon-list-ul
  • parking-circle
    .icon-parking-circle
  • times
    .icon-times1
  • layer-group
    .icon-layer-group
  • file-export
    .icon-file-export
  • 省略号
    .icon-shenglvehao
  • 微信
    .icon-weixin1
  • 地图
    .icon-ditu
  • 箭头
    .icon-arrow-right
  • 加号
    .icon-jiahao1
  • 警告
    .icon-47
  • 受益客户
    .icon-shouyikehu
  • 单选 选中
    .icon-danxuanxuanzhong
  • 购买
    .icon-goumai
  • 设置
    .icon-settings
  • 手机
    .icon-shouji54
  • 眼睛
    .icon-yanjing
  • 删除
    .icon-shanchu
  • 返回
    .icon-fanhui
  • 信息 - 带圈
    .icon-info_circle
  • 密码
    .icon-mima
  • 菜单
    .icon-caidan
  • 个人信息 ICON
    .icon-gerenxinxiicon
  • 微信
    .icon-weixin
  • 公告
    .icon-gonggao
  • 无网络
    .icon-wuwangluo
  • 双箭头
    .icon-shuangjiantou
  • 8测距
    .icon-ceju
  • .icon-mao
  • 旗子
    .icon-qizi1
  • 定位
    .icon-icon-test
  • 211铃铛
    .icon-lingdang
  • 消息
    .icon-xiaoxi
  • 设置
    .icon-set
  • 分类
    .icon-tubiao-
  • 选择-多选
    .icon-xuanze-duoxuan-tianchong
  • 选择-多选
    .icon-xuanze-duoxuan
  • 卫星
    .icon-weixing
  • 图层
    .icon-tuceng
  • 旗子
    .icon-qizi
  • 轮船
    .icon-lunchuan
  • 推送
    .icon-tuisong
  • .icon-chuan
  • 轮船
    .icon-lunchuan1
  • 加号
    .icon-jiahao
  • 意见反馈
    .icon-yijianfankui-
  • 编辑
    .icon-bianji
  • 搜索
    .icon-sousuo
  • 船舶
    .icon-ship
  • 订单
    .icon-dingdan
  • 退出
    .icon-tuichu
  • 河道监管
    .icon-hedaojianguan
  • 旗帜
    .icon-qizhi
  • 导入
    .icon-daoru
  • 未选中
    .icon-weixuanzhong
  • winfo-icon-轨迹
    .icon-winfo-icon-guiji
  • 减号
    .icon-jianhao
  • 箭头_切换右
    .icon-jiantou_qiehuanyou
  • 箭头_切换左
    .icon-jiantou_qiehuanzuo
  • 上下展开_o
    .icon-shangxiazhankai_o
  • 地图_地球_o
    .icon-ditu_diqiu_o
  • 设备状态
    .icon-shebeizhuangtai
  • 关闭
    .icon-guanbi
  • 客服
    .icon-kefu
  • 警告 01-01
    .icon-jinggao-
  • 复制
    .icon-fuzhi
  • icon-02
    .icon-icon-
  • addition_fill
    .icon-addition_fill
  • addition
    .icon-addition
  • browse_fill
    .icon-browse_fill
  • browse
    .icon-browse
  • close
    .icon-close
  • editor
    .icon-editor
  • feedback_fill
    .icon-feedback_fill
  • feedback
    .icon-feedback
  • flag_fill
    .icon-flag_fill
  • flag
    .icon-flag
  • fullscreen
    .icon-fullscreen
  • lock_fill
    .icon-lock_fill
  • lock
    .icon-lock
  • mail
    .icon-mail
  • mail_fill
    .icon-mail_fill
  • mobilephone_fill
    .icon-mobilephone_fill
  • mobilephone
    .icon-mobilephone
  • narrow
    .icon-narrow
  • people_fill
    .icon-people_fill
  • people
    .icon-people
  • remind_fill
    .icon-remind_fill
  • remind
    .icon-remind
  • 设备11-01
    .icon-shebei-1
  • grin-beam-sweat
    .icon-grin-beam-sweat-copy
  • chuan c
    .icon-chuanc
  • chuan h
    .icon-chuanh
  • chuan n
    .icon-chuann
  • route
    .icon-route
  • draw-polygon
    .icon-draw-polygon
  • draw-square
    .icon-draw-square
  • draw-circle
    .icon-draw-circle
  • map-marker-alt
    .icon-map-marker-alt
  • 菜单栏-标记管理
    .icon-map-marked-alt
  • 我的设备2
    .icon-tablet-android-alt
  • filter
    .icon-filter
  • location
    .icon-location
  • ruler
    .icon-ruler
  • plus
    .icon-plus
  • minus
    .icon-minus
  • info
    .icon-info
  • exclamation-circle
    .icon-exclamation-circle
  • exclamation-circle
    .icon-exclamation-circle1
  • check
    .icon-check
  • check-circle
    .icon-check-circle
  • info
    .icon-info1
  • info-circle
    .icon-info-circle
  • exclamation
    .icon-exclamation
  • exclamation-circle
    .icon-exclamation-circle2
  • times-circle
    .icon-times-circle
  • times
    .icon-times
  • chart-network
    .icon-chart-network

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 加油站
    #icon-jiayouzhan1
  • 救生圈
    #icon-jiushengquan
  • 日用品
    #icon-riyongpin
  • 油漆筒
    #icon-youqitong
  • 光伏
    #icon-guangfu
  • 水果
    #icon-shuiguo
  • 辅机设备
    #icon-fujishebei
  • 水泵
    #icon-shuibeng
  • 卫星
    #icon-weixing1
  • 零配件
    #icon-lingpeijian
  • 添加照片
    #icon-tianjiazhaopian
  • 已分享角标
    #icon-yifenxiangjiaobiao
  • 审核中
    #icon-daianzhuang1beifen2
  • #icon-ting
  • #icon-man
  • 图库
    #icon-tuku
  • 审核失败
    #icon-daianzhuang1beifen
  • 水滴
    #icon-shuidi
  • 加油站
    #icon-jiayouzhan
  • 提交成功
    #icon-tijiaochenggong
  • 提交成功
    #icon-tijiao
  • 认证
    #icon-renzheng-
  • winfo-icon-岸基数据
    #icon-winfo-icon-anjishuju
  • G
    #icon-letter-g-copy-copy-copy-copy-copy
  • B
    #icon-letter-b-copy-copy-copy
  • BG
    #icon-BG
  • BD-2
    #icon-BD-2
  • 航道信息
    #icon-hangdaoxinxi
  • 待航修
    #icon-daihangxiu
  • 定位
    #icon-dingwei2
  • 订单
    #icon-dingdan1
  • 服务
    #icon-fuwu
  • 链接
    #icon-lianjie
  • 文件
    #icon-wenjian
  • 向上
    #icon-xiangshang
  • 公告
    #icon-gonggao2
  • 安全 (1)
    #icon-anquan1
  • 天气
    #icon-tianqi-copy
  • 提醒
    #icon-tixing
  • 管控
    #icon-guankong
  • 筛 选
    #icon-filter1
  • #icon-you1
  • 航运计费
    #icon-hangyunjifei
  • 安全
    #icon-anquan
  • 编辑
    #icon-bianji1
  • 加号
    #icon-iconfonticon02
  • 上传 (1)
    #icon-shangchuan1
  • 铅笔
    #icon-pencil
  • 日历
    #icon-rili-tianchong
  • 退出
    #icon-tuichu2
  • 刷新
    #icon-shuaxin
  • 删除
    #icon-shanchu1
  • 导出
    #icon-daochu
  • 搜索
    #icon-sousuo1
  • HTSCIT_选中
    #icon-xuanzhong1
  • chevron-double-right
    #icon-chevron-double-right
  • lock
    #icon-lock1
  • power-off
    #icon-power-off
  • user-circle
    #icon-user-circle
  • ship
    #icon-ship2
  • home-alt
    #icon-home-alt
  • chart-bar
    #icon-chart-bar
  • star
    #icon-star
  • edit
    #icon-edit
  • map-marked
    #icon-map-marked
  • sync-alt
    #icon-sync-alt
  • #icon-you
  • 还原
    #icon-huanyuan
  • 附 件
    #icon-fujian
  • 录像
    #icon-luxiang
  • 摄像头
    #icon-shexiangtou-xian
  • #icon-zuo
  • 拉远焦距
    #icon-layuanjiaoju
  • 拉近焦距
    #icon-lajinjiaoju
  • 备注
    #icon-beizhu
  • 截图
    #icon-img
  • 摄像头
    #icon-shexiangtou1
  • #icon-zuo1
  • 记录
    #icon-mo
  • 焦距
    #icon-jiaoju
  • 定位 位置 (1)
    #icon-dingweiweizhi
  • 综合
    #icon-zonghe
  • 消 息
    #icon-xiaoxi1
  • 退出
    #icon-tuichu1
  • 表情
    #icon-biaoqing
  • 绘制
    #icon-huizhi
  • 绘制
    #icon-huizhi1
  • 图标22
    #icon-tubiao22
  • 图标21
    #icon-tubiao21
  • 信息
    #icon-informatiom
  • 监控
    #icon-jiankong
  • 分期-联系客服
    #icon-lianxikefu
  • 意见反馈
    #icon-yijianfankui1
  • 对象
    #icon-duixiang
  • 关于
    #icon-guanyu
  • 波浪能
    #icon-bolangneng
  • 404
    #icon-icon-test2
  • 朋友圈
    #icon-pengyouquan1
  • 五角星
    #icon-xingzhuang60kaobei2
  • 摄像头
    #icon-shexiangtou
  • ship
    #icon-ship1
  • 设备
    #icon-shebei
  • 供应
    #icon-gongying
  • 图标/绿点
    #icon-tubiaolvdian
  • 商户
    #icon-shanghu
  • 日 历
    #icon-rili
  • 通知
    #icon-tongzhi
  • 能源能耗管理
    #icon-nengyuannenghaoguanli
  • 货物盘点 goods/wh/inventory
    #icon-goodswhinventory
  • 留言
    #icon-comment21
  • 分享
    #icon-fenxiang
  • 微信
    #icon-weixin2
  • 店铺
    #icon-dianpu
  • 钱包
    #icon-qianbao
  • 货船
    #icon-huochuan
  • 14定位
    #icon-dingwei1
  • 物流配送-43
    #icon-wuliupeisong-
  • 气泡
    #icon-qipao
  • 定位
    #icon-dingwei
  • 记录
    #icon-jilu
  • 分析
    #icon-fenxi
  • 台风
    #icon-taifeng2
  • 台风
    #icon-taifeng1
  • 暂停
    #icon-zanting2
  • 执行
    #icon-zhihang
  • 停止
    #icon-tingzhi
  • 台风
    #icon-taifeng
  • 购物车
    #icon-gouwuche
  • 基站信号
    #icon-jizhanxinhao
  • 支付宝支付
    #icon-zhifubaozhifu
  • 微信支付
    #icon-weixinzhifu
  • 203右下角勾选
    #icon-youxiajiaogouxuan
  • 商城
    #icon-icon-test1
  • 商城信息
    #icon-shangchengxinxi
  • 公告
    #icon-gonggao1
  • 暂停
    #icon-zanting1
  • 暂停
    #icon-zanting
  • 置顶
    #icon-zhiding
  • 选中
    #icon-xuanzhong
  • 灯塔
    #icon-dengta1
  • parking-circle-hover
    #icon-parking-circle-hover
  • 灯塔
    #icon-dengta
  • 物理网络
    #icon-wuliwangluo
  • 三角形
    #icon-sanjiaoxing
  • #icon-icon1
  • 灯塔-悬停/点击
    #icon-chess-rook-alt-h
  • 灯塔-选中
    #icon-chess-rook-alt-p
  • 灯塔-默认
    #icon-chess-rook-alt-d
  • 眼睛1
    #icon-yanjing1
  • 眼睛3
    #icon-yanjing2
  • S
    #icon-dp-string
  • 编辑
    #icon-bianji2
  • chess-rook-alt
    #icon-chess-rook-alt
  • chess-rook-alt (2)
    #icon-chess-rook-alt1
  • broadcast-tower
    #icon-broadcast-tower
  • icon_右上角
    #icon-icon_youshangjiao
  • 下载APP
    #icon-APPCopy
  • 状态-作业
    #icon-alarm-clock
  • 状态-航行
    #icon-tachometer-alt-fast
  • 状态-其他
    #icon-question-circle
  • 加载图标(需转起来)
    #icon-spinner-third
  • Douboe Tap 双击
    #icon-DouboeTapshuangji
  • Press 按压
    #icon-Pressanya
  • Press-and-Drag 按压并拖动
    #icon-Press-and-Draganyabingtuodong
  • Lasso 套索
    #icon-Lassotaosuo
  • Swipe-Down 下滑
    #icon-Swipe-Downxiahua
  • Press-and-Hold 长按
    #icon-Press-and-Holdchangan
  • Scroll-Vertical 上下移动
    #icon-Scroll-Verticalshangxiayidong
  • Scroll-Horizontal 水平移动
    #icon-Scroll-Horizontalshuipingyidong
  • Swipe-Right 右滑
    #icon-Swipe-Rightyouhua
  • Swipe-Left 左滑
    #icon-Swipe-Leftzuohua
  • Swipe-Up 上滑
    #icon-Swipe-Upshanghua
  • Tap 单击
    #icon-Tapdanji
  • 客服
    #icon-kefu1
  • 意见反馈
    #icon-yijianfankui
  • 加号
    #icon-jiahao2
  • 登录
    #icon-denglu
  • 信封8
    #icon-xinfeng8
  • 收起
    #icon-shouqi
  • 展开
    #icon-zhankai
  • 屏幕问题158
    #icon-pingmuwenti
  • ellipsis-h
    #icon-ellipsis-h
  • bars
    #icon-bars
  • list-ul
    #icon-list-ul
  • parking-circle
    #icon-parking-circle
  • times
    #icon-times1
  • layer-group
    #icon-layer-group
  • file-export
    #icon-file-export
  • 省略号
    #icon-shenglvehao
  • 微信
    #icon-weixin1
  • 地图
    #icon-ditu
  • 箭头
    #icon-arrow-right
  • 加号
    #icon-jiahao1
  • 警告
    #icon-47
  • 受益客户
    #icon-shouyikehu
  • 单选 选中
    #icon-danxuanxuanzhong
  • 购买
    #icon-goumai
  • 设置
    #icon-settings
  • 手机
    #icon-shouji54
  • 眼睛
    #icon-yanjing
  • 删除
    #icon-shanchu
  • 返回
    #icon-fanhui
  • 信息 - 带圈
    #icon-info_circle
  • 密码
    #icon-mima
  • 菜单
    #icon-caidan
  • 个人信息 ICON
    #icon-gerenxinxiicon
  • 微信
    #icon-weixin
  • 公告
    #icon-gonggao
  • 无网络
    #icon-wuwangluo
  • 双箭头
    #icon-shuangjiantou
  • 8测距
    #icon-ceju
  • #icon-mao
  • 旗子
    #icon-qizi1
  • 定位
    #icon-icon-test
  • 211铃铛
    #icon-lingdang
  • 消息
    #icon-xiaoxi
  • 设置
    #icon-set
  • 分类
    #icon-tubiao-
  • 选择-多选
    #icon-xuanze-duoxuan-tianchong
  • 选择-多选
    #icon-xuanze-duoxuan
  • 卫星
    #icon-weixing
  • 图层
    #icon-tuceng
  • 旗子
    #icon-qizi
  • 轮船
    #icon-lunchuan
  • 推送
    #icon-tuisong
  • #icon-chuan
  • 轮船
    #icon-lunchuan1
  • 加号
    #icon-jiahao
  • 意见反馈
    #icon-yijianfankui-
  • 编辑
    #icon-bianji
  • 搜索
    #icon-sousuo
  • 船舶
    #icon-ship
  • 订单
    #icon-dingdan
  • 退出
    #icon-tuichu
  • 河道监管
    #icon-hedaojianguan
  • 旗帜
    #icon-qizhi
  • 导入
    #icon-daoru
  • 未选中
    #icon-weixuanzhong
  • winfo-icon-轨迹
    #icon-winfo-icon-guiji
  • 减号
    #icon-jianhao
  • 箭头_切换右
    #icon-jiantou_qiehuanyou
  • 箭头_切换左
    #icon-jiantou_qiehuanzuo
  • 上下展开_o
    #icon-shangxiazhankai_o
  • 地图_地球_o
    #icon-ditu_diqiu_o
  • 设备状态
    #icon-shebeizhuangtai
  • 关闭
    #icon-guanbi
  • 客服
    #icon-kefu
  • 警告 01-01
    #icon-jinggao-
  • 复制
    #icon-fuzhi
  • icon-02
    #icon-icon-
  • addition_fill
    #icon-addition_fill
  • addition
    #icon-addition
  • browse_fill
    #icon-browse_fill
  • browse
    #icon-browse
  • close
    #icon-close
  • editor
    #icon-editor
  • feedback_fill
    #icon-feedback_fill
  • feedback
    #icon-feedback
  • flag_fill
    #icon-flag_fill
  • flag
    #icon-flag
  • fullscreen
    #icon-fullscreen
  • lock_fill
    #icon-lock_fill
  • lock
    #icon-lock
  • mail
    #icon-mail
  • mail_fill
    #icon-mail_fill
  • mobilephone_fill
    #icon-mobilephone_fill
  • mobilephone
    #icon-mobilephone
  • narrow
    #icon-narrow
  • people_fill
    #icon-people_fill
  • people
    #icon-people
  • remind_fill
    #icon-remind_fill
  • remind
    #icon-remind
  • 设备11-01
    #icon-shebei-1
  • grin-beam-sweat
    #icon-grin-beam-sweat-copy
  • chuan c
    #icon-chuanc
  • chuan h
    #icon-chuanh
  • chuan n
    #icon-chuann
  • route
    #icon-route
  • draw-polygon
    #icon-draw-polygon
  • draw-square
    #icon-draw-square
  • draw-circle
    #icon-draw-circle
  • map-marker-alt
    #icon-map-marker-alt
  • 菜单栏-标记管理
    #icon-map-marked-alt
  • 我的设备2
    #icon-tablet-android-alt
  • filter
    #icon-filter
  • location
    #icon-location
  • ruler
    #icon-ruler
  • plus
    #icon-plus
  • minus
    #icon-minus
  • info
    #icon-info
  • exclamation-circle
    #icon-exclamation-circle
  • exclamation-circle
    #icon-exclamation-circle1
  • check
    #icon-check
  • check-circle
    #icon-check-circle
  • info
    #icon-info1
  • info-circle
    #icon-info-circle
  • exclamation
    #icon-exclamation
  • exclamation-circle
    #icon-exclamation-circle2
  • times-circle
    #icon-times-circle
  • times
    #icon-times
  • chart-network
    #icon-chart-network

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>