<!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-jiaofei"></use>
</svg>
<div class="name">缴费</div>
<div class="fontclass">#icon-jiaofei</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixiu"></use>
</svg>
<div class="name">维修</div>
<div class="fontclass">#icon-weixiu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fangke"></use>
</svg>
<div class="name">访客</div>
<div class="fontclass">#icon-fangke</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiaoyouju"></use>
</svg>
<div class="name">小邮局</div>
<div class="fontclass">#icon-xiaoyouju</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gonggao"></use>
</svg>
<div class="name">公告</div>
<div class="fontclass">#icon-gonggao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-faqitousu"></use>
</svg>
<div class="name">投诉</div>
<div class="fontclass">#icon-faqitousu</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>
基于微信小程序的物业管理系统.zip （84个子文件） 
frogla-master pages second_level post 
post.wxss 1KB post.wxml 1KB post.js 2KB post.json 251B pay pay.wxss 37B pay.js 342B pay.wxml 84B pay.json 139B repairs repairs.js 2KB repairs.wxml 2KB repairs.json 139B repairs.wxss 1KB notice message message.wxss 492B message.js 711B message.json 2B message.wxml 370B notice.wxss 850B notice.json 139B notice.wxml 626B notice.js 772B visitor visitor.js 350B visitor.wxss 45B visitor.wxml 100B visitor.json 139B suggest suggest.json 138B suggest.wxss 1KB suggest.js 2KB suggest.wxml 2KB index index.wxml 1KB index.js 1KB index.json 2B index.wxss 738B my profile profile.wxml 1KB profile.wxss 591B profile.js 2KB profile.json 48B my.wxml 2KB my.wxss 1KB my.js 332B my.json 42B my_info my_info.js 720B my_info.json 2B my_info.wxml 477B my_info.wxss 370B phone_number phone_number.js 801B phone_number.wxss 483B phone_number.wxml 399B phone_number.json 48B my_suggests my_suggests.wxss 40B my_suggests.wxml 0B my_suggests.json 2B my_suggests.js 345B my_repairs my_repairs.js 343B my_repairs.json 2B my_repairs.wxml 0B my_repairs.wxss 38B app.json 1KB app.js 4KB utils util.js 460B app.wxss 1KB images font_ycz0ooretsvh1tt9 
demo_symbol.html 5KB demo_fontclass.html 3KB demo.css 6KB iconfont.ttf 7KB iconfont.css 887B iconfont.js 11KB
iconfont.svg 5KB iconfont.eot 7KB iconfont.woff 4KB demo_unicode.html 5KB slider_3.jpeg 122KB message_3.jpeg 37KB
message_2.png 234KB la.png 1MB slider_1.jpeg 75KB home.png 2KB phone.png 2KB my.png 2KB message_1.jpeg 16KB
download.zip 28KB my2.png 4KB phone2.png 4KB slider_2.jpeg 35KB home2.png 3KB资源评论
我慢慢地也过来了
- 粉丝: 9444
- 资源: 4073
最新资源
- 一个用于转换RINEX2.10 & 2,11格式至RINEX3.04版本的图形化软件
- 基于MATLAB车牌识别代码【含界面GUI】(1).zip
- tvm实现layergroup
- MATLAB深度学习工具箱：构建、训练和部署模型的全面指南
- .archivetempSunny.dll
- 第13届蓝桥杯单片机国赛满分程序.zip
- OCR技术及其应用ppt课件-概念的提出始于1929年、国内的研究从70年代才开始，目前已经达到国际先进水平
- MATLAB工具箱在HDL代码生成中的应用与实践
- ARP协议-arp协议-ARP协议的初步认识、ARP 协议的介绍、常见的ARP攻击方法、防ARP攻击的方法
- cb1642647b0b6577a2e22f9a1d894658.JPG
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
