IconFont 图标
-
输入2#icon-shuru2
-
写字楼#icon-xiezilou
-
飞机#icon-feiji
-
天气#icon-tianqi
-
相关#icon-xiangguan
-
地图类_建筑物#icon-dituleijianzhuwu
-
节点类_县#icon-jiedianleixian
-
节点类_区域#icon-jiedianleiquyu
-
节点类_省#icon-jiedianleisheng
-
节点类_市#icon-jiedianleishi
-
通用类_时间热度图#icon-tongyongleishijianredutu
-
通用类_空间热度图#icon-tongyongleikongjianredutu
-
通用类_巡查点#icon-tongyongleixunchadian
-
通用类_巡查路线#icon-tongyongleixunchaluxian
-
通用类_页链接#icon-tongyongleiyelianjie
-
边界条件#icon-bianjietiaojian
-
摄像头#icon-shiping-xue
-
气象站#icon-qixiangzhan
-
办公楼#icon-jingwuicon_svg_huaban
-
入河湖排污口#icon-ruhehupaiwukou
-
水库点#icon-shuikudian
-
水利行业单位#icon-shuilihangyedanwei
-
水库#icon-shuiku
-
水电站#icon-shuidianzhan
-
水利社会团体#icon-shuilishehuituanti
-
水文站#icon-shuiwenzhan
-
水利企业#icon-shuiliqiye
-
水利行政机关#icon-shuilihangzhengjiguan
-
水利事业单位#icon-shuilishiyedanwei
-
水闸#icon-shuizha
-
乡镇水利管理单位#icon-xiangzhenshuiliguanlidanwei
-
橡胶坝#icon-xiangjiaoba
-
泵站#icon-bengzhan
-
引调水工程大比例尺调水#icon-yintiaoshuigongchengdabilichitiaoshui
-
大坝#icon-daba
-
工业企业用水#icon-gongyeqiyeyongshui
-
地表水水源地#icon-dibiaoshuishuiyuandi
-
堤防工程#icon-difanggongcheng
-
公共供水企业#icon-gonggonggongshuiqiye
-
规模化畜禽养殖场#icon-guimohuaxuqinyangzhichang
-
河流面#icon-heliumian
-
湖泊#icon-hubo
-
河湖取水口#icon-hehuqushuikou
-
河流#icon-heliu
-
建筑业与第三产业用水#icon-jianzhuyeyudisanchanyeyongshui
-
灌区#icon-guanqu
-
渠道#icon-qudao
-
农村供水工程#icon-nongcungongshuigongcheng
-
水井#icon-shuijing
-
湖#icon-hu
-
雨量站#icon-yuliangzhan
-
水库水文站#icon-shuikushuiwenzhan
-
墒情站#icon-shangqingzhan
-
地下水站#icon-dixiashuizhan
-
河道水文站#icon-hedaoshuiwenzhan
-
河道水位站#icon-hedaoshuiweizhan
-
普通点#icon-aaa
-
自由绘线#icon-aaa1
-
普通面#icon-aaa2
-
一般箭头#icon-aaa3
-
燕尾箭头#icon-aaa4
-
双箭头#icon-aaa5
-
灾害#icon-zaihai
-
普通线#icon-putongxian
-
数据采集#icon-shujucaiji
-
水位站#icon-shuiweizhan
-
水质监测站#icon-shuizhijiancezhan
-
取用水测站#icon-quyongshuicezhan
-
桥梁工程#icon-qiaolianggongcheng
-
企事业单位调查#icon-qishiyedanweitiaocha
-
路涵工程#icon-luhangongcheng
-
成灾水位点#icon-chengzaishuiweidian
-
塘堰坝工程#icon-tangyanbagongcheng
-
城集镇居民#icon-chengjizhenjumin
-
沿河村落人口#icon-yanhecunlarenkou
-
历史山洪灾害#icon-lishishanhongzaihai
-
安置点#icon-anzhidian
-
简易雨量站#icon-jianyiyuliangzhan
-
自动监测站#icon-zidongjiancezhan
-
简易水位站#icon-jianyishuiweizhan
-
无线预警广播站#icon-wuxianyujingguangbozhan
-
历史最高水位点#icon-lishizuigaoshuiweidian
-
需防洪治理山洪沟#icon-xufanghongzhilishanhonggou
-
转移路线#icon-zhuanyiluxian
-
危险区#icon-weixianqu
-
居民居住地轮廓#icon-juminjuzhudilunkuo
-
防汛形势部署#icon-fangxunxingshibushu
-
防汛应急指挥#icon-fangxunyingjizhihui
-
水利工程信息统计#icon-shuiligongchengxinxitongji
-
实时数据展示#icon-shishishujuzhanshi
-
地图管理#icon-dituguanli
-
个人中心#icon-gerenzhongxin
-
数据服务#icon-shujufuwu
-
功能服务#icon-gongnengfuwu
-
平台应用#icon-pingtaiyingyong
-
膜粉海藻#icon-mofenhaizao
-
地表水水源地#icon-dibiaoshuishuiyuandi1
-
湖#icon-hu1
-
信息维护#icon-navicon-xxwh
-
请购汇总统计#icon-navicon-qghztj
-
查询#icon-chaxun1
-
系统管理#icon-xitongguanli
-
查询#icon-chaxun
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>