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.
552 lines
20 KiB
552 lines
20 KiB
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>IconFont</title>
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face {font-family: "sc";
|
|
src: url('iconfont.eot'); /* IE9*/
|
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('iconfont.woff') format('woff'), /* chrome, firefox */
|
|
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
|
url('iconfont.svg#sc') format('svg'); /* iOS 4.1- */
|
|
}
|
|
|
|
.sc {
|
|
font-family:"sc" !important;
|
|
font-size:16px;
|
|
font-style:normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-stroke-width: 0.2px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="main markdown">
|
|
<h1>IconFont 图标</h1>
|
|
<ul class="icon_lists clear">
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">流量</div>
|
|
<div class="code">&#xe602;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">轻轨</div>
|
|
<div class="code">&#xe66f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">风速3</div>
|
|
<div class="code">&#xe635;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">calendar</div>
|
|
<div class="code">&#xe74a;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">box</div>
|
|
<div class="code">&#xe6cb;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">审核失败</div>
|
|
<div class="code">&#xe61d;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">边坡</div>
|
|
<div class="code">&#xe676;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">公路</div>
|
|
<div class="code">&#xe607;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">GNSS采点</div>
|
|
<div class="code">&#xe825;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">传感器设备</div>
|
|
<div class="code">&#xe612;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">电流传感器</div>
|
|
<div class="code">&#xe62c;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">电压传感器</div>
|
|
<div class="code">&#xe62f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">温度传感器</div>
|
|
<div class="code">&#xe637;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">新建</div>
|
|
<div class="code">&#xe61f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">涵洞</div>
|
|
<div class="code">&#xe89b;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">管网工程</div>
|
|
<div class="code">&#xe646;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">审核</div>
|
|
<div class="code">&#xe639;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">智慧城市</div>
|
|
<div class="code">&#xe600;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">边坡位移</div>
|
|
<div class="code">&#xe60a;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">建筑</div>
|
|
<div class="code">&#xe65f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">储罐</div>
|
|
<div class="code">&#xe636;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">隧道</div>
|
|
<div class="code">&#xe61e;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">data</div>
|
|
<div class="code">&#xe757;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">矿山开采</div>
|
|
<div class="code">&#xe608;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">网络</div>
|
|
<div class="code">&#xe617;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">监控</div>
|
|
<div class="code">&#xe619;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">大数据</div>
|
|
<div class="code">&#xe61a;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">数据库</div>
|
|
<div class="code">&#xe61b;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">审核成功</div>
|
|
<div class="code">&#xe627;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">监控</div>
|
|
<div class="code">&#xe620;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">网络系统</div>
|
|
<div class="code">&#xe62e;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">定位</div>
|
|
<div class="code">&#xe630;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">系统运转情况</div>
|
|
<div class="code">&#xe631;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">查看</div>
|
|
<div class="code">&#xe63e;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">链接</div>
|
|
<div class="code">&#xe63f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">数据导出-01</div>
|
|
<div class="code">&#xe640;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">系统状态</div>
|
|
<div class="code">&#xe642;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">消费明细单</div>
|
|
<div class="code">&#xe643;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">SQL审核</div>
|
|
<div class="code">&#xe645;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">aislogo</div>
|
|
<div class="code">&#xe648;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">桥</div>
|
|
<div class="code">&#xe715;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">塔式起重机</div>
|
|
<div class="code">&#xe615;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">dwg格式</div>
|
|
<div class="code">&#xe82b;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">路由器</div>
|
|
<div class="code">&#xe603;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">244安装、施工-线性</div>
|
|
<div class="code">&#xe8d6;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">245筛选过滤</div>
|
|
<div class="code">&#xe8d7;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">244安装、施工</div>
|
|
<div class="code">&#xe8d8;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">408条形图-线性</div>
|
|
<div class="code">&#xe904;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">409折线图-线性</div>
|
|
<div class="code">&#xe906;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">铁塔</div>
|
|
<div class="code">&#xe605;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">800格式_文档txt</div>
|
|
<div class="code">&#xe6b8;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">801格式_文档doc</div>
|
|
<div class="code">&#xe6b9;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">807格式_文档pdf</div>
|
|
<div class="code">&#xe6bc;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">803格式_文档xls</div>
|
|
<div class="code">&#xe6be;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">819格式_通用文档</div>
|
|
<div class="code">&#xe6c0;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">840格式_视频mp4</div>
|
|
<div class="code">&#xe6c8;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">860格式_图片jpg</div>
|
|
<div class="code">&#xe6cc;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">865格式_图片png</div>
|
|
<div class="code">&#xe6ce;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">光照传感器</div>
|
|
<div class="code">&#xe638;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">建筑</div>
|
|
<div class="code">&#xe61c;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">烟雾传感器</div>
|
|
<div class="code">&#xe610;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">市政</div>
|
|
<div class="code">&#xe6ca;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">传感器</div>
|
|
<div class="code">&#xe60f;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">温湿度传感器</div>
|
|
<div class="code">&#xe697;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">压力传感器</div>
|
|
<div class="code">&#xe60e;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">应力传感器</div>
|
|
<div class="code">&#xe611;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">沉降传感器</div>
|
|
<div class="code">&#xe601;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">压力传感器</div>
|
|
<div class="code">&#xe606;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">液位传感器</div>
|
|
<div class="code">&#xe699;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">computer</div>
|
|
<div class="code">&#xe6eb;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">empty</div>
|
|
<div class="code">&#xe6f7;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">offline</div>
|
|
<div class="code">&#xe712;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">大坝</div>
|
|
<div class="code">&#xe632;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">深部位移</div>
|
|
<div class="code">&#xe613;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">锚索传感器</div>
|
|
<div class="code">&#xe614;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">雨量传感器</div>
|
|
<div class="code">&#xe616;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">位移计</div>
|
|
<div class="code">&#xe618;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">气象站_1</div>
|
|
<div class="code">&#xe60d;</div>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="icon sc"></i>
|
|
<div class="name">深基坑</div>
|
|
<div class="code">&#xe62a;</div>
|
|
</li>
|
|
|
|
</ul>
|
|
<h2 id="unicode-">unicode引用</h2>
|
|
<hr>
|
|
|
|
<p>unicode是字体在网页端最原始的应用方式,特点是:</p>
|
|
<ul>
|
|
<li>兼容性最好,支持ie6+,及所有现代浏览器。</li>
|
|
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
|
|
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
|
|
</ul>
|
|
<blockquote>
|
|
<p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p>
|
|
</blockquote>
|
|
<p>unicode使用步骤如下:</p>
|
|
<h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3>
|
|
<pre><code class="lang-js hljs javascript">@font-face {
|
|
font-family: <span class="hljs-string">'sc'</span>;
|
|
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
|
url(<span class="hljs-string">'iconfont.svg#sc'</span>) format(<span class="hljs-string">'svg'</span>);
|
|
}
|
|
</code></pre>
|
|
<h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3>
|
|
<pre><code class="lang-js hljs javascript">.sc{
|
|
font-family:<span class="hljs-string">"sc"</span> !important;
|
|
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
</code></pre>
|
|
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
|
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"sc"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
|
|
|
<blockquote>
|
|
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
|
|
</blockquote>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|