• 剪刀
    
  • 信息
    
  • 红旗
    
  • 圆形
    
  • circle-hollow
    
  • 右箭头
    
  • 左箭头
    
  • sync-green
    
  • plus
    
  • paint-brush
    
  • minus
    
  • 运动
    
  • 层_line
    
  • 设置
    
  • 面型图标1_涂鸦
    
  • 编辑
    
  • 叠加分析
    
  • 复制
    
  • 长度测量
    
  • 多边形
    
  • 应急标绘
    
  • 影响对比
    
  • 全图
    
  • 节点-子流程
    
  • 商务 购买 钱 羊
    
  • E
    
  • S
    
  • T
    
  • clear
    
  • draw_click
    
  • line
    
  • 取消顶置
    
  • self-analysis
    
  • export-excel
    
  • setting
    
  • iconfont-export
    
  • 医院
    
  • 垃圾桶_块
    
  • compare
    
  • sync-disabled
    
  • 灯光指示
    
  • 框选
    
  • 定位
    
  • iconfont-export
    
  • 路径分析
    
  • rectangle
    
  • 放大
    
  • 垃圾桶
    
  • 高级查询
    
  • 面积测量
    
  • 宅基地
    
  • 方形
    
  • 住宿
    
  • 标记
    
  • 剪刀
    
  • edit-brush
    
  • 缩放,看,探索,查看,搜索,放大镜,优化,线性,扁平,填充,单色,简约,圆润
    
  • 线标绘
    
  • hand
    
  • 缩小
    
  • 地球
    
  • 图例
    
  • g
    
  • 粘贴
    
  • 箭头
    
  • full screen
    
  • 线框
    
  • 电影院
    
  • layers
    
  • 分时对比-icon
    
  • marker
    
  • 置顶
    
  • hand
    
  • 搜索
    
  • 交集
    
  • database
    
  • 饼图
    
  • 显示
    
  • 皮肤
    
  • picture
    
  • 停车场
    
  • 打印
    
  • 关联
    
  • edit
    
  • 河流面
    
  • 箭头
    
  • 用户
    
  • 灯标
    
  • 面标绘
    
  • 长度
    
  • D
    
  • 菱形
    
  • 宗教
    
  • zoomin
    
  • 宽度扩展图
    
  • 林地
    
  • 不显示
    
  • icon_宽度
    
  • 涂鸦
    
  • shexiangtou
    
  • compare
    
  • 面积
    
  • 商场
    
  • 公共汽车站场
    
  • 三角形
    
  • Buffer analysis
    
  • 应用分析
    
  • map_polygon
    
  • 大学
    
  • 我的果园
    
  • cloud-down-f
    
  • 流程单-秧田
    
  • 机关行政
    
  • 差集
    
  • 村庄
    
  • union
    
  • 田间管理
    
  • 加油站
    
  • bookmark
    
  • 火车
    
  • 转发-面
    
  • user2
    
  • 军事
    
  • 飞机
    
  • ManagePaths
    
  • 五角星
    
  • 圆形
    
  • 动物园3
    
  • 银行
    
  • 公园
    
  • 监狱
    
  • 地理信息
    
  • 厕所
    
  • polygon
    
  • 指南针
    
  • menu-unfold
    
  • menu-fold
    
  • 出租车
    
  • 码头
    
  • 乡镇
    
  • trajectory path
    
  • 散点
    
  • 沼泽地
    
  • 沟渠-01
    
  • 草地
    
  • ts-图标_APPCluster
    
  • polygon
    
  • 风景
    
  • 死亡殡葬
    
  • 电话咨询 话务综合管理#bl
    
  • 使馆
    
  • 工业
    
  • 开采矿产
    
  • 水库
    
  • save-2-line
    
  • 港口
    
  • 湖泊
    
  • 
  • 餐饮 (1)
    
  • 消防
    
  • 警局
    
  • 出版年
    
  • 滩涂
    
  • M_Edit_MergeDifference
    
  • 数据汇总
    
  • 散点图
    
  • 大厦
    
  • 要素-公路隧道
    
  • 投影
    
  • circle
    
  • casino
    
  • courthouse
    
  • electronics-store
    
  • boat-tour
    
  • female
    
  • bicycle-store
    
  • car-repair
    
  • convenience-store
    
  • braille
    
  • campground
    
  • doctor
    
  • dentist
    
  • canoe
    
  • florist
    
  • car-dealer
    
  • fish-cleaning
    
  • bowling-alley
    
  • climbing
    
  • general-contractor
    
  • compass
    
  • gym
    
  • funeral-home
    
  • grocery-or-supermarket
    
  • cross-country-skiing
    
  • hardware-store
    
  • car-wash
    
  • food
    
  • hair-care
    
  • department-store
    
  • diving
    
  • ice-skating
    
  • car-rental
    
  • hospital
    
  • health
    
  • church
    
  • laundry
    
  • hang-gliding
    
  • liquor-store
    
  • postal-code
    
  • fishing-pier
    
  • fullscreen
    
  • school
    
  • city-hall
    
  • expand
    
  • male
    
  • electrician
    
  • ice-fishing
    
  • low-vision-access
    
  • sledding
    
  • hindu-temple
    
  • insurance-agency
    
  • jet-skiing
    
  • inline-skating
    
  • marina
    
  • closed-captioning
    
  • square
    
  • fire-station
    
  • movie-rental
    
  • crosshairs
    
  • mosque
    
  • local-government
    
  • pet-store
    
  • moving-company
    
  • embassy
    
  • night-club
    
  • kayaking
    
  • locksmith
    
  • movie-theater
    
  • real-estate-agency
    
  • point-of-interest
    
  • natural-feature
    
  • library
    
  • subway-station
    
  • jewelry-store
    
  • roofing-contractor
    
  • post-office
    
  • finance
    
  • museum
    
  • route-pin
    
  • synagogue
    
  • place-of-worship
    
  • political
    
  • furniture-store
    
  • sheild
    
  • search
    
  • lodging
    
  • location-arrow
    
  • route
    
  • unisex
    
  • physiotherapist
    
  • snowmobile
    
  • volume-control-telephone
    
  • post-box
    
  • wheelchair
    
  • toilet
    
  • accounting
    
  • ski-jumping
    
  • sailing
    
  • stadium
    
  • chairlift
    
  • surfing
    
  • gas-station
    
  • airport
    
  • scuba-diving
    
  • restaurant
    
  • snowboarding
    
  • open-captioning
    
  • skateboarding
    
  • archery
    
  • spa
    
  • square-rounded
    
  • swimming
    
  • zoom-out-alt
    
  • parking
    
  • pharmacy
    
  • playground
    
  • clothing-store
    
  • abseiling
    
  • plumber
    
  • taxi-stand
    
  • travel-agency
    
  • wind-surfing
    
  • veterinary-care
    
  • police
    
  • zoom-in-alt
    
  • postal-code-prefix
    
  • painter
    
  • waterskiing
    
  • amusement-park
    
  • zoom-out
    
  • rv-park
    
  • snow-shoeing
    
  • sign-language
    
  • tennis
    
  • skiing
    
  • lawyer
    
  • square-pin
    
  • atm
    
  • store
    
  • transit-station
    
  • snow
    
  • map-pin
    
  • university
    
  • storage
    
  • train-station
    
  • aquarium
    
  • park
    
  • zoo
    
  • assistive-listening-system
    
  • rafting
    
  • whale-watching
    
  • shopping-mall
    
  • zoom-in
    
  • art-gallery
    
  • 首页
    
  • 分类
    
  • 会员
    
  • 客服
    
  • 地图
    

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-screen-shot
  • 信息
    .icon-info-query
  • 红旗
    .icon-builder-hongqi
  • 圆形
    .icon-draw-circle
  • circle-hollow
    .icon-draw-circlemarker
  • 右箭头
    .icon-arrow-right
  • 左箭头
    .icon-arrow-left
  • sync-green
    .icon-sync
  • plus
    .icon-plus
  • paint-brush
    .icon-draw-old2
  • minus
    .icon-minus
  • 运动
    .icon-builder-yundong
  • 层_line
    .icon-layers-line
  • 设置
    .icon-settingbar
  • 面型图标1_涂鸦
    .icon-freedraw-0
  • 编辑
    .icon-draw-edit
  • 叠加分析
    .icon-overlay_analysis
  • 复制
    .icon-copy
  • 长度测量
    .icon-measure-length_bak
  • 多边形
    .icon-draw-polygon
  • 应急标绘
    .icon-plot
  • 影响对比
    .icon-layer-compare-old
  • 全图
    .icon-full-map
  • 节点-子流程
    .icon-shape-line
  • 商务 购买 钱 羊
    .icon-builder-shangwu
  • E
    .icon-e
  • S
    .icon-s
  • T
    .icon-t
  • clear
    .icon-clear
  • draw_click
    .icon-draw-old
  • line
    .icon-draw-polyline
  • 取消顶置
    .icon-clear-gotop
  • self-analysis
    .icon-overlay_analysis_4
  • export-excel
    .icon-excel
  • setting
    .icon-setting
  • iconfont-export
    .icon-import
  • 医院
    .icon-builder-yiyuan
  • 垃圾桶_块
    .icon-draw-remove
  • compare
    .icon-side-by-side
  • sync-disabled
    .icon-sync-disabled
  • 灯光指示
    .icon-search-lightxxx
  • 框选
    .icon-region
  • 定位
    .icon-set-location
  • iconfont-export
    .icon-export
  • 路径分析
    .icon-my-path
  • rectangle
    .icon-draw-rectangle
  • 放大
    .icon-zoom-in
  • 垃圾桶
    .icon-clearall
  • 高级查询
    .icon-advanced_search
  • 面积测量
    .icon-measure-area_bak
  • 宅基地
    .icon-builder-zhaijidi
  • 方形
    .icon-fangxing
  • 住宿
    .icon-builder-zhusu
  • 标记
    .icon-draw-marker
  • 剪刀
    .icon-screen-shot-old
  • edit-brush
    .icon-draw
  • 缩放,看,探索,查看,搜索,放大镜,优化,线性,扁平,填充,单色,简约,圆润
    .icon-filter
  • 线标绘
    .icon-plot-line
  • hand
    .icon-hand-old
  • 缩小
    .icon-zoom-out
  • 地球
    .icon-globe
  • 图例
    .icon-legend
  • g
    .icon-g
  • 粘贴
    .icon-paste
  • 箭头
    .icon-plot-arrow-up
  • full screen
    .icon-fullscreen
  • 线框
    .icon-shape-polygon
  • 电影院
    .icon-builder-dianyingyuan
  • layers
    .icon-layers
  • 分时对比-icon
    .icon-layer-compare
  • marker
    .icon-marker
  • 置顶
    .icon-gotop
  • hand
    .icon-hand
  • 搜索
    .icon-search
  • 交集
    .icon-analysis-overlay
  • database
    .icon-database
  • 饼图
    .icon-pie
  • 显示
    .icon-show
  • 皮肤
    .icon-change-skin
  • picture
    .icon-main-map
  • 停车场
    .icon-builder-tingchechang
  • 打印
    .icon-print
  • 关联
    .icon-analysis-autocorrelation
  • edit
    .icon-edit
  • 河流面
    .icon-builder-heliu
  • 箭头
    .icon-plot-arrow-down
  • 用户
    .icon-user0
  • 灯标
    .icon-search-light
  • 面标绘
    .icon-plot-fill
  • 长度
    .icon-measure-length
  • D
    .icon-d
  • 菱形
    .icon-builder-lingxing
  • 宗教
    .icon-builder-zongjiao
  • zoomin
    .icon-zoomToLayer-copy
  • 宽度扩展图
    .icon-search-light-length
  • 林地
    .icon-builder-lindi
  • 不显示
    .icon-not-show
  • icon_宽度
    .icon-search-light-lengthxx
  • 涂鸦
    .icon-freedraw-1
  • shexiangtou
    .icon-camera
  • compare
    .icon-side-by-side-vertical
  • 面积
    .icon-measure-area
  • 商场
    .icon-builder-shangchang
  • 公共汽车站场
    .icon-builder-gonggongqichezhan
  • 三角形
    .icon-builder-sanjiaoxing
  • Buffer analysis
    .icon-analysis-buffer
  • 应用分析
    .icon-map-builder-analysis
  • map_polygon
    .icon-analysis-area
  • 大学
    .icon-builder-daxue
  • 我的果园
    .icon-builder-guoyuan
  • cloud-down-f
    .icon-clouddown
  • 流程单-秧田
    .icon-builder-shuitian
  • 机关行政
    .icon-builder-xingzhengjiguan
  • 差集
    .icon-analysis-difference
  • 村庄
    .icon-builder-cunzhuang
  • union
    .icon-analysis-union
  • 田间管理
    .icon-builder-chayuan
  • 加油站
    .icon-builder-jiayouzhan
  • bookmark
    .icon-bookmark
  • 火车
    .icon-builder-huochezhan
  • 转发-面
    .icon-transmit
  • user2
    .icon-user
  • 军事
    .icon-builder-junshijidi
  • 飞机
    .icon-builder-feijichang
  • ManagePaths
    .icon-manage-path
  • 五角星
    .icon-builder-wujiaoxing
  • 圆形
    .icon-builder-yuanxing
  • 动物园3
    .icon-builder-dongwuyuan
  • 银行
    .icon-builder-yinhang
  • 公园
    .icon-builder-gongyuan
  • 监狱
    .icon-builder-jianyu
  • 地理信息
    .icon-analysis-projectsystem
  • 厕所
    .icon-builder-cesuo
  • polygon
    .icon-analysis-geometry-attribute
  • 指南针
    .icon-builder-zhinanzhen
  • menu-unfold
    .icon-menu-unfold
  • menu-fold
    .icon-menu-fold
  • 出租车
    .icon-builder-chuzuche
  • 码头
    .icon-builder-matou
  • 乡镇
    .icon-builder-xiangzhen
  • trajectory path
    .icon-compute-path
  • 散点
    .icon-shape-point-old
  • 沼泽地
    .icon-zhaozedi
  • 沟渠-01
    .icon-builder-gouqu
  • 草地
    .icon-builder-caodi
  • ts-图标_APPCluster
    .icon-analysis-clustering
  • polygon
    .icon-analysis-geometrycheck
  • 风景
    .icon-builder-fengjing
  • 死亡殡葬
    .icon-builder-binzang
  • 电话咨询 话务综合管理#bl
    .icon-builder-dianhua
  • 使馆
    .icon-builder-shengzhengfu
  • 工业
    .icon-builder-gongye
  • 开采矿产
    .icon-builder-caikuang
  • 水库
    .icon-builder-shuiku
  • save-2-line
    .icon-save
  • 港口
    .icon-builder-gangkou
  • 湖泊
    .icon-builder-hupo
  • .icon-builder-biaoji
  • 餐饮 (1)
    .icon-builder-canyin
  • 消防
    .icon-builder-xiaofang
  • 警局
    .icon-builder-jingju
  • 出版年
    .icon-builder-chubanshe
  • 滩涂
    .icon-builder-tantu
  • M_Edit_MergeDifference
    .icon-analysis-symdifference
  • 数据汇总
    .icon-analysis-sumstatistics
  • 散点图
    .icon-shape-point
  • 大厦
    .icon-builder-dasha
  • 要素-公路隧道
    .icon-builder-suidao
  • 投影
    .icon-analysis-project
  • circle
    .icon-circle
  • casino
    .icon-casino
  • courthouse
    .icon-courthouse
  • electronics-store
    .icon-electronics-store
  • boat-tour
    .icon-boat-tour
  • female
    .icon-female
  • bicycle-store
    .icon-bicycle-store
  • car-repair
    .icon-car-repair
  • convenience-store
    .icon-convenience-store
  • braille
    .icon-braille
  • campground
    .icon-campground
  • doctor
    .icon-doctor
  • dentist
    .icon-dentist
  • canoe
    .icon-canoe
  • florist
    .icon-florist
  • car-dealer
    .icon-car-dealer
  • fish-cleaning
    .icon-fish-cleaning
  • bowling-alley
    .icon-bowling-alley
  • climbing
    .icon-climbing
  • general-contractor
    .icon-general-contractor
  • compass
    .icon-compass
  • gym
    .icon-gym
  • funeral-home
    .icon-funeral-home
  • grocery-or-supermarket
    .icon-grocery-or-supermarket
  • cross-country-skiing
    .icon-cross-country-skiing
  • hardware-store
    .icon-hardware-store
  • car-wash
    .icon-car-wash
  • food
    .icon-food
  • hair-care
    .icon-hair-care
  • department-store
    .icon-department-store
  • diving
    .icon-diving
  • ice-skating
    .icon-ice-skating
  • car-rental
    .icon-car-rental
  • hospital
    .icon-hospital
  • health
    .icon-health
  • church
    .icon-church
  • laundry
    .icon-laundry
  • hang-gliding
    .icon-hang-gliding
  • liquor-store
    .icon-liquor-store
  • postal-code
    .icon-postal-code
  • fishing-pier
    .icon-fishing-pier
  • fullscreen
    .icon-fullscreen1
  • school
    .icon-school
  • city-hall
    .icon-city-hall
  • expand
    .icon-expand
  • male
    .icon-male
  • electrician
    .icon-electrician
  • ice-fishing
    .icon-ice-fishing
  • low-vision-access
    .icon-low-vision-access
  • sledding
    .icon-sledding
  • hindu-temple
    .icon-hindu-temple
  • insurance-agency
    .icon-insurance-agency
  • jet-skiing
    .icon-jet-skiing
  • inline-skating
    .icon-inline-skating
  • marina
    .icon-marina
  • closed-captioning
    .icon-closed-captioning
  • square
    .icon-square
  • fire-station
    .icon-fire-station
  • movie-rental
    .icon-movie-rental
  • crosshairs
    .icon-crosshairs
  • mosque
    .icon-mosque
  • local-government
    .icon-local-government
  • pet-store
    .icon-pet-store
  • moving-company
    .icon-moving-company
  • embassy
    .icon-embassy
  • night-club
    .icon-night-club
  • kayaking
    .icon-kayaking
  • locksmith
    .icon-locksmith
  • movie-theater
    .icon-movie-theater
  • real-estate-agency
    .icon-real-estate-agency
  • point-of-interest
    .icon-point-of-interest
  • natural-feature
    .icon-natural-feature
  • library
    .icon-library
  • subway-station
    .icon-subway-station
  • jewelry-store
    .icon-jewelry-store
  • roofing-contractor
    .icon-roofing-contractor
  • post-office
    .icon-post-office
  • finance
    .icon-finance
  • museum
    .icon-museum
  • route-pin
    .icon-route-pin
  • synagogue
    .icon-synagogue
  • place-of-worship
    .icon-place-of-worship
  • political
    .icon-political
  • furniture-store
    .icon-furniture-store
  • sheild
    .icon-sheild
  • search
    .icon-search1
  • lodging
    .icon-lodging
  • location-arrow
    .icon-location-arrow
  • route
    .icon-route
  • unisex
    .icon-unisex
  • physiotherapist
    .icon-physiotherapist
  • snowmobile
    .icon-snowmobile
  • volume-control-telephone
    .icon-volume-control-telephone
  • post-box
    .icon-post-box
  • wheelchair
    .icon-wheelchair
  • toilet
    .icon-toilet
  • accounting
    .icon-accounting
  • ski-jumping
    .icon-ski-jumping
  • sailing
    .icon-sailing
  • stadium
    .icon-stadium
  • chairlift
    .icon-chairlift
  • surfing
    .icon-surfing
  • gas-station
    .icon-gas-station
  • airport
    .icon-airport
  • scuba-diving
    .icon-scuba-diving
  • restaurant
    .icon-restaurant
  • snowboarding
    .icon-snowboarding
  • open-captioning
    .icon-open-captioning
  • skateboarding
    .icon-skateboarding
  • archery
    .icon-archery
  • spa
    .icon-spa
  • square-rounded
    .icon-square-rounded
  • swimming
    .icon-swimming
  • zoom-out-alt
    .icon-zoom-out-alt
  • parking
    .icon-parking
  • pharmacy
    .icon-pharmacy
  • playground
    .icon-playground
  • clothing-store
    .icon-clothing-store
  • abseiling
    .icon-abseiling
  • plumber
    .icon-plumber
  • taxi-stand
    .icon-taxi-stand
  • travel-agency
    .icon-travel-agency
  • wind-surfing
    .icon-wind-surfing
  • veterinary-care
    .icon-veterinary-care
  • police
    .icon-police
  • zoom-in-alt
    .icon-zoom-in-alt
  • postal-code-prefix
    .icon-postal-code-prefix
  • painter
    .icon-painter
  • waterskiing
    .icon-waterskiing
  • amusement-park
    .icon-amusement-park
  • zoom-out
    .icon-zoom-out1
  • rv-park
    .icon-rv-park
  • snow-shoeing
    .icon-snow-shoeing
  • sign-language
    .icon-sign-language
  • tennis
    .icon-tennis
  • skiing
    .icon-skiing
  • lawyer
    .icon-lawyer
  • square-pin
    .icon-square-pin
  • atm
    .icon-atm
  • store
    .icon-store
  • transit-station
    .icon-transit-station
  • snow
    .icon-snow
  • map-pin
    .icon-map-pin
  • university
    .icon-university
  • storage
    .icon-storage
  • train-station
    .icon-train-station
  • aquarium
    .icon-aquarium
  • park
    .icon-park
  • zoo
    .icon-zoo
  • assistive-listening-system
    .icon-assistive-listening-system
  • rafting
    .icon-rafting
  • whale-watching
    .icon-whale-watching
  • shopping-mall
    .icon-shopping-mall
  • zoom-in
    .icon-zoom-in1
  • art-gallery
    .icon-art-gallery
  • 首页
    .icon-builder-shouye
  • 分类
    .icon-builder-fenlei
  • 会员
    .icon-builder-yonghu
  • 客服
    .icon-builder-kefu
  • 地图
    .icon-builder-logo

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-screen-shot
  • 信息
    #icon-info-query
  • 红旗
    #icon-builder-hongqi
  • 圆形
    #icon-draw-circle
  • circle-hollow
    #icon-draw-circlemarker
  • 右箭头
    #icon-arrow-right
  • 左箭头
    #icon-arrow-left
  • sync-green
    #icon-sync
  • plus
    #icon-plus
  • paint-brush
    #icon-draw-old2
  • minus
    #icon-minus
  • 运动
    #icon-builder-yundong
  • 层_line
    #icon-layers-line
  • 设置
    #icon-settingbar
  • 面型图标1_涂鸦
    #icon-freedraw-0
  • 编辑
    #icon-draw-edit
  • 叠加分析
    #icon-overlay_analysis
  • 复制
    #icon-copy
  • 长度测量
    #icon-measure-length_bak
  • 多边形
    #icon-draw-polygon
  • 应急标绘
    #icon-plot
  • 影响对比
    #icon-layer-compare-old
  • 全图
    #icon-full-map
  • 节点-子流程
    #icon-shape-line
  • 商务 购买 钱 羊
    #icon-builder-shangwu
  • E
    #icon-e
  • S
    #icon-s
  • T
    #icon-t
  • clear
    #icon-clear
  • draw_click
    #icon-draw-old
  • line
    #icon-draw-polyline
  • 取消顶置
    #icon-clear-gotop
  • self-analysis
    #icon-overlay_analysis_4
  • export-excel
    #icon-excel
  • setting
    #icon-setting
  • iconfont-export
    #icon-import
  • 医院
    #icon-builder-yiyuan
  • 垃圾桶_块
    #icon-draw-remove
  • compare
    #icon-side-by-side
  • sync-disabled
    #icon-sync-disabled
  • 灯光指示
    #icon-search-lightxxx
  • 框选
    #icon-region
  • 定位
    #icon-set-location
  • iconfont-export
    #icon-export
  • 路径分析
    #icon-my-path
  • rectangle
    #icon-draw-rectangle
  • 放大
    #icon-zoom-in
  • 垃圾桶
    #icon-clearall
  • 高级查询
    #icon-advanced_search
  • 面积测量
    #icon-measure-area_bak
  • 宅基地
    #icon-builder-zhaijidi
  • 方形
    #icon-fangxing
  • 住宿
    #icon-builder-zhusu
  • 标记
    #icon-draw-marker
  • 剪刀
    #icon-screen-shot-old
  • edit-brush
    #icon-draw
  • 缩放,看,探索,查看,搜索,放大镜,优化,线性,扁平,填充,单色,简约,圆润
    #icon-filter
  • 线标绘
    #icon-plot-line
  • hand
    #icon-hand-old
  • 缩小
    #icon-zoom-out
  • 地球
    #icon-globe
  • 图例
    #icon-legend
  • g
    #icon-g
  • 粘贴
    #icon-paste
  • 箭头
    #icon-plot-arrow-up
  • full screen
    #icon-fullscreen
  • 线框
    #icon-shape-polygon
  • 电影院
    #icon-builder-dianyingyuan
  • layers
    #icon-layers
  • 分时对比-icon
    #icon-layer-compare
  • marker
    #icon-marker
  • 置顶
    #icon-gotop
  • hand
    #icon-hand
  • 搜索
    #icon-search
  • 交集
    #icon-analysis-overlay
  • database
    #icon-database
  • 饼图
    #icon-pie
  • 显示
    #icon-show
  • 皮肤
    #icon-change-skin
  • picture
    #icon-main-map
  • 停车场
    #icon-builder-tingchechang
  • 打印
    #icon-print
  • 关联
    #icon-analysis-autocorrelation
  • edit
    #icon-edit
  • 河流面
    #icon-builder-heliu
  • 箭头
    #icon-plot-arrow-down
  • 用户
    #icon-user0
  • 灯标
    #icon-search-light
  • 面标绘
    #icon-plot-fill
  • 长度
    #icon-measure-length
  • D
    #icon-d
  • 菱形
    #icon-builder-lingxing
  • 宗教
    #icon-builder-zongjiao
  • zoomin
    #icon-zoomToLayer-copy
  • 宽度扩展图
    #icon-search-light-length
  • 林地
    #icon-builder-lindi
  • 不显示
    #icon-not-show
  • icon_宽度
    #icon-search-light-lengthxx
  • 涂鸦
    #icon-freedraw-1
  • shexiangtou
    #icon-camera
  • compare
    #icon-side-by-side-vertical
  • 面积
    #icon-measure-area
  • 商场
    #icon-builder-shangchang
  • 公共汽车站场
    #icon-builder-gonggongqichezhan
  • 三角形
    #icon-builder-sanjiaoxing
  • Buffer analysis
    #icon-analysis-buffer
  • 应用分析
    #icon-map-builder-analysis
  • map_polygon
    #icon-analysis-area
  • 大学
    #icon-builder-daxue
  • 我的果园
    #icon-builder-guoyuan
  • cloud-down-f
    #icon-clouddown
  • 流程单-秧田
    #icon-builder-shuitian
  • 机关行政
    #icon-builder-xingzhengjiguan
  • 差集
    #icon-analysis-difference
  • 村庄
    #icon-builder-cunzhuang
  • union
    #icon-analysis-union
  • 田间管理
    #icon-builder-chayuan
  • 加油站
    #icon-builder-jiayouzhan
  • bookmark
    #icon-bookmark
  • 火车
    #icon-builder-huochezhan
  • 转发-面
    #icon-transmit
  • user2
    #icon-user
  • 军事
    #icon-builder-junshijidi
  • 飞机
    #icon-builder-feijichang
  • ManagePaths
    #icon-manage-path
  • 五角星
    #icon-builder-wujiaoxing
  • 圆形
    #icon-builder-yuanxing
  • 动物园3
    #icon-builder-dongwuyuan
  • 银行
    #icon-builder-yinhang
  • 公园
    #icon-builder-gongyuan
  • 监狱
    #icon-builder-jianyu
  • 地理信息
    #icon-analysis-projectsystem
  • 厕所
    #icon-builder-cesuo
  • polygon
    #icon-analysis-geometry-attribute
  • 指南针
    #icon-builder-zhinanzhen
  • menu-unfold
    #icon-menu-unfold
  • menu-fold
    #icon-menu-fold
  • 出租车
    #icon-builder-chuzuche
  • 码头
    #icon-builder-matou
  • 乡镇
    #icon-builder-xiangzhen
  • trajectory path
    #icon-compute-path
  • 散点
    #icon-shape-point-old
  • 沼泽地
    #icon-zhaozedi
  • 沟渠-01
    #icon-builder-gouqu
  • 草地
    #icon-builder-caodi
  • ts-图标_APPCluster
    #icon-analysis-clustering
  • polygon
    #icon-analysis-geometrycheck
  • 风景
    #icon-builder-fengjing
  • 死亡殡葬
    #icon-builder-binzang
  • 电话咨询 话务综合管理#bl
    #icon-builder-dianhua
  • 使馆
    #icon-builder-shengzhengfu
  • 工业
    #icon-builder-gongye
  • 开采矿产
    #icon-builder-caikuang
  • 水库
    #icon-builder-shuiku
  • save-2-line
    #icon-save
  • 港口
    #icon-builder-gangkou
  • 湖泊
    #icon-builder-hupo
  • #icon-builder-biaoji
  • 餐饮 (1)
    #icon-builder-canyin
  • 消防
    #icon-builder-xiaofang
  • 警局
    #icon-builder-jingju
  • 出版年
    #icon-builder-chubanshe
  • 滩涂
    #icon-builder-tantu
  • M_Edit_MergeDifference
    #icon-analysis-symdifference
  • 数据汇总
    #icon-analysis-sumstatistics
  • 散点图
    #icon-shape-point
  • 大厦
    #icon-builder-dasha
  • 要素-公路隧道
    #icon-builder-suidao
  • 投影
    #icon-analysis-project
  • circle
    #icon-circle
  • casino
    #icon-casino
  • courthouse
    #icon-courthouse
  • electronics-store
    #icon-electronics-store
  • boat-tour
    #icon-boat-tour
  • female
    #icon-female
  • bicycle-store
    #icon-bicycle-store
  • car-repair
    #icon-car-repair
  • convenience-store
    #icon-convenience-store
  • braille
    #icon-braille
  • campground
    #icon-campground
  • doctor
    #icon-doctor
  • dentist
    #icon-dentist
  • canoe
    #icon-canoe
  • florist
    #icon-florist
  • car-dealer
    #icon-car-dealer
  • fish-cleaning
    #icon-fish-cleaning
  • bowling-alley
    #icon-bowling-alley
  • climbing
    #icon-climbing
  • general-contractor
    #icon-general-contractor
  • compass
    #icon-compass
  • gym
    #icon-gym
  • funeral-home
    #icon-funeral-home
  • grocery-or-supermarket
    #icon-grocery-or-supermarket
  • cross-country-skiing
    #icon-cross-country-skiing
  • hardware-store
    #icon-hardware-store
  • car-wash
    #icon-car-wash
  • food
    #icon-food
  • hair-care
    #icon-hair-care
  • department-store
    #icon-department-store
  • diving
    #icon-diving
  • ice-skating
    #icon-ice-skating
  • car-rental
    #icon-car-rental
  • hospital
    #icon-hospital
  • health
    #icon-health
  • church
    #icon-church
  • laundry
    #icon-laundry
  • hang-gliding
    #icon-hang-gliding
  • liquor-store
    #icon-liquor-store
  • postal-code
    #icon-postal-code
  • fishing-pier
    #icon-fishing-pier
  • fullscreen
    #icon-fullscreen1
  • school
    #icon-school
  • city-hall
    #icon-city-hall
  • expand
    #icon-expand
  • male
    #icon-male
  • electrician
    #icon-electrician
  • ice-fishing
    #icon-ice-fishing
  • low-vision-access
    #icon-low-vision-access
  • sledding
    #icon-sledding
  • hindu-temple
    #icon-hindu-temple
  • insurance-agency
    #icon-insurance-agency
  • jet-skiing
    #icon-jet-skiing
  • inline-skating
    #icon-inline-skating
  • marina
    #icon-marina
  • closed-captioning
    #icon-closed-captioning
  • square
    #icon-square
  • fire-station
    #icon-fire-station
  • movie-rental
    #icon-movie-rental
  • crosshairs
    #icon-crosshairs
  • mosque
    #icon-mosque
  • local-government
    #icon-local-government
  • pet-store
    #icon-pet-store
  • moving-company
    #icon-moving-company
  • embassy
    #icon-embassy
  • night-club
    #icon-night-club
  • kayaking
    #icon-kayaking
  • locksmith
    #icon-locksmith
  • movie-theater
    #icon-movie-theater
  • real-estate-agency
    #icon-real-estate-agency
  • point-of-interest
    #icon-point-of-interest
  • natural-feature
    #icon-natural-feature
  • library
    #icon-library
  • subway-station
    #icon-subway-station
  • jewelry-store
    #icon-jewelry-store
  • roofing-contractor
    #icon-roofing-contractor
  • post-office
    #icon-post-office
  • finance
    #icon-finance
  • museum
    #icon-museum
  • route-pin
    #icon-route-pin
  • synagogue
    #icon-synagogue
  • place-of-worship
    #icon-place-of-worship
  • political
    #icon-political
  • furniture-store
    #icon-furniture-store
  • sheild
    #icon-sheild
  • search
    #icon-search1
  • lodging
    #icon-lodging
  • location-arrow
    #icon-location-arrow
  • route
    #icon-route
  • unisex
    #icon-unisex
  • physiotherapist
    #icon-physiotherapist
  • snowmobile
    #icon-snowmobile
  • volume-control-telephone
    #icon-volume-control-telephone
  • post-box
    #icon-post-box
  • wheelchair
    #icon-wheelchair
  • toilet
    #icon-toilet
  • accounting
    #icon-accounting
  • ski-jumping
    #icon-ski-jumping
  • sailing
    #icon-sailing
  • stadium
    #icon-stadium
  • chairlift
    #icon-chairlift
  • surfing
    #icon-surfing
  • gas-station
    #icon-gas-station
  • airport
    #icon-airport
  • scuba-diving
    #icon-scuba-diving
  • restaurant
    #icon-restaurant
  • snowboarding
    #icon-snowboarding
  • open-captioning
    #icon-open-captioning
  • skateboarding
    #icon-skateboarding
  • archery
    #icon-archery
  • spa
    #icon-spa
  • square-rounded
    #icon-square-rounded
  • swimming
    #icon-swimming
  • zoom-out-alt
    #icon-zoom-out-alt
  • parking
    #icon-parking
  • pharmacy
    #icon-pharmacy
  • playground
    #icon-playground
  • clothing-store
    #icon-clothing-store
  • abseiling
    #icon-abseiling
  • plumber
    #icon-plumber
  • taxi-stand
    #icon-taxi-stand
  • travel-agency
    #icon-travel-agency
  • wind-surfing
    #icon-wind-surfing
  • veterinary-care
    #icon-veterinary-care
  • police
    #icon-police
  • zoom-in-alt
    #icon-zoom-in-alt
  • postal-code-prefix
    #icon-postal-code-prefix
  • painter
    #icon-painter
  • waterskiing
    #icon-waterskiing
  • amusement-park
    #icon-amusement-park
  • zoom-out
    #icon-zoom-out1
  • rv-park
    #icon-rv-park
  • snow-shoeing
    #icon-snow-shoeing
  • sign-language
    #icon-sign-language
  • tennis
    #icon-tennis
  • skiing
    #icon-skiing
  • lawyer
    #icon-lawyer
  • square-pin
    #icon-square-pin
  • atm
    #icon-atm
  • store
    #icon-store
  • transit-station
    #icon-transit-station
  • snow
    #icon-snow
  • map-pin
    #icon-map-pin
  • university
    #icon-university
  • storage
    #icon-storage
  • train-station
    #icon-train-station
  • aquarium
    #icon-aquarium
  • park
    #icon-park
  • zoo
    #icon-zoo
  • assistive-listening-system
    #icon-assistive-listening-system
  • rafting
    #icon-rafting
  • whale-watching
    #icon-whale-watching
  • shopping-mall
    #icon-shopping-mall
  • zoom-in
    #icon-zoom-in1
  • art-gallery
    #icon-art-gallery
  • 首页
    #icon-builder-shouye
  • 分类
    #icon-builder-fenlei
  • 会员
    #icon-builder-yonghu
  • 客服
    #icon-builder-kefu
  • 地图
    #icon-builder-logo

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>