Recoding
/
wxUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
微信公众号前端模版
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.
4 Commits
2 Branches
0 Tags
12 MiB
Tag: Branch: Tree: 0806c48f6a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0806c48f6a'
${ noResults }
wxUI/src/static/icon/demo_index.html

2258 lines
78 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3743010" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">订单</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">投诉举报</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">医疗_消息</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe78c;</span>
<div class="name">人体检测</div>
<div class="code-name">&amp;#xe78c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">法律咨询</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">保障</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">竖状图</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">人体成分</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">电话</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">咨询</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">保障</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">咨询</div>
<div class="code-name">&amp;#xe661;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">内容咨询（默认）</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">全息影像技术</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe660;</span>
<div class="name">帮助咨询</div>
<div class="code-name">&amp;#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">统计</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">咨询</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69a;</span>
<div class="name">心理咨询</div>
<div class="code-name">&amp;#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe848;</span>
<div class="name">24gf-chartBarUpward</div>
<div class="code-name">&amp;#xe848;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe658;</span>
<div class="name">106咨询</div>
<div class="code-name">&amp;#xe658;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7d1;</span>
<div class="name">开户咨询</div>
<div class="code-name">&amp;#xe7d1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">在线咨询</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">服务咨询</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe683;</span>
<div class="name">图文咨询</div>
<div class="code-name">&amp;#xe683;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b6;</span>
<div class="name">咨询</div>
<div class="code-name">&amp;#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">古风物件，中国风，中国结</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeda3;</span>
<div class="name">平面立体地图</div>
<div class="code-name">&amp;#xeda3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63d;</span>
<div class="name">幼儿</div>
<div class="code-name">&amp;#xe63d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">管理专家文章</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">爱心</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ca;</span>
<div class="name">门诊服务</div>
<div class="code-name">&amp;#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63c;</span>
<div class="name">人才中心</div>
<div class="code-name">&amp;#xe63c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">人员组管理</div>
<div class="code-name">&amp;#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">行政缴费</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">楼层</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">地图</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">急救</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">健康</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8b7;</span>
<div class="name">203右下角勾选</div>
<div class="code-name">&amp;#xe8b7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">预约开通模拟期权账户</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">缴费</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">dkw_账单</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe654;</span>
<div class="name">今天点击后</div>
<div class="code-name">&amp;#xe654;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe655;</span>
<div class="name">今天</div>
<div class="code-name">&amp;#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">预约</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">缴费</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe677;</span>
<div class="name">电子健康卡</div>
<div class="code-name">&amp;#xe677;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe657;</span>
<div class="name">预约</div>
<div class="code-name">&amp;#xe657;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">监理报告查看</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">施工报告编辑</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">监理报告编辑</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe783;</span>
<div class="name">预约请假1</div>
<div class="code-name">&amp;#xe783;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b3;</span>
<div class="name">缴费</div>
<div class="code-name">&amp;#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">柜台缴费</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe85b;</span>
<div class="name">机器人</div>
<div class="code-name">&amp;#xe85b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe653;</span>
<div class="name">位置</div>
<div class="code-name">&amp;#xe653;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">医院管理</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">消息</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fa;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe676;</span>
<div class="name">本次住院记录</div>
<div class="code-name">&amp;#xe676;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">社保查询</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea2a;</span>
<div class="name">病例</div>
<div class="code-name">&amp;#xea2a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a6;</span>
<div class="name">押箱</div>
<div class="code-name">&amp;#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b4;</span>
<div class="name">退押金</div>
<div class="code-name">&amp;#xe6b4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">楼梯</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65c;</span>
<div class="name">试卷-填充</div>
<div class="code-name">&amp;#xe65c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67b;</span>
<div class="name">医院</div>
<div class="code-name">&amp;#xe67b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">排队取号</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">物价</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">小程序-关闭</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">新冠疫情</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">付款记录</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">药品数据</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe638;</span>
<div class="name">牙齿</div>
<div class="code-name">&amp;#xe638;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">决策</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">影像</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">脊柱骨科</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">决策</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b5;</span>
<div class="name">决策分析</div>
<div class="code-name">&amp;#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">食堂</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe684;</span>
<div class="name">点击电子胶片</div>
<div class="code-name">&amp;#xe684;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">检查</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a7;</span>
<div class="name">治疗</div>
<div class="code-name">&amp;#xe6a7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span>
<div class="name">缩小</div>
<div class="code-name">&amp;#xe64d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64e;</span>
<div class="name">放大</div>
<div class="code-name">&amp;#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63f;</span>
<div class="name">医疗_保存报告</div>
<div class="code-name">&amp;#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">医疗_挂号</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">医疗_账单</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">就诊人管理</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1677777002031') format('woff2'),
url('iconfont.woff?t=1677777002031') format('woff'),
url('iconfont.ttf?t=1677777002031') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-online-order"></span>
<div class="name">
订单
</div>
<div class="code-name">.icon-online-order
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-complaint"></span>
<div class="name">
投诉举报
</div>
<div class="code-name">.icon-complaint
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-online-order-msg"></span>
<div class="name">
医疗_消息
</div>
<div class="code-name">.icon-online-order-msg
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-saomiao02"></span>
<div class="name">
人体检测
</div>
<div class="code-name">.icon-saomiao02
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-falvzixun"></span>
<div class="name">
法律咨询
</div>
<div class="code-name">.icon-falvzixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-medical"></span>
<div class="name">
保障
</div>
<div class="code-name">.icon-medical
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuzhuangtu"></span>
<div class="name">
竖状图
</div>
<div class="code-name">.icon-shuzhuangtu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconrtcf"></span>
<div class="name">
人体成分
</div>
<div class="code-name">.icon-iconrtcf
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye1"></span>
<div class="name">
电话
</div>
<div class="code-name">.icon-shouye1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye2"></span>
<div class="name">
咨询
</div>
<div class="code-name">.icon-shouye2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-baozhang"></span>
<div class="name">
保障
</div>
<div class="code-name">.icon-baozhang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-msg"></span>
<div class="name">
咨询
</div>
<div class="code-name">.icon-msg
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-neirongzixunmoren"></span>
<div class="name">
内容咨询（默认）
</div>
<div class="code-name">.icon-neirongzixunmoren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-saomiao01"></span>
<div class="name">
全息影像技术
</div>
<div class="code-name">.icon-saomiao01
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bangzhuzixun"></span>
<div class="name">
帮助咨询
</div>
<div class="code-name">.icon-bangzhuzixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tongji"></span>
<div class="name">
统计
</div>
<div class="code-name">.icon-tongji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zixun1"></span>
<div class="name">
咨询
</div>
<div class="code-name">.icon-zixun1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-airudiantubiaohuizhi-zhuanqu_xinlizixun"></span>
<div class="name">
心理咨询
</div>
<div class="code-name">.icon-airudiantubiaohuizhi-zhuanqu_xinlizixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-24gf-chartBarUpward"></span>
<div class="name">
24gf-chartBarUpward
</div>
<div class="code-name">.icon-24gf-chartBarUpward
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zixun2"></span>
<div class="name">
106咨询
</div>
<div class="code-name">.icon-zixun2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaihuzixun"></span>
<div class="name">
开户咨询
</div>
<div class="code-name">.icon-kaihuzixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zaixianzixun"></span>
<div class="name">
在线咨询
</div>
<div class="code-name">.icon-zaixianzixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-online-doctor"></span>
<div class="name">
服务咨询
</div>
<div class="code-name">.icon-online-doctor
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuwenzixun"></span>
<div class="name">
图文咨询
</div>
<div class="code-name">.icon-tuwenzixun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zixun3"></span>
<div class="name">
咨询
</div>
<div class="code-name">.icon-zixun3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clogo"></span>
<div class="name">
古风物件，中国风，中国结
</div>
<div class="code-name">.icon-clogo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-plan"></span>
<div class="name">
平面立体地图
</div>
<div class="code-name">.icon-plan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye"></span>
<div class="name">
幼儿
</div>
<div class="code-name">.icon-shouye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhuangjia"></span>
<div class="name">
管理专家文章
</div>
<div class="code-name">.icon-zhuangjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yiyuan"></span>
<div class="name">
爱心
</div>
<div class="code-name">.icon-yiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi"></span>
<div class="name">
门诊服务
</div>
<div class="code-name">.icon-keshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-rencai"></span>
<div class="name">
人才中心
</div>
<div class="code-name">.icon-rencai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-renyuanzuguanli"></span>
<div class="name">
人员组管理
</div>
<div class="code-name">.icon-renyuanzuguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiao-fei_fff"></span>
<div class="name">
行政缴费
</div>
<div class="code-name">.icon-jiao-fei_fff
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-louceng"></span>
<div class="name">
楼层
</div>
<div class="code-name">.icon-louceng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ditu"></span>
<div class="name">
地图
</div>
<div class="code-name">.icon-ditu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jijiu"></span>
<div class="name">
急救
</div>
<div class="code-name">.icon-jijiu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiankang"></span>
<div class="name">
健康
</div>
<div class="code-name">.icon-jiankang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-youxiajiaogouxuan"></span>
<div class="name">
203右下角勾选
</div>
<div class="code-name">.icon-youxiajiaogouxuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yue-yue-ji-lu"></span>
<div class="name">
预约开通模拟期权账户
</div>
<div class="code-name">.icon-yue-yue-ji-lu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiao-fei"></span>
<div class="name">
缴费
</div>
<div class="code-name">.icon-jiao-fei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiao-fei-ji-lu"></span>
<div class="name">
dkw_账单
</div>
<div class="code-name">.icon-jiao-fei-ji-lu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jin-ri"></span>
<div class="name">
今天点击后
</div>
<div class="code-name">.icon-jin-ri
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jin-ri-01"></span>
<div class="name">
今天
</div>
<div class="code-name">.icon-jin-ri-01
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yu-yue-02"></span>
<div class="name">
预约
</div>
<div class="code-name">.icon-yu-yue-02
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-card-jiao-fei"></span>
<div class="name">
缴费
</div>
<div class="code-name">.icon-card-jiao-fei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianzijiankangka"></span>
<div class="name">
电子健康卡
</div>
<div class="code-name">.icon-dianzijiankangka
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yu-yue-03"></span>
<div class="name">
预约
</div>
<div class="code-name">.icon-yu-yue-03
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bao-gao"></span>
<div class="name">
监理报告查看
</div>
<div class="code-name">.icon-bao-gao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bao-bao-she-zhi"></span>
<div class="name">
施工报告编辑
</div>
<div class="code-name">.icon-bao-bao-she-zhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bao-gao-bian-ji"></span>
<div class="name">
监理报告编辑
</div>
<div class="code-name">.icon-bao-gao-bian-ji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yu-yue"></span>
<div class="name">
预约请假1
</div>
<div class="code-name">.icon-yu-yue
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pay"></span>
<div class="name">
缴费
</div>
<div class="code-name">.icon-pay
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiao-fei-02"></span>
<div class="name">
柜台缴费
</div>
<div class="code-name">.icon-jiao-fei-02
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ji-qi-ren"></span>
<div class="name">
机器人
</div>
<div class="code-name">.icon-ji-qi-ren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weizhi-tianchong"></span>
<div class="name">
位置
</div>
<div class="code-name">.icon-weizhi-tianchong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yi-yuan-icon"></span>
<div class="name">
医院管理
</div>
<div class="code-name">.icon-yi-yuan-icon
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiao-xi"></span>
<div class="name">
消息
</div>
<div class="code-name">.icon-xiao-xi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yi-shen"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yi-shen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhu-yuan-ji-lu"></span>
<div class="name">
本次住院记录
</div>
<div class="code-name">.icon-zhu-yuan-ji-lu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-she-bao"></span>
<div class="name">
社保查询
</div>
<div class="code-name">.icon-she-bao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bingli"></span>
<div class="name">
病例
</div>
<div class="code-name">.icon-bingli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ya-jin-02"></span>
<div class="name">
押箱
</div>
<div class="code-name">.icon-ya-jin-02
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ya-jin"></span>
<div class="name">
退押金
</div>
<div class="code-name">.icon-ya-jin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-floor"></span>
<div class="name">
楼梯
</div>
<div class="code-name">.icon-floor
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wen-juan"></span>
<div class="name">
试卷-填充
</div>
<div class="code-name">.icon-wen-juan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hospital"></span>
<div class="name">
医院
</div>
<div class="code-name">.icon-hospital
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qu-xiao"></span>
<div class="name">
排队取号
</div>
<div class="code-name">.icon-qu-xiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wujia"></span>
<div class="name">
物价
</div>
<div class="code-name">.icon-wujia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiaochengxu-guanbi"></span>
<div class="name">
小程序-关闭
</div>
<div class="code-name">.icon-xiaochengxu-guanbi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xgyq"></span>
<div class="name">
新冠疫情
</div>
<div class="code-name">.icon-xgyq
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fukuanjilu"></span>
<div class="name">
付款记录
</div>
<div class="code-name">.icon-fukuanjilu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yaopinshuju"></span>
<div class="name">
药品数据
</div>
<div class="code-name">.icon-yaopinshuju
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yachi"></span>
<div class="name">
牙齿
</div>
<div class="code-name">.icon-yachi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juece"></span>
<div class="name">
决策
</div>
<div class="code-name">.icon-juece
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingxiang"></span>
<div class="name">
影像
</div>
<div class="code-name">.icon-yingxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jizhuguke"></span>
<div class="name">
脊柱骨科
</div>
<div class="code-name">.icon-jizhuguke
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juece1"></span>
<div class="name">
决策
</div>
<div class="code-name">.icon-juece1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juecefenxi"></span>
<div class="name">
决策分析
</div>
<div class="code-name">.icon-juecefenxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shitang"></span>
<div class="name">
食堂
</div>
<div class="code-name">.icon-shitang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianjidianzijiaopian"></span>
<div class="name">
点击电子胶片
</div>
<div class="code-name">.icon-dianjidianzijiaopian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiancha"></span>
<div class="name">
检查
</div>
<div class="code-name">.icon-jiancha
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhiliao"></span>
<div class="name">
治疗
</div>
<div class="code-name">.icon-zhiliao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-suoxiao"></span>
<div class="name">
缩小
</div>
<div class="code-name">.icon-suoxiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangda"></span>
<div class="name">
放大
</div>
<div class="code-name">.icon-fangda
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-report_view"></span>
<div class="name">
医疗_保存报告
</div>
<div class="code-name">.icon-report_view
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-reg_order"></span>
<div class="name">
医疗_挂号
</div>
<div class="code-name">.icon-reg_order
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-recipe_order"></span>
<div class="name">
医疗_账单
</div>
<div class="code-name">.icon-recipe_order
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-idcard"></span>
<div class="name">
就诊人管理
</div>
<div class="code-name">.icon-idcard
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-online-order"></use>
</svg>
<div class="name">订单</div>
<div class="code-name">#icon-online-order</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-complaint"></use>
</svg>
<div class="name">投诉举报</div>
<div class="code-name">#icon-complaint</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-online-order-msg"></use>
</svg>
<div class="name">医疗_消息</div>
<div class="code-name">#icon-online-order-msg</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-saomiao02"></use>
</svg>
<div class="name">人体检测</div>
<div class="code-name">#icon-saomiao02</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-falvzixun"></use>
</svg>
<div class="name">法律咨询</div>
<div class="code-name">#icon-falvzixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-medical"></use>
</svg>
<div class="name">保障</div>
<div class="code-name">#icon-medical</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuzhuangtu"></use>
</svg>
<div class="name">竖状图</div>
<div class="code-name">#icon-shuzhuangtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconrtcf"></use>
</svg>
<div class="name">人体成分</div>
<div class="code-name">#icon-iconrtcf</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye1"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#icon-shouye1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye2"></use>
</svg>
<div class="name">咨询</div>
<div class="code-name">#icon-shouye2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-baozhang"></use>
</svg>
<div class="name">保障</div>
<div class="code-name">#icon-baozhang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-msg"></use>
</svg>
<div class="name">咨询</div>
<div class="code-name">#icon-msg</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-neirongzixunmoren"></use>
</svg>
<div class="name">内容咨询（默认）</div>
<div class="code-name">#icon-neirongzixunmoren</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-saomiao01"></use>
</svg>
<div class="name">全息影像技术</div>
<div class="code-name">#icon-saomiao01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bangzhuzixun"></use>
</svg>
<div class="name">帮助咨询</div>
<div class="code-name">#icon-bangzhuzixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tongji"></use>
</svg>
<div class="name">统计</div>
<div class="code-name">#icon-tongji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zixun1"></use>
</svg>
<div class="name">咨询</div>
<div class="code-name">#icon-zixun1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-airudiantubiaohuizhi-zhuanqu_xinlizixun"></use>
</svg>
<div class="name">心理咨询</div>
<div class="code-name">#icon-airudiantubiaohuizhi-zhuanqu_xinlizixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-24gf-chartBarUpward"></use>
</svg>
<div class="name">24gf-chartBarUpward</div>
<div class="code-name">#icon-24gf-chartBarUpward</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zixun2"></use>
</svg>
<div class="name">106咨询</div>
<div class="code-name">#icon-zixun2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kaihuzixun"></use>
</svg>
<div class="name">开户咨询</div>
<div class="code-name">#icon-kaihuzixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zaixianzixun"></use>
</svg>
<div class="name">在线咨询</div>
<div class="code-name">#icon-zaixianzixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-online-doctor"></use>
</svg>
<div class="name">服务咨询</div>
<div class="code-name">#icon-online-doctor</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tuwenzixun"></use>
</svg>
<div class="name">图文咨询</div>
<div class="code-name">#icon-tuwenzixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zixun3"></use>
</svg>
<div class="name">咨询</div>
<div class="code-name">#icon-zixun3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clogo"></use>
</svg>
<div class="name">古风物件，中国风，中国结</div>
<div class="code-name">#icon-clogo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-plan"></use>
</svg>
<div class="name">平面立体地图</div>
<div class="code-name">#icon-plan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
<div class="name">幼儿</div>
<div class="code-name">#icon-shouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhuangjia"></use>
</svg>
<div class="name">管理专家文章</div>
<div class="code-name">#icon-zhuangjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yiyuan"></use>
</svg>
<div class="name">爱心</div>
<div class="code-name">#icon-yiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshi"></use>
</svg>
<div class="name">门诊服务</div>
<div class="code-name">#icon-keshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-rencai"></use>
</svg>
<div class="name">人才中心</div>
<div class="code-name">#icon-rencai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-renyuanzuguanli"></use>
</svg>
<div class="name">人员组管理</div>
<div class="code-name">#icon-renyuanzuguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiao-fei_fff"></use>
</svg>
<div class="name">行政缴费</div>
<div class="code-name">#icon-jiao-fei_fff</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-louceng"></use>
</svg>
<div class="name">楼层</div>
<div class="code-name">#icon-louceng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ditu"></use>
</svg>
<div class="name">地图</div>
<div class="code-name">#icon-ditu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jijiu"></use>
</svg>
<div class="name">急救</div>
<div class="code-name">#icon-jijiu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiankang"></use>
</svg>
<div class="name">健康</div>
<div class="code-name">#icon-jiankang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youxiajiaogouxuan"></use>
</svg>
<div class="name">203右下角勾选</div>
<div class="code-name">#icon-youxiajiaogouxuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yue-yue-ji-lu"></use>
</svg>
<div class="name">预约开通模拟期权账户</div>
<div class="code-name">#icon-yue-yue-ji-lu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiao-fei"></use>
</svg>
<div class="name">缴费</div>
<div class="code-name">#icon-jiao-fei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiao-fei-ji-lu"></use>
</svg>
<div class="name">dkw_账单</div>
<div class="code-name">#icon-jiao-fei-ji-lu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jin-ri"></use>
</svg>
<div class="name">今天点击后</div>
<div class="code-name">#icon-jin-ri</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jin-ri-01"></use>
</svg>
<div class="name">今天</div>
<div class="code-name">#icon-jin-ri-01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yu-yue-02"></use>
</svg>
<div class="name">预约</div>
<div class="code-name">#icon-yu-yue-02</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-card-jiao-fei"></use>
</svg>
<div class="name">缴费</div>
<div class="code-name">#icon-card-jiao-fei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianzijiankangka"></use>
</svg>
<div class="name">电子健康卡</div>
<div class="code-name">#icon-dianzijiankangka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yu-yue-03"></use>
</svg>
<div class="name">预约</div>
<div class="code-name">#icon-yu-yue-03</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bao-gao"></use>
</svg>
<div class="name">监理报告查看</div>
<div class="code-name">#icon-bao-gao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bao-bao-she-zhi"></use>
</svg>
<div class="name">施工报告编辑</div>
<div class="code-name">#icon-bao-bao-she-zhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bao-gao-bian-ji"></use>
</svg>
<div class="name">监理报告编辑</div>
<div class="code-name">#icon-bao-gao-bian-ji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yu-yue"></use>
</svg>
<div class="name">预约请假1</div>
<div class="code-name">#icon-yu-yue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pay"></use>
</svg>
<div class="name">缴费</div>
<div class="code-name">#icon-pay</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiao-fei-02"></use>
</svg>
<div class="name">柜台缴费</div>
<div class="code-name">#icon-jiao-fei-02</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ji-qi-ren"></use>
</svg>
<div class="name">机器人</div>
<div class="code-name">#icon-ji-qi-ren</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi-tianchong"></use>
</svg>
<div class="name">位置</div>
<div class="code-name">#icon-weizhi-tianchong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yi-yuan-icon"></use>
</svg>
<div class="name">医院管理</div>
<div class="code-name">#icon-yi-yuan-icon</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiao-xi"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#icon-xiao-xi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yi-shen"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yi-shen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhu-yuan-ji-lu"></use>
</svg>
<div class="name">本次住院记录</div>
<div class="code-name">#icon-zhu-yuan-ji-lu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-she-bao"></use>
</svg>
<div class="name">社保查询</div>
<div class="code-name">#icon-she-bao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bingli"></use>
</svg>
<div class="name">病例</div>
<div class="code-name">#icon-bingli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ya-jin-02"></use>
</svg>
<div class="name">押箱</div>
<div class="code-name">#icon-ya-jin-02</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ya-jin"></use>
</svg>
<div class="name">退押金</div>
<div class="code-name">#icon-ya-jin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-floor"></use>
</svg>
<div class="name">楼梯</div>
<div class="code-name">#icon-floor</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wen-juan"></use>
</svg>
<div class="name">试卷-填充</div>
<div class="code-name">#icon-wen-juan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hospital"></use>
</svg>
<div class="name">医院</div>
<div class="code-name">#icon-hospital</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qu-xiao"></use>
</svg>
<div class="name">排队取号</div>
<div class="code-name">#icon-qu-xiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wujia"></use>
</svg>
<div class="name">物价</div>
<div class="code-name">#icon-wujia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiaochengxu-guanbi"></use>
</svg>
<div class="name">小程序-关闭</div>
<div class="code-name">#icon-xiaochengxu-guanbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xgyq"></use>
</svg>
<div class="name">新冠疫情</div>
<div class="code-name">#icon-xgyq</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fukuanjilu"></use>
</svg>
<div class="name">付款记录</div>
<div class="code-name">#icon-fukuanjilu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yaopinshuju"></use>
</svg>
<div class="name">药品数据</div>
<div class="code-name">#icon-yaopinshuju</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yachi"></use>
</svg>
<div class="name">牙齿</div>
<div class="code-name">#icon-yachi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juece"></use>
</svg>
<div class="name">决策</div>
<div class="code-name">#icon-juece</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingxiang"></use>
</svg>
<div class="name">影像</div>
<div class="code-name">#icon-yingxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jizhuguke"></use>
</svg>
<div class="name">脊柱骨科</div>
<div class="code-name">#icon-jizhuguke</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juece1"></use>
</svg>
<div class="name">决策</div>
<div class="code-name">#icon-juece1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juecefenxi"></use>
</svg>
<div class="name">决策分析</div>
<div class="code-name">#icon-juecefenxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shitang"></use>
</svg>
<div class="name">食堂</div>
<div class="code-name">#icon-shitang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianjidianzijiaopian"></use>
</svg>
<div class="name">点击电子胶片</div>
<div class="code-name">#icon-dianjidianzijiaopian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiancha"></use>
</svg>
<div class="name">检查</div>
<div class="code-name">#icon-jiancha</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhiliao"></use>
</svg>
<div class="name">治疗</div>
<div class="code-name">#icon-zhiliao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suoxiao"></use>
</svg>
<div class="name">缩小</div>
<div class="code-name">#icon-suoxiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangda"></use>
</svg>
<div class="name">放大</div>
<div class="code-name">#icon-fangda</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-report_view"></use>
</svg>
<div class="name">医疗_保存报告</div>
<div class="code-name">#icon-report_view</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-reg_order"></use>
</svg>
<div class="name">医疗_挂号</div>
<div class="code-name">#icon-reg_order</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-recipe_order"></use>
</svg>
<div class="name">医疗_账单</div>
<div class="code-name">#icon-recipe_order</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-idcard"></use>
</svg>
<div class="name">就诊人管理</div>
<div class="code-name">#icon-idcard</div>
</li>
</ul>
<div class="article markdown">
<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="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>