<!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>