<!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
资源评论
onnx
- 粉丝: 9963
- 资源: 5626
最新资源
- 排序算法中插入排序C++实现及其特性
- 土地出让数据集（2000-2022.12）（104.8W+ 记录，48特征）CSV
- MFC如何修改多文档视图的标签
- 无人机路径规划中基于DDPG算法的MATLAB实现与信噪比优化
- 配电网电压与无功协调优化 以最小化运行成本（包含开关动作成本、功率损耗成本以及设备运行成本）和电压偏差为目标函数，考虑分布式电源的接入，采用线性化和二次松弛方法，将非凸模型转化为二阶锥规划模型，通过优
- MATLAB轴承动力学代码（正常、外圈故障、内圈故障、滚动体故障），根据滚动轴承故障机理建模（含数学方程建立和公式推导）并在MATLAB中采用ODE45进行数值计算 可模拟不同轴承故障类型，输出时域
- comsol模拟冻土水土热力盐四个物理场耦合
- Qt源码～～EQ曲线升级版 代码写的不错，注释也很详细了
- Halcon深度图渲染
- 01前端 / Node.js
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
