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
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的fontclass代码:
<link rel="stylesheet" type="text/css" href="./iconfont.css">第二步:挑选相应图标并获取类名,应用于页面:
<i class="sc icon-xxx"></i>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。