IconFont 图标
- 
                    
                    流量#icon-liuliang
 - 
                    
                    轻轨#icon-iconfontditie
 - 
                    
                    风速3#icon-fengsu3
 - 
                    
                    calendar#icon-calendar
 - 
                    
                    box#icon-box
 - 
                    
                    审核失败#icon-shenheshibai
 - 
                    
                    边坡#icon-slope
 - 
                    
                    公路#icon-icon2
 - 
                    
                    GNSS采点#icon-gnsscaidian
 - 
                    
                    传感器设备#icon-chuanganqishebei
 - 
                    
                    电流传感器#icon-dianliuchuanganqi
 - 
                    
                    电压传感器#icon-dianyachuanganqi
 - 
                    
                    温度传感器#icon-wenduchuanganqi
 - 
                    
                    新建#icon-xinjian
 - 
                    
                    涵洞#icon-handong
 - 
                    
                    管网工程#icon-guanwanggongcheng
 - 
                    
                    审核#icon-shenhe
 - 
                    
                    智慧城市#icon-zhihuishequ
 - 
                    
                    边坡位移#icon-bianpoweiyi
 - 
                    
                    建筑#icon-jianzhu
 - 
                    
                    储罐#icon-chuguan
 - 
                    
                    隧道#icon-suidao
 - 
                    
                    data#icon-data
 - 
                    
                    矿山开采#icon-kuangshankaicai
 - 
                    
                    网络#icon-wangluo
 - 
                    
                    监控#icon-jiankong
 - 
                    
                    大数据#icon-dashuju
 - 
                    
                    数据库#icon-shuju
 - 
                    
                    审核成功#icon-shenhechenggong
 - 
                    
                    监控#icon-jiankong1
 - 
                    
                    网络系统#icon-wangluoxitong
 - 
                    
                    定位#icon-dingwei
 - 
                    
                    系统运转情况#icon-xitongyunzhuanqingkuang
 - 
                    
                    查看#icon-chakan
 - 
                    
                    链接#icon-lianjie
 - 
                    
                    数据导出-01#icon-shujudaochu-01
 - 
                    
                    系统状态#icon-xitongzhuangtai
 - 
                    
                    消费明细单#icon-xiaofeimingxidan
 - 
                    
                    SQL审核#icon-SQLshenhe
 - 
                    
                    aislogo#icon-aislogo
 - 
                    
                    桥#icon-qiao
 - 
                    
                    塔式起重机#icon-tashiqizhongji
 - 
                    
                    dwg格式#icon-dwggeshi
 - 
                    
                    路由器#icon-luyouqi
 - 
                    
                    244安装、施工-线性#icon-anzhuangshigong-xianxing
 - 
                    
                    245筛选过滤#icon-shaixuanguolv
 - 
                    
                    244安装、施工#icon-anzhuangshigong
 - 
                    
                    408条形图-线性#icon-tiaoxingtu-xianxing
 - 
                    
                    409折线图-线性#icon-zhexiantu-xianxing
 - 
                    
                    铁塔#icon-tieta
 - 
                    
                    800格式_文档txt#icon-geshi_wendangtxt
 - 
                    
                    801格式_文档doc#icon-geshi_wendangdoc
 - 
                    
                    807格式_文档pdf#icon-geshi_wendangpdf
 - 
                    
                    803格式_文档xls#icon-geshi_wendangxls
 - 
                    
                    819格式_通用文档#icon-geshi_tongyongwendang
 - 
                    
                    840格式_视频mp4#icon-geshi_shipinmp
 - 
                    
                    860格式_图片jpg#icon-geshi_tupianjpg
 - 
                    
                    865格式_图片png#icon-geshi_tupianpng
 - 
                    
                    光照传感器#icon-guangzhaochuanganqi
 - 
                    
                    建筑#icon-building
 - 
                    
                    烟雾传感器#icon-yanwuchuanganqi
 - 
                    
                    市政#icon-shizheng
 - 
                    
                    传感器#icon-chuanganqi
 - 
                    
                    温湿度传感器#icon-WSD
 - 
                    
                    压力传感器#icon-yalichuanganqi
 - 
                    
                    应力传感器#icon-yinglichuanganqi
 - 
                    
                    沉降传感器#icon-chenjiangchuanganqi
 - 
                    
                    压力传感器#icon-yalichuanganqi1
 - 
                    
                    液位传感器#icon-YWC
 - 
                    
                    computer#icon-computer
 - 
                    
                    empty#icon-empty
 - 
                    
                    offline#icon-offline
 - 
                    
                    大坝#icon-daba
 - 
                    
                    深部位移#icon-shenbuweiyi
 - 
                    
                    锚索传感器#icon-maosuochuanganqi
 - 
                    
                    雨量传感器#icon-yuliangchuanganqi
 - 
                    
                    位移计#icon-weiyiji
 - 
                    
                    气象站_1#icon-qixiangzhan_
 - 
                    
                    深基坑#icon-shenjikeng
 
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>