You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
695 lines
28 KiB
695 lines
28 KiB
|
|
<!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>
|
|
|