IconFont 图标
-
剪刀#icon-screen-shot
-
信息#icon-info-query
-
圆形#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
-
层_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
-
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
-
iconfont-export#icon-import
-
垃圾桶_块#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
-
rectangle#icon-draw-rectangle
-
放大#icon-zoom-in
-
垃圾桶#icon-clearall
-
高级查询#icon-advanced_search
-
面积测量#icon-measure-area_bak
-
标记#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
-
layers#icon-layers
-
分时对比-icon#icon-layer-compare
-
marker#icon-marker
-
置顶#icon-gotop
-
hand#icon-hand
-
饼图#icon-pie
-
显示#icon-show
-
皮肤#icon-change-skin
-
picture#icon-main-map
-
打印#icon-print
-
edit#icon-edit
-
箭头#icon-plot-arrow-down
-
灯标#icon-search-light
-
面标绘#icon-plot-fill
-
长度#icon-measure-length
-
D#icon-d
-
zoomin#icon-zoomToLayer-copy
-
宽度扩展图#icon-search-light-length
-
不显示#icon-not-show
-
icon_宽度#icon-search-light-lengthxx
-
涂鸦#icon-freedraw-1
-
shexiangtou#icon-camera
-
compare#icon-side-by-side-vertical
-
面积#icon-measure-area
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.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>