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>