<!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>
基于JavaScript微信小程序医院看病预约系统源码+项目说明.zip （165个子文件） 
demo.css 6KB iconfont.css 887B iconfont.eot 7KB .gitignore 145B
demo_symbol.html 5KB demo_unicode.html 5KB demo_fontclass.html 3KB slider_2.jpeg 125KB slider_1.jpeg 69KB slider_3.jpeg 56KB av-weapp-min.js 141KB showdown.js 71KB dom.js 33KB sax.js 18KB iconfont.js 11KB html2json.js 10KB dom-parser.js 8KB wxDiscode.js 7KB htmlparser.js 5KB doctors.js 5KB entities.js 5KB wxParse.js 5KB rent.js 4KB rege_login.js 4KB coronavirus.js 4KB msg.js 3KB index.js 3KB my.js 2KB myInfo.js 2KB index.js 2KB index.js 2KB myHistory.js 2KB request.js 2KB app.js 2KB rechargeHistory.js 1KB appointment.js 1KB coronavirusNews.js 1KB sas.js 1KB message.js 1KB tools.js 872B phone_number.js 857B notice.js 828B doctorDetil.js 821B doctorComment.js 743B common.js 105B app.json 2KB project.config.json 2KB rege_login.json 238B appointment.json 194B sitemap.json 191B notice.json 139B rent.json 139B index.json 48B my.json 42B doctors.json 27B doctorDetil.json 27B myInfo.json 27B coronavirusNews.json 27B msg.json 27B doctorComment.json 27B rechargeHistory.json 27B myHistory.json 27B coronavirus.json 17B index.json 2B message.json 2B 项目说明.md 581B
appointmentFail.png 25KB appointmentSuccess.png 25KB successfulConsultation.png 24KB doctor.png 6KB phone2.png 4KB home2.png 3KB icon_order.png 3KB my2.png 3KB appoint.png 3KB park.png 3KB my.png 2KB phone.png 2KB navicat.png 2KB home.png 2KB 4.png 2KB 5.png 2KB announce.png 2KB -navicat.png 2KB car2.png 2KB car.png 2KB 可见.png 1KB eye_see.png 1KB appoint1.png 1KB announce1.png 1KB park1.png 1KB 可见 2.png 1KB eye_unsee.png 1KB eye_open.png 564B eye_close.png 508B
iconfont.svg 5KB iconfont.ttf 7KB iconfont.woff 4KB wxParse.wxml 33KB rent.wxml 4KB共 165 条
- 1
- 2
资源评论
