free-sun
/
Inspection
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
473 Commits
1 Branch
0 Tags
86 MiB
 
 
 
 
Tree: f8769de441
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f8769de441'
${ noResults }
Inspection/web/client/assets/font_sc/demo_fontclass.html

514 lines
20 KiB
Raw Blame History

<!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">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs">&lt;<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>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<blockquote>
<p>"sc"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
</blockquote>
</div>
</body>
</html>