<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> </head> <body> <div class="main markdown"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <i class="icon sc icon-liuliang"></i> <div class="name">流量</div> <div class="fontclass">.icon-liuliang</div> </li> <li> <i class="icon sc icon-iconfontditie"></i> <div class="name">轻轨</div> <div class="fontclass">.icon-iconfontditie</div> </li> <li> <i class="icon sc icon-fengsu3"></i> <div class="name">风速3</div> <div class="fontclass">.icon-fengsu3</div> </li> <li> <i class="icon sc icon-calendar"></i> <div class="name">calendar</div> <div class="fontclass">.icon-calendar</div> </li> <li> <i class="icon sc icon-box"></i> <div class="name">box</div> <div class="fontclass">.icon-box</div> </li> <li> <i class="icon sc icon-shenheshibai"></i> <div class="name">审核失败</div> <div class="fontclass">.icon-shenheshibai</div> </li> <li> <i class="icon sc icon-slope"></i> <div class="name">边坡</div> <div class="fontclass">.icon-slope</div> </li> <li> <i class="icon sc icon-icon2"></i> <div class="name">公路</div> <div class="fontclass">.icon-icon2</div> </li> <li> <i class="icon sc icon-gnsscaidian"></i> <div class="name">GNSS采点</div> <div class="fontclass">.icon-gnsscaidian</div> </li> <li> <i class="icon sc icon-chuanganqishebei"></i> <div class="name">传感器设备</div> <div class="fontclass">.icon-chuanganqishebei</div> </li> <li> <i class="icon sc icon-dianliuchuanganqi"></i> <div class="name">电流传感器</div> <div class="fontclass">.icon-dianliuchuanganqi</div> </li> <li> <i class="icon sc icon-dianyachuanganqi"></i> <div class="name">电压传感器</div> <div class="fontclass">.icon-dianyachuanganqi</div> </li> <li> <i class="icon sc icon-wenduchuanganqi"></i> <div class="name">温度传感器</div> <div class="fontclass">.icon-wenduchuanganqi</div> </li> <li> <i class="icon sc icon-xinjian"></i> <div class="name">新建</div> <div class="fontclass">.icon-xinjian</div> </li> <li> <i class="icon sc icon-handong"></i> <div class="name">涵洞</div> <div class="fontclass">.icon-handong</div> </li> <li> <i class="icon sc icon-guanwanggongcheng"></i> <div class="name">管网工程</div> <div class="fontclass">.icon-guanwanggongcheng</div> </li> <li> <i class="icon sc icon-shenhe"></i> <div class="name">审核</div> <div class="fontclass">.icon-shenhe</div> </li> <li> <i class="icon sc icon-zhihuishequ"></i> <div class="name">智慧城市</div> <div class="fontclass">.icon-zhihuishequ</div> </li> <li> <i class="icon sc icon-bianpoweiyi"></i> <div class="name">边坡位移</div> <div class="fontclass">.icon-bianpoweiyi</div> </li> <li> <i class="icon sc icon-jianzhu"></i> <div class="name">建筑</div> <div class="fontclass">.icon-jianzhu</div> </li> <li> <i class="icon sc icon-chuguan"></i> <div class="name">储罐</div> <div class="fontclass">.icon-chuguan</div> </li> <li> <i class="icon sc icon-suidao"></i> <div class="name">隧道</div> <div class="fontclass">.icon-suidao</div> </li> <li> <i class="icon sc icon-data"></i> <div class="name">data</div> <div class="fontclass">.icon-data</div> </li> <li> <i class="icon sc icon-kuangshankaicai"></i> <div class="name">矿山开采</div> <div class="fontclass">.icon-kuangshankaicai</div> </li> <li> <i class="icon sc icon-wangluo"></i> <div class="name">网络</div> <div class="fontclass">.icon-wangluo</div> </li> <li> <i class="icon sc icon-jiankong"></i> <div class="name">监控</div> <div class="fontclass">.icon-jiankong</div> </li> <li> <i class="icon sc icon-dashuju"></i> <div class="name">大数据</div> <div class="fontclass">.icon-dashuju</div> </li> <li> <i class="icon sc icon-shuju"></i> <div class="name">数据库</div> <div class="fontclass">.icon-shuju</div> </li> <li> <i class="icon sc icon-shenhechenggong"></i> <div class="name">审核成功</div> <div class="fontclass">.icon-shenhechenggong</div> </li> <li> <i class="icon sc icon-jiankong1"></i> <div class="name">监控</div> <div class="fontclass">.icon-jiankong1</div> </li> <li> <i class="icon sc icon-wangluoxitong"></i> <div class="name">网络系统</div> <div class="fontclass">.icon-wangluoxitong</div> </li> <li> <i class="icon sc icon-dingwei"></i> <div class="name">定位</div> <div class="fontclass">.icon-dingwei</div> </li> <li> <i class="icon sc icon-xitongyunzhuanqingkuang"></i> <div class="name">系统运转情况</div> <div class="fontclass">.icon-xitongyunzhuanqingkuang</div> </li> <li> <i class="icon sc icon-chakan"></i> <div class="name">查看</div> <div class="fontclass">.icon-chakan</div> </li> <li> <i class="icon sc icon-lianjie"></i> <div class="name">链接</div> <div class="fontclass">.icon-lianjie</div> </li> <li> <i class="icon sc icon-shujudaochu-01"></i> <div class="name">数据导出-01</div> <div class="fontclass">.icon-shujudaochu-01</div> </li> <li> <i class="icon sc icon-xitongzhuangtai"></i> <div class="name">系统状态</div> <div class="fontclass">.icon-xitongzhuangtai</div> </li> <li> <i class="icon sc icon-xiaofeimingxidan"></i> <div class="name">消费明细单</div> <div class="fontclass">.icon-xiaofeimingxidan</div> </li> <li> <i class="icon sc icon-SQLshenhe"></i> <div class="name">SQL审核</div> <div class="fontclass">.icon-SQLshenhe</div> </li> <li> <i class="icon sc icon-aislogo"></i> <div class="name">aislogo</div> <div class="fontclass">.icon-aislogo</div> </li> <li> <i class="icon sc icon-qiao"></i> <div class="name">桥</div> <div class="fontclass">.icon-qiao</div> </li> <li> <i class="icon sc icon-tashiqizhongji"></i> <div class="name">塔式起重机</div> <div class="fontclass">.icon-tashiqizhongji</div> </li> <li> <i class="icon sc icon-dwggeshi"></i> <div class="name">dwg格式</div> <div class="fontclass">.icon-dwggeshi</div> </li> <li> <i class="icon sc icon-luyouqi"></i> <div class="name">路由器</div> <div class="fontclass">.icon-luyouqi</div> </li> <li> <i class="icon sc icon-anzhuangshigong-xianxing"></i> <div class="name">244安装、施工-线性</div> <div class="fontclass">.icon-anzhuangshigong-xianxing</div> </li> <li> <i class="icon sc icon-shaixuanguolv"></i> <div class="name">245筛选过滤</div> <div class="fontclass">.icon-shaixuanguolv</div> </li> <li> <i class="icon sc icon-anzhuangshigong"></i> <div class="name">244安装、施工</div> <div class="fontclass">.icon-anzhuangshigong</div> </li> <li> <i class="icon sc icon-tiaoxingtu-xianxing"></i> <div class="name">408条形图-线性</div> <div class="fontclass">.icon-tiaoxingtu-xianxing</div> </li> <li> <i class="icon sc icon-zhexiantu-xianxing"></i> <div class="name">409折线图-线性</div> <div class="fontclass">.icon-zhexiantu-xianxing</div> </li> <li> <i class="icon sc icon-tieta"></i> <div class="name">铁塔</div> <div class="fontclass">.icon-tieta</div> </li> <li> <i class="icon sc icon-geshi_wendangtxt"></i> <div class="name">800格式_文档txt</div> <div class="fontclass">.icon-geshi_wendangtxt</div> </li> <li> <i class="icon sc icon-geshi_wendangdoc"></i> <div class="name">801格式_文档doc</div> <div class="fontclass">.icon-geshi_wendangdoc</div> </li> <li> <i class="icon sc icon-geshi_wendangpdf"></i> <div class="name">807格式_文档pdf</div> <div class="fontclass">.icon-geshi_wendangpdf</div> </li> <li> <i class="icon sc icon-geshi_wendangxls"></i> <div class="name">803格式_文档xls</div> <div class="fontclass">.icon-geshi_wendangxls</div> </li> <li> <i class="icon sc icon-geshi_tongyongwendang"></i> <div class="name">819格式_通用文档</div> <div class="fontclass">.icon-geshi_tongyongwendang</div> </li> <li> <i class="icon sc icon-geshi_shipinmp"></i> <div class="name">840格式_视频mp4</div> <div class="fontclass">.icon-geshi_shipinmp</div> </li> <li> <i class="icon sc icon-geshi_tupianjpg"></i> <div class="name">860格式_图片jpg</div> <div class="fontclass">.icon-geshi_tupianjpg</div> </li> <li> <i class="icon sc icon-geshi_tupianpng"></i> <div class="name">865格式_图片png</div> <div class="fontclass">.icon-geshi_tupianpng</div> </li> <li> <i class="icon sc icon-guangzhaochuanganqi"></i> <div class="name">光照传感器</div> <div class="fontclass">.icon-guangzhaochuanganqi</div> </li> <li> <i class="icon sc icon-building"></i> <div class="name">建筑</div> <div class="fontclass">.icon-building</div> </li> <li> <i class="icon sc icon-yanwuchuanganqi"></i> <div class="name">烟雾传感器</div> <div class="fontclass">.icon-yanwuchuanganqi</div> </li> <li> <i class="icon sc icon-shizheng"></i> <div class="name">市政</div> <div class="fontclass">.icon-shizheng</div> </li> <li> <i class="icon sc icon-chuanganqi"></i> <div class="name">传感器</div> <div class="fontclass">.icon-chuanganqi</div> </li> <li> <i class="icon sc icon-WSD"></i> <div class="name">温湿度传感器</div> <div class="fontclass">.icon-WSD</div> </li> <li> <i class="icon sc icon-yalichuanganqi"></i> <div class="name">压力传感器</div> <div class="fontclass">.icon-yalichuanganqi</div> </li> <li> <i class="icon sc icon-yinglichuanganqi"></i> <div class="name">应力传感器</div> <div class="fontclass">.icon-yinglichuanganqi</div> </li> <li> <i class="icon sc icon-chenjiangchuanganqi"></i> <div class="name">沉降传感器</div> <div class="fontclass">.icon-chenjiangchuanganqi</div> </li> <li> <i class="icon sc icon-yalichuanganqi1"></i> <div class="name">压力传感器</div> <div class="fontclass">.icon-yalichuanganqi1</div> </li> <li> <i class="icon sc icon-YWC"></i> <div class="name">液位传感器</div> <div class="fontclass">.icon-YWC</div> </li> <li> <i class="icon sc icon-computer"></i> <div class="name">computer</div> <div class="fontclass">.icon-computer</div> </li> <li> <i class="icon sc icon-empty"></i> <div class="name">empty</div> <div class="fontclass">.icon-empty</div> </li> <li> <i class="icon sc icon-offline"></i> <div class="name">offline</div> <div class="fontclass">.icon-offline</div> </li> <li> <i class="icon sc icon-daba"></i> <div class="name">大坝</div> <div class="fontclass">.icon-daba</div> </li> <li> <i class="icon sc icon-shenbuweiyi"></i> <div class="name">深部位移</div> <div class="fontclass">.icon-shenbuweiyi</div> </li> <li> <i class="icon sc icon-maosuochuanganqi"></i> <div class="name">锚索传感器</div> <div class="fontclass">.icon-maosuochuanganqi</div> </li> <li> <i class="icon sc icon-yuliangchuanganqi"></i> <div class="name">雨量传感器</div> <div class="fontclass">.icon-yuliangchuanganqi</div> </li> <li> <i class="icon sc icon-weiyiji"></i> <div class="name">位移计</div> <div class="fontclass">.icon-weiyiji</div> </li> <li> <i class="icon sc icon-qixiangzhan_"></i> <div class="name">气象站_1</div> <div class="fontclass">.icon-qixiangzhan_</div> </li> <li> <i class="icon sc icon-shenjikeng"></i> <div class="name">深基坑</div> <div class="fontclass">.icon-shenjikeng</div> </li> </ul> <h2 id="font-class-">font-class引用</h2> <hr> <p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p> <p>与unicode使用方式相比,具有如下特点:</p> <ul> <li>兼容性良好,支持ie8+,及所有现代浏览器。</li> <li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li> <li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li> <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> </ul> <p>使用步骤如下:</p> <h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3> <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> <pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">sc</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> <blockquote> <p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> </blockquote> </div> </body> </html>