• 上传
    
  • 左上
    
  • 向上
    
  • 右上
    
  • 向下
    
  • 右下
    
  • 向左
    
  • 视频
    
  • 面积
    
  • info
    
  • right
    
  • 返回
    
  • 分析
    
  • layers
    
  • 轨迹回放
    
  • 热力图
    
  • 文件夹 闭合icon
    
  • 统计
    
  • zoom-in
    
  • 导航-购物车
    
  • layers
    
  • road
    
  • checkbox
    
  • dot-circle
    
  • 瞄准
    
  • sey-earth-a
    
  • move-horizontal
    
  • 书签管理
    
  • checkbox-checked
    
  • 箭头
    
  • 对比分析
    
  • 返回
    
  • earth
    
  • 箭头_arrow591
    
  • 电话
    
  • 数据
    
  • 分析
    
  • search
    
  • 项目
    
  • 生活服务
    
  • 图层
    
  • Windows
    
  • 箭头
    
  • 箭头
    
  • 文件夹
    
  • 
  • 标记
    
  • 测量
    
  • 关闭
    
  • 查找 表单 列表
    
  • 警示 感叹号 !2
    
  • 立方体 立体 多面体 方块2
    
  • 直方框
    
  • 折线图
    
  • map
    
  • info
    
  • 线框
    
  • rivers
    
  • fold-折叠
    
  • 最大化
    
  • 箭头_arrow591
    
  • 路径分析
    
  • 全屏
    
  • 首页
    
  • eye
    
  • 定位
    
  • 用户
    
  • addfile
    
  • 暂停
    
  • 停止
    
  • 后退
    
  • 快进
    
  • 开始
    
  • 南京地铁
    
  • 审核
    
  • 时间
    
  • 展开
    
  • 文章1
    
  • 播放
    
  • close
    
  • 收藏
    
  • 分析
    
  • 测量距离
    
  • pause
    
  • 数据分析
    
  • delete_2_circle_line
    
  • close
    
  • format_brush
    
  • 回放
    
  • 列表
    
  • 规划设计
    
  • 电脑
    
  • 编辑
    
  • 图标_块状排列
    
  • 数据分析
    
  • compass-1
    
  • compass
    
  • 931菜单_测量
    
  • 停车场
    
  • 叠加分析
    
  • 三维分析
    
  • chengyi_pc_compared
    
  • icon-location
    
  • 地图叠加分析
    
  • view-module
    
  • animation
    
  • city
    
  • fold
    
  • 摄像头
    
  • 属性
    
  • 
  • upload
    
  • view_off
    
  • play
    
  • 选中
    
  • 上箭头
    
  • hand
    
  • 退出全屏
    
  • 档案
    
  • 全屏
    
  • watch-later
    
  • 可视化数据ETL
    
  • 企业图谱
    
  • 散点图
    
  • table
    
  • upload-file
    
  • 测量
    
  • 几何
    
  • shp
    
  • 添加
    
  • TXT
    
  • 柱状图
    
  • 放大镜
    
  • 上传
    
  • 对比
    
  • unfold
    
  • 分析
    
  • 
  • 图层
    
  • 指针
    
  • 对比
    
  • 线损分析
    
  • 搜索分类
    
  • 设置
    
  • 旗子
    
  • 标记
    
  • 暂停
    
  • menu fold
    
  • menu unfold
    
  • 医疗卫生
    
  • 专题
    
  • 符号-绘制
    
  • 文档
    
  • 收缩
    
  • 导出 (7)
    
  • addfile
    
  • 图层
    
  • 分析
    
  • 三维地图API
    
  • 差异性分析
    
  • 行政区划管理
    
  • 下一页
    
  • 机构
    
  • 下载
    
  • 下箭头
    
  • 删 除
    
  • 热力图列表
    
  • 折线图
    
  • 定位
    
  • 奖章
    
  • 测量
    
  • 14-饼状图
    
  • xls
    
  • 标记
    
  • excel
    
  • 删除
    
  • location
    
  • earth
    
  • 目录
    
  • 分析
    
  • 大规模计算与分析
    
  • 
  • analysis
    
  • menuunfold
    
  • meunfold
    
  • zip
    
  • 定位
    
  • 箭头
    
  • 地块
    
  • 统计 总数
    
  • 高程
    
  • 电脑
    
  • 对号_1
    
  • 暂停-停止3
    
  • 暂停-停止32
    
  • 文化教育
    
  • 石化
    
  • 更多
    
  • 展开
    
  • 下载
    
  • 12-小黑点
    
  • 分析
    
  • tools
    
  • 图层-选中
    
  • 对比
    
  • 统计
    
  • 打印机
    
  • 电脑
    
  • 曲线
    
  • hand
    
  • 监控控制管理监管
    
  • 人口
    
  • 地球
    
  • hand-tap-2
    
  • xml
    
  • 
  • 数据
    
  • 美食
    
  • 播放
    
  • 停止
    
  • 暂停
    
  • 上传
    
  • icon_录像回放
    
  • 定位
    
  • zoom out
    
  • icon_full screen
    
  • 编辑
    
  • 预览
    
  • 文件夹
    
  • 文本
    
  • 地形
    
  • icon-rgb_配置智能分析-34
    
  • 导出 (7)
    
  • 城市
    
  • 展开
    
  • 交通出行
    
  • 收起
    
  • 查询记录
    
  • 漫游路径
    
  • 最小化
    
  • 箭头
    
  • 行政区划
    
  • 分屏显示
    
  • 日志检索
    
  • 箭头
    
  • 分组
    
  • 网络
    
  • 置换
    
  • AI智能
    
  • 知识
    
  • 自动
    
  • 定位
    
  • 旋转
    
  • 下一页
    
  • CAD系统
    
  • 左箭头
    
  • 右箭头
    
  • 兴趣点查询
    
  • 淹没
    
  • 景点
    
  • view-stream
    
  • 摄像头
    
  • GIS
    
  • OA标记
    
  • 缩小
    
  • 放大
    
  • 重置
    
  • 热力图
    
  • 多时相对比
    
  • 梯形
    
  • 瓦片数据
    
  • 收藏夹
    
  • 智能搜索
    
  • 云虚拟主机
    
  • 开发
    
  • 一体化-门户-(新)-03
    
  • 一体化-门户-(新)-04
    
  • 时空分析
    
  • 信号
    
  • 卷帘-1
    
  • icon_遥感影像
    
  • dwg
    
  • 动态地图
    
  • 地球
    
  • graph
    
  • fly
    
  • 箭头
    
  • 箭头
    
  • 箭头
    
  • 向左
    

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-f-upload2
  • 左上
    .icon-f-zuoshang
  • 向上
    .icon-f-xiangshang
  • 右上
    .icon-f-youshang
  • 向下
    .icon-f-xiangxia
  • 右下
    .icon-f-youxia
  • 向左
    .icon-f-xiangzuo
  • 视频
    .icon-f-video
  • 面积
    .icon-f-profile
  • info
    .icon-f-info
  • right
    .icon-f-go-right
  • 返回
    .icon-f-back1
  • 分析
    .icon-f-analysis-5
  • layers
    .icon-f-layers
  • 轨迹回放
    .icon-f-guijihuifang
  • 热力图
    .icon-f-heatmap
  • 文件夹 闭合icon
    .icon-f-folder
  • 统计
    .icon-f-ststistics
  • zoom-in
    .icon-f-zoomin
  • 导航-购物车
    .icon-f-shop
  • layers
    .icon-f-layer-list
  • road
    .icon-f-custom
  • checkbox
    .icon-f-unchecked
  • dot-circle
    .icon-f-dotcircle
  • 瞄准
    .icon-f-aim
  • sey-earth-a
    .icon-f-full-map
  • move-horizontal
    .icon-f-movehorizontal
  • 书签管理
    .icon-f-bookmark
  • checkbox-checked
    .icon-f-checked
  • 箭头
    .icon-f-mouse-empty
  • 对比分析
    .icon-f-analysis-compare
  • 返回
    .icon-f-back
  • earth
    .icon-f-global
  • 箭头_arrow591
    .icon-f-move-backward
  • 电话
    .icon-f-tel
  • 数据
    .icon-f-data-service
  • 分析
    .icon-f-analysis-4
  • search
    .icon-f-search
  • 项目
    .icon-f-project1
  • 生活服务
    .icon-f-service
  • 图层
    .icon-f-layer1
  • Windows
    .icon-f-windows
  • 箭头
    .icon-f-overview-close
  • 箭头
    .icon-f-overview-open
  • 文件夹
    .icon-f-scroll-analyze
  • .icon-f-circle-empty
  • 标记
    .icon-f-mark
  • 测量
    .icon-f-measure1
  • 关闭
    .icon-f-close1
  • 查找 表单 列表
    .icon-f-select-list
  • 警示 感叹号 !2
    .icon-f-excalmation-mark
  • 立方体 立体 多面体 方块2
    .icon-f-threeD
  • 直方框
    .icon-f-max-screen
  • 折线图
    .icon-f-line-graph
  • map
    .icon-f-map
  • info
    .icon-f-msg-info
  • 线框
    .icon-f-wireframe
  • rivers
    .icon-f-rivers
  • fold-折叠
    .icon-f-folding
  • 最大化
    .icon-f-max
  • 箭头_arrow591
    .icon-f-move-forward
  • 路径分析
    .icon-f-analytic-router
  • 全屏
    .icon-f-dragbox-fullscreen
  • 首页
    .icon-f-home-page
  • eye
    .icon-f-view
  • 定位
    .icon-f-location-pro
  • 用户
    .icon-f-user
  • addfile
    .icon-f-add-layer
  • 暂停
    .icon-f-move-stop
  • 停止
    .icon-f-ai08
  • 后退
    .icon-f-ai18
  • 快进
    .icon-f-ai19
  • 开始
    .icon-f-ai23
  • 南京地铁
    .icon-f-changyonglogo18
  • 审核
    .icon-f-analysis-examine
  • 时间
    .icon-f-time
  • 展开
    .icon-f-bottom
  • 文章1
    .icon-f-tickets
  • 播放
    .icon-f-playTimeline
  • close
    .icon-f-cross
  • 收藏
    .icon-f-card-favourite1
  • 分析
    .icon-f-analysis-3
  • 测量距离
    .icon-f-measure-line
  • pause
    .icon-f-pause
  • 数据分析
    .icon-f-analysis-info
  • delete_2_circle_line
    .icon-f-delete-circle
  • close
    .icon-f-close
  • format_brush
    .icon-f-brush
  • 回放
    .icon-f-daofang
  • 列表
    .icon-f-list
  • 规划设计
    .icon-f-design
  • 电脑
    .icon-f-diannao
  • 编辑
    .icon-f-editor
  • 图标_块状排列
    .icon-f-multi-part
  • 数据分析
    .icon-f-data-analysis
  • compass-1
    .icon-f-compass-1
  • compass
    .icon-f-compass-2
  • 931菜单_测量
    .icon-f-measure-line-two
  • 停车场
    .icon-f-park
  • 叠加分析
    .icon-f-intersect
  • 三维分析
    .icon-f-analytic-view
  • chengyi_pc_compared
    .icon-f-compare
  • icon-location
    .icon-f-location2
  • 地图叠加分析
    .icon-f-map-intersect
  • view-module
    .icon-f-view-module
  • animation
    .icon-f-animation
  • city
    .icon-f-region
  • fold
    .icon-f-fold
  • 摄像头
    .icon-f-camera-1
  • 属性
    .icon-f-attribute
  • .icon-f-plus
  • upload
    .icon-f-upload
  • view_off
    .icon-f-viewOff
  • play
    .icon-f-play
  • 选中
    .icon-f-uncheck
  • 上箭头
    .icon-f-move-up
  • hand
    .icon-f-hand1
  • 退出全屏
    .icon-f-exit-full-screen
  • 档案
    .icon-f-record
  • 全屏
    .icon-f-full-screen
  • watch-later
    .icon-f-watch-later
  • 可视化数据ETL
    .icon-f-dataView
  • 企业图谱
    .icon-f-graph2
  • 散点图
    .icon-f-pointsMap
  • table
    .icon-f-table
  • upload-file
    .icon-f-upload-file
  • 测量
    .icon-f-measure-polygon
  • 几何
    .icon-f-geomerty
  • shp
    .icon-f-shp
  • 添加
    .icon-f-data-add
  • TXT
    .icon-f-txt-2
  • 柱状图
    .icon-f-histogram
  • 放大镜
    .icon-f-fangdajing
  • 上传
    .icon-f-analysis-upload
  • 对比
    .icon-f-analysis-bargraph
  • unfold
    .icon-f-unfold
  • 分析
    .icon-f-analysis1
  • .icon-f-tree
  • 图层
    .icon-f-tool-layout
  • 指针
    .icon-f-mouse
  • 对比
    .icon-f-data-compare
  • 线损分析
    .icon-f-resource
  • 搜索分类
    .icon-f-smart-search
  • 设置
    .icon-f-option
  • 旗子
    .icon-f-location3
  • 标记
    .icon-f-tool-mark
  • 暂停
    .icon-f-pauseTimeline
  • menu fold
    .icon-f-menufold
  • menu unfold
    .icon-f-menuunfold
  • 医疗卫生
    .icon-f-medical
  • 专题
    .icon-f-project
  • 符号-绘制
    .icon-f-analyic-draw
  • 文档
    .icon-f-file
  • 收缩
    .icon-f-shrink
  • 导出 (7)
    .icon-f-export-right
  • addfile
    .icon-f-add-file
  • 图层
    .icon-f-lyrs
  • 分析
    .icon-f-analysis-2
  • 三维地图API
    .icon-f-3dmap_ico_docu
  • 差异性分析
    .icon-f-difference-symbol
  • 行政区划管理
    .icon-f-adminis
  • 下一页
    .icon-f-next
  • 机构
    .icon-f-organization
  • 下载
    .icon-f-download
  • 下箭头
    .icon-f-move-down
  • 删 除
    .icon-f-analysis-delete
  • 热力图列表
    .icon-f-legend
  • 折线图
    .icon-f-linesMap
  • 定位
    .icon-f-datalistsearch
  • 奖章
    .icon-f-medal
  • 测量
    .icon-f-measure
  • 14-饼状图
    .icon-f-gloabx-service
  • xls
    .icon-f-xls
  • 标记
    .icon-f-collect
  • excel
    .icon-f-excel
  • 删除
    .icon-f-delete
  • location
    .icon-f-iclocationonpx
  • earth
    .icon-f-earth
  • 目录
    .icon-f-contents
  • 分析
    .icon-f-analysis-1
  • 大规模计算与分析
    .icon-f-analysis
  • .icon-f-hand2
  • analysis
    .icon-f-global-analysis
  • menuunfold
    .icon-f-menu-unfold
  • meunfold
    .icon-f-meun-fold
  • zip
    .icon-f-zip
  • 定位
    .icon-f-view-location
  • 箭头
    .icon-f-roam-bottom
  • 地块
    .icon-f-landscape
  • 统计 总数
    .icon-f-count
  • 高程
    .icon-f-height
  • 电脑
    .icon-f-platform
  • 对号_1
    .icon-f-tick
  • 暂停-停止3
    .icon-f-roam-stop
  • 暂停-停止32
    .icon-f-roam-start
  • 文化教育
    .icon-f-education
  • 石化
    .icon-f-stone
  • 更多
    .icon-f-more
  • 展开
    .icon-f-expand
  • 下载
    .icon-f-download-line
  • 12-小黑点
    .icon-f-point
  • 分析
    .icon-f-widget-analysis
  • tools
    .icon-f-tools
  • 图层-选中
    .icon-f-layer-data-list
  • 对比
    .icon-f-analysis-twoway
  • 统计
    .icon-f-statistics
  • 打印机
    .icon-f-print
  • 电脑
    .icon-f-computer
  • 曲线
    .icon-f-curve
  • hand
    .icon-f-hand
  • 监控控制管理监管
    .icon-f-monitor
  • 人口
    .icon-f-people
  • 地球
    .icon-f-dataviews
  • hand-tap-2
    .icon-f-hand-point
  • xml
    .icon-f-xml
  • .icon-f-point1
  • 数据
    .icon-f-shuju
  • 美食
    .icon-f-food
  • 播放
    .icon-f-start-fly
  • 停止
    .icon-f-stop-fly
  • 暂停
    .icon-f-pause-fly
  • 上传
    .icon-f-file-upload
  • icon_录像回放
    .icon-f-icon_luxianghuifang
  • 定位
    .icon-f-location
  • zoom out
    .icon-f-zoomout
  • icon_full screen
    .icon-f-map-full
  • 编辑
    .icon-f-analysis-edit
  • 预览
    .icon-f-yulan
  • 文件夹
    .icon-f-unfolder
  • 文本
    .icon-f-txt-1
  • 地形
    .icon-f-terrain_ico_docu
  • icon-rgb_配置智能分析-34
    .icon-f-analystic
  • 导出 (7)
    .icon-f-export-left
  • 城市
    .icon-f-city
  • 展开
    .icon-f-right
  • 交通出行
    .icon-f-transport
  • 收起
    .icon-f-left
  • 查询记录
    .icon-f-query
  • 漫游路径
    .icon-f-fly_ico_docu
  • 最小化
    .icon-f-min
  • 箭头
    .icon-f-open-overview
  • 行政区划
    .icon-f-tool-region
  • 分屏显示
    .icon-f-multiViewport
  • 日志检索
    .icon-f-datalist-search
  • 箭头
    .icon-f-close-overview-copy
  • 分组
    .icon-f-fenzu
  • 网络
    .icon-f-wangluo
  • 置换
    .icon-f-zhihuan
  • AI智能
    .icon-f-AIzhineng
  • 知识
    .icon-f-zhishi
  • 自动
    .icon-f-zidong
  • 定位
    .icon-f-location1
  • 旋转
    .icon-f-xuanzhuan
  • 下一页
    .icon-f-prev
  • CAD系统
    .icon-f-cad
  • 左箭头
    .icon-f-move-left
  • 右箭头
    .icon-f-move-right
  • 兴趣点查询
    .icon-f-poi_ico_docu
  • 淹没
    .icon-f-flood
  • 景点
    .icon-f-attractions
  • view-stream
    .icon-f-view-stream
  • 摄像头
    .icon-f-camera-2
  • GIS
    .icon-f-GIS
  • OA标记
    .icon-f-mark-slim
  • 缩小
    .icon-f-suoxiao
  • 放大
    .icon-f-fangda
  • 重置
    .icon-f-reset
  • 热力图
    .icon-f-gl-heatMap
  • 多时相对比
    .icon-f-multidate
  • 梯形
    .icon-f-trapezoidal
  • 瓦片数据
    .icon-f-tilemap_ico_docu
  • 收藏夹
    .icon-f-favourite
  • 智能搜索
    .icon-f-zhinengsousuo
  • 云虚拟主机
    .icon-f-yunxunizhuji
  • 开发
    .icon-f-kaifa
  • 一体化-门户-(新)-03
    .icon-f-yitihua-menhu-xin-1
  • 一体化-门户-(新)-04
    .icon-f-yitihua-menhu-xin-
  • 时空分析
    .icon-f-shikongfenxi
  • 信号
    .icon-f-surround
  • 卷帘-1
    .icon-f-juanlian-
  • icon_遥感影像
    .icon-f-previewimage
  • dwg
    .icon-f-dwg
  • 动态地图
    .icon-f-restmap_ico_docu
  • 地球
    .icon-f-diqiu
  • graph
    .icon-f-graph
  • fly
    .icon-f-fly
  • 箭头
    .icon-f-roam-right
  • 箭头
    .icon-f-roam-left
  • 箭头
    .icon-f-roam-top
  • 向左
    .icon-f-xiangyou-copy

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 上传
    #icon-f-upload2
  • 左上
    #icon-f-zuoshang
  • 向上
    #icon-f-xiangshang
  • 右上
    #icon-f-youshang
  • 向下
    #icon-f-xiangxia
  • 右下
    #icon-f-youxia
  • 向左
    #icon-f-xiangzuo
  • 视频
    #icon-f-video
  • 面积
    #icon-f-profile
  • info
    #icon-f-info
  • right
    #icon-f-go-right
  • 返回
    #icon-f-back1
  • 分析
    #icon-f-analysis-5
  • layers
    #icon-f-layers
  • 轨迹回放
    #icon-f-guijihuifang
  • 热力图
    #icon-f-heatmap
  • 文件夹 闭合icon
    #icon-f-folder
  • 统计
    #icon-f-ststistics
  • zoom-in
    #icon-f-zoomin
  • 导航-购物车
    #icon-f-shop
  • layers
    #icon-f-layer-list
  • road
    #icon-f-custom
  • checkbox
    #icon-f-unchecked
  • dot-circle
    #icon-f-dotcircle
  • 瞄准
    #icon-f-aim
  • sey-earth-a
    #icon-f-full-map
  • move-horizontal
    #icon-f-movehorizontal
  • 书签管理
    #icon-f-bookmark
  • checkbox-checked
    #icon-f-checked
  • 箭头
    #icon-f-mouse-empty
  • 对比分析
    #icon-f-analysis-compare
  • 返回
    #icon-f-back
  • earth
    #icon-f-global
  • 箭头_arrow591
    #icon-f-move-backward
  • 电话
    #icon-f-tel
  • 数据
    #icon-f-data-service
  • 分析
    #icon-f-analysis-4
  • search
    #icon-f-search
  • 项目
    #icon-f-project1
  • 生活服务
    #icon-f-service
  • 图层
    #icon-f-layer1
  • Windows
    #icon-f-windows
  • 箭头
    #icon-f-overview-close
  • 箭头
    #icon-f-overview-open
  • 文件夹
    #icon-f-scroll-analyze
  • #icon-f-circle-empty
  • 标记
    #icon-f-mark
  • 测量
    #icon-f-measure1
  • 关闭
    #icon-f-close1
  • 查找 表单 列表
    #icon-f-select-list
  • 警示 感叹号 !2
    #icon-f-excalmation-mark
  • 立方体 立体 多面体 方块2
    #icon-f-threeD
  • 直方框
    #icon-f-max-screen
  • 折线图
    #icon-f-line-graph
  • map
    #icon-f-map
  • info
    #icon-f-msg-info
  • 线框
    #icon-f-wireframe
  • rivers
    #icon-f-rivers
  • fold-折叠
    #icon-f-folding
  • 最大化
    #icon-f-max
  • 箭头_arrow591
    #icon-f-move-forward
  • 路径分析
    #icon-f-analytic-router
  • 全屏
    #icon-f-dragbox-fullscreen
  • 首页
    #icon-f-home-page
  • eye
    #icon-f-view
  • 定位
    #icon-f-location-pro
  • 用户
    #icon-f-user
  • addfile
    #icon-f-add-layer
  • 暂停
    #icon-f-move-stop
  • 停止
    #icon-f-ai08
  • 后退
    #icon-f-ai18
  • 快进
    #icon-f-ai19
  • 开始
    #icon-f-ai23
  • 南京地铁
    #icon-f-changyonglogo18
  • 审核
    #icon-f-analysis-examine
  • 时间
    #icon-f-time
  • 展开
    #icon-f-bottom
  • 文章1
    #icon-f-tickets
  • 播放
    #icon-f-playTimeline
  • close
    #icon-f-cross
  • 收藏
    #icon-f-card-favourite1
  • 分析
    #icon-f-analysis-3
  • 测量距离
    #icon-f-measure-line
  • pause
    #icon-f-pause
  • 数据分析
    #icon-f-analysis-info
  • delete_2_circle_line
    #icon-f-delete-circle
  • close
    #icon-f-close
  • format_brush
    #icon-f-brush
  • 回放
    #icon-f-daofang
  • 列表
    #icon-f-list
  • 规划设计
    #icon-f-design
  • 电脑
    #icon-f-diannao
  • 编辑
    #icon-f-editor
  • 图标_块状排列
    #icon-f-multi-part
  • 数据分析
    #icon-f-data-analysis
  • compass-1
    #icon-f-compass-1
  • compass
    #icon-f-compass-2
  • 931菜单_测量
    #icon-f-measure-line-two
  • 停车场
    #icon-f-park
  • 叠加分析
    #icon-f-intersect
  • 三维分析
    #icon-f-analytic-view
  • chengyi_pc_compared
    #icon-f-compare
  • icon-location
    #icon-f-location2
  • 地图叠加分析
    #icon-f-map-intersect
  • view-module
    #icon-f-view-module
  • animation
    #icon-f-animation
  • city
    #icon-f-region
  • fold
    #icon-f-fold
  • 摄像头
    #icon-f-camera-1
  • 属性
    #icon-f-attribute
  • #icon-f-plus
  • upload
    #icon-f-upload
  • view_off
    #icon-f-viewOff
  • play
    #icon-f-play
  • 选中
    #icon-f-uncheck
  • 上箭头
    #icon-f-move-up
  • hand
    #icon-f-hand1
  • 退出全屏
    #icon-f-exit-full-screen
  • 档案
    #icon-f-record
  • 全屏
    #icon-f-full-screen
  • watch-later
    #icon-f-watch-later
  • 可视化数据ETL
    #icon-f-dataView
  • 企业图谱
    #icon-f-graph2
  • 散点图
    #icon-f-pointsMap
  • table
    #icon-f-table
  • upload-file
    #icon-f-upload-file
  • 测量
    #icon-f-measure-polygon
  • 几何
    #icon-f-geomerty
  • shp
    #icon-f-shp
  • 添加
    #icon-f-data-add
  • TXT
    #icon-f-txt-2
  • 柱状图
    #icon-f-histogram
  • 放大镜
    #icon-f-fangdajing
  • 上传
    #icon-f-analysis-upload
  • 对比
    #icon-f-analysis-bargraph
  • unfold
    #icon-f-unfold
  • 分析
    #icon-f-analysis1
  • #icon-f-tree
  • 图层
    #icon-f-tool-layout
  • 指针
    #icon-f-mouse
  • 对比
    #icon-f-data-compare
  • 线损分析
    #icon-f-resource
  • 搜索分类
    #icon-f-smart-search
  • 设置
    #icon-f-option
  • 旗子
    #icon-f-location3
  • 标记
    #icon-f-tool-mark
  • 暂停
    #icon-f-pauseTimeline
  • menu fold
    #icon-f-menufold
  • menu unfold
    #icon-f-menuunfold
  • 医疗卫生
    #icon-f-medical
  • 专题
    #icon-f-project
  • 符号-绘制
    #icon-f-analyic-draw
  • 文档
    #icon-f-file
  • 收缩
    #icon-f-shrink
  • 导出 (7)
    #icon-f-export-right
  • addfile
    #icon-f-add-file
  • 图层
    #icon-f-lyrs
  • 分析
    #icon-f-analysis-2
  • 三维地图API
    #icon-f-3dmap_ico_docu
  • 差异性分析
    #icon-f-difference-symbol
  • 行政区划管理
    #icon-f-adminis
  • 下一页
    #icon-f-next
  • 机构
    #icon-f-organization
  • 下载
    #icon-f-download
  • 下箭头
    #icon-f-move-down
  • 删 除
    #icon-f-analysis-delete
  • 热力图列表
    #icon-f-legend
  • 折线图
    #icon-f-linesMap
  • 定位
    #icon-f-datalistsearch
  • 奖章
    #icon-f-medal
  • 测量
    #icon-f-measure
  • 14-饼状图
    #icon-f-gloabx-service
  • xls
    #icon-f-xls
  • 标记
    #icon-f-collect
  • excel
    #icon-f-excel
  • 删除
    #icon-f-delete
  • location
    #icon-f-iclocationonpx
  • earth
    #icon-f-earth
  • 目录
    #icon-f-contents
  • 分析
    #icon-f-analysis-1
  • 大规模计算与分析
    #icon-f-analysis
  • #icon-f-hand2
  • analysis
    #icon-f-global-analysis
  • menuunfold
    #icon-f-menu-unfold
  • meunfold
    #icon-f-meun-fold
  • zip
    #icon-f-zip
  • 定位
    #icon-f-view-location
  • 箭头
    #icon-f-roam-bottom
  • 地块
    #icon-f-landscape
  • 统计 总数
    #icon-f-count
  • 高程
    #icon-f-height
  • 电脑
    #icon-f-platform
  • 对号_1
    #icon-f-tick
  • 暂停-停止3
    #icon-f-roam-stop
  • 暂停-停止32
    #icon-f-roam-start
  • 文化教育
    #icon-f-education
  • 石化
    #icon-f-stone
  • 更多
    #icon-f-more
  • 展开
    #icon-f-expand
  • 下载
    #icon-f-download-line
  • 12-小黑点
    #icon-f-point
  • 分析
    #icon-f-widget-analysis
  • tools
    #icon-f-tools
  • 图层-选中
    #icon-f-layer-data-list
  • 对比
    #icon-f-analysis-twoway
  • 统计
    #icon-f-statistics
  • 打印机
    #icon-f-print
  • 电脑
    #icon-f-computer
  • 曲线
    #icon-f-curve
  • hand
    #icon-f-hand
  • 监控控制管理监管
    #icon-f-monitor
  • 人口
    #icon-f-people
  • 地球
    #icon-f-dataviews
  • hand-tap-2
    #icon-f-hand-point
  • xml
    #icon-f-xml
  • #icon-f-point1
  • 数据
    #icon-f-shuju
  • 美食
    #icon-f-food
  • 播放
    #icon-f-start-fly
  • 停止
    #icon-f-stop-fly
  • 暂停
    #icon-f-pause-fly
  • 上传
    #icon-f-file-upload
  • icon_录像回放
    #icon-f-icon_luxianghuifang
  • 定位
    #icon-f-location
  • zoom out
    #icon-f-zoomout
  • icon_full screen
    #icon-f-map-full
  • 编辑
    #icon-f-analysis-edit
  • 预览
    #icon-f-yulan
  • 文件夹
    #icon-f-unfolder
  • 文本
    #icon-f-txt-1
  • 地形
    #icon-f-terrain_ico_docu
  • icon-rgb_配置智能分析-34
    #icon-f-analystic
  • 导出 (7)
    #icon-f-export-left
  • 城市
    #icon-f-city
  • 展开
    #icon-f-right
  • 交通出行
    #icon-f-transport
  • 收起
    #icon-f-left
  • 查询记录
    #icon-f-query
  • 漫游路径
    #icon-f-fly_ico_docu
  • 最小化
    #icon-f-min
  • 箭头
    #icon-f-open-overview
  • 行政区划
    #icon-f-tool-region
  • 分屏显示
    #icon-f-multiViewport
  • 日志检索
    #icon-f-datalist-search
  • 箭头
    #icon-f-close-overview-copy
  • 分组
    #icon-f-fenzu
  • 网络
    #icon-f-wangluo
  • 置换
    #icon-f-zhihuan
  • AI智能
    #icon-f-AIzhineng
  • 知识
    #icon-f-zhishi
  • 自动
    #icon-f-zidong
  • 定位
    #icon-f-location1
  • 旋转
    #icon-f-xuanzhuan
  • 下一页
    #icon-f-prev
  • CAD系统
    #icon-f-cad
  • 左箭头
    #icon-f-move-left
  • 右箭头
    #icon-f-move-right
  • 兴趣点查询
    #icon-f-poi_ico_docu
  • 淹没
    #icon-f-flood
  • 景点
    #icon-f-attractions
  • view-stream
    #icon-f-view-stream
  • 摄像头
    #icon-f-camera-2
  • GIS
    #icon-f-GIS
  • OA标记
    #icon-f-mark-slim
  • 缩小
    #icon-f-suoxiao
  • 放大
    #icon-f-fangda
  • 重置
    #icon-f-reset
  • 热力图
    #icon-f-gl-heatMap
  • 多时相对比
    #icon-f-multidate
  • 梯形
    #icon-f-trapezoidal
  • 瓦片数据
    #icon-f-tilemap_ico_docu
  • 收藏夹
    #icon-f-favourite
  • 智能搜索
    #icon-f-zhinengsousuo
  • 云虚拟主机
    #icon-f-yunxunizhuji
  • 开发
    #icon-f-kaifa
  • 一体化-门户-(新)-03
    #icon-f-yitihua-menhu-xin-1
  • 一体化-门户-(新)-04
    #icon-f-yitihua-menhu-xin-
  • 时空分析
    #icon-f-shikongfenxi
  • 信号
    #icon-f-surround
  • 卷帘-1
    #icon-f-juanlian-
  • icon_遥感影像
    #icon-f-previewimage
  • dwg
    #icon-f-dwg
  • 动态地图
    #icon-f-restmap_ico_docu
  • 地球
    #icon-f-diqiu
  • graph
    #icon-f-graph
  • fly
    #icon-f-fly
  • 箭头
    #icon-f-roam-right
  • 箭头
    #icon-f-roam-left
  • 箭头
    #icon-f-roam-top
  • 向左
    #icon-f-xiangyou-copy

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>