<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <script src="iconfont.js"></script> <style type="text/css"> .icon { /* 通过设置 font-size 来改变图标大小 */ width: 1em; height: 1em; /* 图标和文字相邻时,垂直对齐 */ vertical-align: -0.15em; /* 通过设置 color 来改变 SVG 的颜色/fill */ fill: currentColor; /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 normalize.css 中也包含这行 */ overflow: hidden; } </style> </head> <body> <div class="main markdown"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-liuliang"></use> </svg> <div class="name">流量</div> <div class="fontclass">#icon-liuliang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-iconfontditie"></use> </svg> <div class="name">轻轨</div> <div class="fontclass">#icon-iconfontditie</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fengsu3"></use> </svg> <div class="name">风速3</div> <div class="fontclass">#icon-fengsu3</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-calendar"></use> </svg> <div class="name">calendar</div> <div class="fontclass">#icon-calendar</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-box"></use> </svg> <div class="name">box</div> <div class="fontclass">#icon-box</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenheshibai"></use> </svg> <div class="name">审核失败</div> <div class="fontclass">#icon-shenheshibai</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-slope"></use> </svg> <div class="name">边坡</div> <div class="fontclass">#icon-slope</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-icon2"></use> </svg> <div class="name">公路</div> <div class="fontclass">#icon-icon2</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gnsscaidian"></use> </svg> <div class="name">GNSS采点</div> <div class="fontclass">#icon-gnsscaidian</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chuanganqishebei"></use> </svg> <div class="name">传感器设备</div> <div class="fontclass">#icon-chuanganqishebei</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dianliuchuanganqi"></use> </svg> <div class="name">电流传感器</div> <div class="fontclass">#icon-dianliuchuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dianyachuanganqi"></use> </svg> <div class="name">电压传感器</div> <div class="fontclass">#icon-dianyachuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wenduchuanganqi"></use> </svg> <div class="name">温度传感器</div> <div class="fontclass">#icon-wenduchuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xinjian"></use> </svg> <div class="name">新建</div> <div class="fontclass">#icon-xinjian</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-handong"></use> </svg> <div class="name">涵洞</div> <div class="fontclass">#icon-handong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanwanggongcheng"></use> </svg> <div class="name">管网工程</div> <div class="fontclass">#icon-guanwanggongcheng</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenhe"></use> </svg> <div class="name">审核</div> <div class="fontclass">#icon-shenhe</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhihuishequ"></use> </svg> <div class="name">智慧城市</div> <div class="fontclass">#icon-zhihuishequ</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bianpoweiyi"></use> </svg> <div class="name">边坡位移</div> <div class="fontclass">#icon-bianpoweiyi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jianzhu"></use> </svg> <div class="name">建筑</div> <div class="fontclass">#icon-jianzhu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chuguan"></use> </svg> <div class="name">储罐</div> <div class="fontclass">#icon-chuguan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-suidao"></use> </svg> <div class="name">隧道</div> <div class="fontclass">#icon-suidao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-data"></use> </svg> <div class="name">data</div> <div class="fontclass">#icon-data</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kuangshankaicai"></use> </svg> <div class="name">矿山开采</div> <div class="fontclass">#icon-kuangshankaicai</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wangluo"></use> </svg> <div class="name">网络</div> <div class="fontclass">#icon-wangluo</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jiankong"></use> </svg> <div class="name">监控</div> <div class="fontclass">#icon-jiankong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dashuju"></use> </svg> <div class="name">大数据</div> <div class="fontclass">#icon-dashuju</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shuju"></use> </svg> <div class="name">数据库</div> <div class="fontclass">#icon-shuju</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenhechenggong"></use> </svg> <div class="name">审核成功</div> <div class="fontclass">#icon-shenhechenggong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jiankong1"></use> </svg> <div class="name">监控</div> <div class="fontclass">#icon-jiankong1</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wangluoxitong"></use> </svg> <div class="name">网络系统</div> <div class="fontclass">#icon-wangluoxitong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dingwei"></use> </svg> <div class="name">定位</div> <div class="fontclass">#icon-dingwei</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xitongyunzhuanqingkuang"></use> </svg> <div class="name">系统运转情况</div> <div class="fontclass">#icon-xitongyunzhuanqingkuang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chakan"></use> </svg> <div class="name">查看</div> <div class="fontclass">#icon-chakan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lianjie"></use> </svg> <div class="name">链接</div> <div class="fontclass">#icon-lianjie</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shujudaochu-01"></use> </svg> <div class="name">数据导出-01</div> <div class="fontclass">#icon-shujudaochu-01</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xitongzhuangtai"></use> </svg> <div class="name">系统状态</div> <div class="fontclass">#icon-xitongzhuangtai</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xiaofeimingxidan"></use> </svg> <div class="name">消费明细单</div> <div class="fontclass">#icon-xiaofeimingxidan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-SQLshenhe"></use> </svg> <div class="name">SQL审核</div> <div class="fontclass">#icon-SQLshenhe</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-aislogo"></use> </svg> <div class="name">aislogo</div> <div class="fontclass">#icon-aislogo</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-qiao"></use> </svg> <div class="name">桥</div> <div class="fontclass">#icon-qiao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tashiqizhongji"></use> </svg> <div class="name">塔式起重机</div> <div class="fontclass">#icon-tashiqizhongji</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dwggeshi"></use> </svg> <div class="name">dwg格式</div> <div class="fontclass">#icon-dwggeshi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-luyouqi"></use> </svg> <div class="name">路由器</div> <div class="fontclass">#icon-luyouqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-anzhuangshigong-xianxing"></use> </svg> <div class="name">244安装、施工-线性</div> <div class="fontclass">#icon-anzhuangshigong-xianxing</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shaixuanguolv"></use> </svg> <div class="name">245筛选过滤</div> <div class="fontclass">#icon-shaixuanguolv</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-anzhuangshigong"></use> </svg> <div class="name">244安装、施工</div> <div class="fontclass">#icon-anzhuangshigong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tiaoxingtu-xianxing"></use> </svg> <div class="name">408条形图-线性</div> <div class="fontclass">#icon-tiaoxingtu-xianxing</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhexiantu-xianxing"></use> </svg> <div class="name">409折线图-线性</div> <div class="fontclass">#icon-zhexiantu-xianxing</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tieta"></use> </svg> <div class="name">铁塔</div> <div class="fontclass">#icon-tieta</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_wendangtxt"></use> </svg> <div class="name">800格式_文档txt</div> <div class="fontclass">#icon-geshi_wendangtxt</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_wendangdoc"></use> </svg> <div class="name">801格式_文档doc</div> <div class="fontclass">#icon-geshi_wendangdoc</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_wendangpdf"></use> </svg> <div class="name">807格式_文档pdf</div> <div class="fontclass">#icon-geshi_wendangpdf</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_wendangxls"></use> </svg> <div class="name">803格式_文档xls</div> <div class="fontclass">#icon-geshi_wendangxls</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_tongyongwendang"></use> </svg> <div class="name">819格式_通用文档</div> <div class="fontclass">#icon-geshi_tongyongwendang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_shipinmp"></use> </svg> <div class="name">840格式_视频mp4</div> <div class="fontclass">#icon-geshi_shipinmp</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_tupianjpg"></use> </svg> <div class="name">860格式_图片jpg</div> <div class="fontclass">#icon-geshi_tupianjpg</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi_tupianpng"></use> </svg> <div class="name">865格式_图片png</div> <div class="fontclass">#icon-geshi_tupianpng</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guangzhaochuanganqi"></use> </svg> <div class="name">光照传感器</div> <div class="fontclass">#icon-guangzhaochuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-building"></use> </svg> <div class="name">建筑</div> <div class="fontclass">#icon-building</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yanwuchuanganqi"></use> </svg> <div class="name">烟雾传感器</div> <div class="fontclass">#icon-yanwuchuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shizheng"></use> </svg> <div class="name">市政</div> <div class="fontclass">#icon-shizheng</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chuanganqi"></use> </svg> <div class="name">传感器</div> <div class="fontclass">#icon-chuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-WSD"></use> </svg> <div class="name">温湿度传感器</div> <div class="fontclass">#icon-WSD</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yalichuanganqi"></use> </svg> <div class="name">压力传感器</div> <div class="fontclass">#icon-yalichuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yinglichuanganqi"></use> </svg> <div class="name">应力传感器</div> <div class="fontclass">#icon-yinglichuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chenjiangchuanganqi"></use> </svg> <div class="name">沉降传感器</div> <div class="fontclass">#icon-chenjiangchuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yalichuanganqi1"></use> </svg> <div class="name">压力传感器</div> <div class="fontclass">#icon-yalichuanganqi1</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-YWC"></use> </svg> <div class="name">液位传感器</div> <div class="fontclass">#icon-YWC</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-computer"></use> </svg> <div class="name">computer</div> <div class="fontclass">#icon-computer</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-empty"></use> </svg> <div class="name">empty</div> <div class="fontclass">#icon-empty</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-offline"></use> </svg> <div class="name">offline</div> <div class="fontclass">#icon-offline</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-daba"></use> </svg> <div class="name">大坝</div> <div class="fontclass">#icon-daba</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenbuweiyi"></use> </svg> <div class="name">深部位移</div> <div class="fontclass">#icon-shenbuweiyi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-maosuochuanganqi"></use> </svg> <div class="name">锚索传感器</div> <div class="fontclass">#icon-maosuochuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yuliangchuanganqi"></use> </svg> <div class="name">雨量传感器</div> <div class="fontclass">#icon-yuliangchuanganqi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-weiyiji"></use> </svg> <div class="name">位移计</div> <div class="fontclass">#icon-weiyiji</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-qixiangzhan_"></use> </svg> <div class="name">气象站_1</div> <div class="fontclass">#icon-qixiangzhan_</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenjikeng"></use> </svg> <div class="name">深基坑</div> <div class="fontclass">#icon-shenjikeng</div> </li> </ul> <h2 id="symbol-">symbol引用</h2> <hr> <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p> <ul> <li>支持多色图标了,不再受单色限制。</li> <li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li> <li>兼容性较差,支持 ie9+,及现代浏览器。</li> <li>浏览器渲染svg的性能一般,还不如png。</li> </ul> <p>使用步骤如下:</p> <h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3> <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> <h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3> <pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> .icon { width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; vertical-align: <span class="hljs-number">-0.15</span>em; fill: currentColor; overflow: hidden; } <<span class="hljs-regexp">/style></span></code></pre> <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> <pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> <<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> </span><<span class="hljs-regexp">/svg> </span></code></pre> </div> </body> </html>