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>