File: /usr/home/qxu1650030446/htdocs/wp-content/themes/aly/iconfont/demo_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<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>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></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=1649591" 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"></span>
<div class="name">用户 </div>
<div class="code-name">&#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">管理</div>
<div class="code-name">&#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">姓名</div>
<div class="code-name">&#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网盘</div>
<div class="code-name">&#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">邮件</div>
<div class="code-name">&#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">财税</div>
<div class="code-name">&#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe912;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">域名</div>
<div class="code-name">&#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">动态</div>
<div class="code-name">&#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">容量</div>
<div class="code-name">&#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">API接口</div>
<div class="code-name">&#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">撤回</div>
<div class="code-name">&#xe6bf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">登录 密码 phone</div>
<div class="code-name">&#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">管理员</div>
<div class="code-name">&#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">限制出境</div>
<div class="code-name">&#xe6b7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">女 娃娃 秘书</div>
<div class="code-name">&#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">品牌形象</div>
<div class="code-name">&#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">归档</div>
<div class="code-name">&#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">会议室</div>
<div class="code-name">&#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">回收站</div>
<div class="code-name">&#xe63d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">监控</div>
<div class="code-name">&#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">企业</div>
<div class="code-name">&#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钉钉</div>
<div class="code-name">&#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设 置</div>
<div class="code-name">&#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">用户数量</div>
<div class="code-name">&#xe644;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网盘</div>
<div class="code-name">&#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">销售价</div>
<div class="code-name">&#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">零售价</div>
<div class="code-name">&#xe7ca;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">保存</div>
<div class="code-name">&#xe78a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">退</div>
<div class="code-name">&#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">标签</div>
<div class="code-name">&#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">撤回</div>
<div class="code-name">&#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">服务</div>
<div class="code-name">&#xe676;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">时间</div>
<div class="code-name">&#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">服务</div>
<div class="code-name">&#xe66c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提醒 (3)</div>
<div class="code-name">&#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">公司</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">查询</div>
<div class="code-name">&#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">邮箱</div>
<div class="code-name">&#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">发送</div>
<div class="code-name">&#xe696;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">个人办公</div>
<div class="code-name">&#xe698;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">云下载</div>
<div class="code-name">&#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">气泡</div>
<div class="code-name">&#xe69e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">自定义</div>
<div class="code-name">&#xe69f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">闭眼</div>
<div class="code-name">&#xe6c4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">编辑流程</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">公告</div>
<div class="code-name">&#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">喇叭</div>
<div class="code-name">&#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">用户</div>
<div class="code-name">&#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">稳定</div>
<div class="code-name">&#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">资料</div>
<div class="code-name">&#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">沽清设置</div>
<div class="code-name">&#xef4c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">数据库备份</div>
<div class="code-name">&#xef4d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">站点信息</div>
<div class="code-name">&#xef4e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">交班</div>
<div class="code-name">&#xef4f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">营销方案</div>
<div class="code-name">&#xef50;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">日结</div>
<div class="code-name">&#xef51;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1_画板 1</div>
<div class="code-name">&#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-05</div>
<div class="code-name">&#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-04</div>
<div class="code-name">&#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-09</div>
<div class="code-name">&#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-10</div>
<div class="code-name">&#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-22</div>
<div class="code-name">&#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-25</div>
<div class="code-name">&#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-27</div>
<div class="code-name">&#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">1-28</div>
<div class="code-name">&#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">安全</div>
<div class="code-name">&#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">存储</div>
<div class="code-name">&#xe745;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">付款</div>
<div class="code-name">&#xe675;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">账户资料</div>
<div class="code-name">&#xe6a8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe695;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱袋金币</div>
<div class="code-name">&#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">账号</div>
<div class="code-name">&#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">游戏</div>
<div class="code-name">&#xe69d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">账号管理</div>
<div class="code-name">&#xe71b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提交订单</div>
<div class="code-name">&#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">客服</div>
<div class="code-name">&#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网络</div>
<div class="code-name">&#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">游戏</div>
<div class="code-name">&#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">药品零售企业</div>
<div class="code-name">&#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">极速响应</div>
<div class="code-name">&#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">快速开店</div>
<div class="code-name">&#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">超市</div>
<div class="code-name">&#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱包</div>
<div class="code-name">&#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网络</div>
<div class="code-name">&#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网络</div>
<div class="code-name">&#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电话咨询</div>
<div class="code-name">&#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">技术</div>
<div class="code-name">&#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">视频</div>
<div class="code-name">&#xe646;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱包</div>
<div class="code-name">&#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">视频</div>
<div class="code-name">&#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">游戏</div>
<div class="code-name">&#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">安全</div>
<div class="code-name">&#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">网络</div>
<div class="code-name">&#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">计算机平台/云</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">返回首页</div>
<div class="code-name">&#xe677;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">测试用例1</div>
<div class="code-name">&#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">代理商管理</div>
<div class="code-name">&#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">退款</div>
<div class="code-name">&#xe647;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">服务商</div>
<div class="code-name">&#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱包</div>
<div class="code-name">&#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">详情</div>
<div class="code-name">&#xe611;</div>
</li>
</ul>
<div class="article markdown">
<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">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</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"
><span class="iconfont">&#x33;</span>
</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 iconyonghu1"></span>
<div class="name">
用户
</div>
<div class="code-name">.iconyonghu1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconguanli"></span>
<div class="name">
管理
</div>
<div class="code-name">.iconguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxingming"></span>
<div class="name">
姓名
</div>
<div class="code-name">.iconxingming
</div>
</li>
<li class="dib">
<span class="icon iconfont icondisc"></span>
<div class="name">
网盘
</div>
<div class="code-name">.icondisc
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyoujian"></span>
<div class="name">
邮件
</div>
<div class="code-name">.iconyoujian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconcaishui"></span>
<div class="name">
财税
</div>
<div class="code-name">.iconcaishui
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouji1"></span>
<div class="name">
手机
</div>
<div class="code-name">.iconshouji1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyuming"></span>
<div class="name">
域名
</div>
<div class="code-name">.iconyuming
</div>
</li>
<li class="dib">
<span class="icon iconfont iconBgAnimation"></span>
<div class="name">
动态
</div>
<div class="code-name">.iconBgAnimation
</div>
</li>
<li class="dib">
<span class="icon iconfont iconrongliang"></span>
<div class="name">
容量
</div>
<div class="code-name">.iconrongliang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconAPIjiekou"></span>
<div class="name">
API接口
</div>
<div class="code-name">.iconAPIjiekou
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchehui1"></span>
<div class="name">
撤回
</div>
<div class="code-name">.iconchehui1
</div>
</li>
<li class="dib">
<span class="icon iconfont icondenglumimaphone"></span>
<div class="name">
登录 密码 phone
</div>
<div class="code-name">.icondenglumimaphone
</div>
</li>
<li class="dib">
<span class="icon iconfont iconclas-manage"></span>
<div class="name">
管理员
</div>
<div class="code-name">.iconclas-manage
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxianzhichujing"></span>
<div class="name">
限制出境
</div>
<div class="code-name">.iconxianzhichujing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconnvwawamishu"></span>
<div class="name">
女 娃娃 秘书
</div>
<div class="code-name">.iconnvwawamishu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpinpaixingxiang"></span>
<div class="name">
品牌形象
</div>
<div class="code-name">.iconpinpaixingxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconguidang"></span>
<div class="name">
归档
</div>
<div class="code-name">.iconguidang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhuiyishi"></span>
<div class="name">
会议室
</div>
<div class="code-name">.iconhuiyishi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhuishouzhan"></span>
<div class="name">
回收站
</div>
<div class="code-name">.iconhuishouzhan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjiankong"></span>
<div class="name">
监控
</div>
<div class="code-name">.iconjiankong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqiye"></span>
<div class="name">
企业
</div>
<div class="code-name">.iconqiye
</div>
</li>
<li class="dib">
<span class="icon iconfont icondingding"></span>
<div class="name">
钉钉
</div>
<div class="code-name">.icondingding
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshezhi"></span>
<div class="name">
设 置
</div>
<div class="code-name">.iconshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyonghushuliang"></span>
<div class="name">
用户数量
</div>
<div class="code-name">.iconyonghushuliang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwangpan"></span>
<div class="name">
网盘
</div>
<div class="code-name">.iconwangpan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxiaoshoujia"></span>
<div class="name">
销售价
</div>
<div class="code-name">.iconxiaoshoujia
</div>
</li>
<li class="dib">
<span class="icon iconfont iconlingshoujia"></span>
<div class="name">
零售价
</div>
<div class="code-name">.iconlingshoujia
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbaocun"></span>
<div class="name">
保存
</div>
<div class="code-name">.iconbaocun
</div>
</li>
<li class="dib">
<span class="icon iconfont icontui"></span>
<div class="name">
退
</div>
<div class="code-name">.icontui
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbiaoqian"></span>
<div class="name">
标签
</div>
<div class="code-name">.iconbiaoqian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchehui"></span>
<div class="name">
撤回
</div>
<div class="code-name">.iconchehui
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuwu"></span>
<div class="name">
服务
</div>
<div class="code-name">.iconfuwu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshijian"></span>
<div class="name">
时间
</div>
<div class="code-name">.iconshijian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuwu1"></span>
<div class="name">
服务
</div>
<div class="code-name">.iconfuwu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icontixing"></span>
<div class="name">
提醒 (3)
</div>
<div class="code-name">.icontixing
</div>
</li>
<li class="dib">
<span class="icon iconfont icongongsi"></span>
<div class="name">
公司
</div>
<div class="code-name">.icongongsi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfontxinxichaxun"></span>
<div class="name">
查询
</div>
<div class="code-name">.iconiconfontxinxichaxun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyouxiang"></span>
<div class="name">
邮箱
</div>
<div class="code-name">.iconyouxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfasong"></span>
<div class="name">
发送
</div>
<div class="code-name">.iconfasong
</div>
</li>
<li class="dib">
<span class="icon iconfont icongerenbangong"></span>
<div class="name">
个人办公
</div>
<div class="code-name">.icongerenbangong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyunxiazai"></span>
<div class="name">
云下载
</div>
<div class="code-name">.iconyunxiazai
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqipao"></span>
<div class="name">
气泡
</div>
<div class="code-name">.iconqipao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzidingyi"></span>
<div class="name">
自定义
</div>
<div class="code-name">.iconzidingyi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbiyan"></span>
<div class="name">
闭眼
</div>
<div class="code-name">.iconbiyan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbianjiliucheng"></span>
<div class="name">
编辑流程
</div>
<div class="code-name">.iconbianjiliucheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icongonggao"></span>
<div class="name">
公告
</div>
<div class="code-name">.icongonggao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconlaba"></span>
<div class="name">
喇叭
</div>
<div class="code-name">.iconlaba
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyonghu"></span>
<div class="name">
用户
</div>
<div class="code-name">.iconyonghu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwending"></span>
<div class="name">
稳定
</div>
<div class="code-name">.iconwending
</div>
</li>
<li class="dib">
<span class="icon iconfont iconziliao"></span>
<div class="name">
资料
</div>
<div class="code-name">.iconziliao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconguqingshezhi"></span>
<div class="name">
沽清设置
</div>
<div class="code-name">.iconguqingshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshujukubeifen"></span>
<div class="name">
数据库备份
</div>
<div class="code-name">.iconshujukubeifen
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhandianxinxi"></span>
<div class="name">
站点信息
</div>
<div class="code-name">.iconzhandianxinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjiaoban"></span>
<div class="name">
交班
</div>
<div class="code-name">.iconjiaoban
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyingxiaofangan"></span>
<div class="name">
营销方案
</div>
<div class="code-name">.iconyingxiaofangan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconrijie"></span>
<div class="name">
日结
</div>
<div class="code-name">.iconrijie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1_huaban1"></span>
<div class="name">
1_画板 1
</div>
<div class="code-name">.icon1_huaban1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-05"></span>
<div class="name">
1-05
</div>
<div class="code-name">.icon1-05
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-04"></span>
<div class="name">
1-04
</div>
<div class="code-name">.icon1-04
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-09"></span>
<div class="name">
1-09
</div>
<div class="code-name">.icon1-09
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-10"></span>
<div class="name">
1-10
</div>
<div class="code-name">.icon1-10
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-22"></span>
<div class="name">
1-22
</div>
<div class="code-name">.icon1-22
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-25"></span>
<div class="name">
1-25
</div>
<div class="code-name">.icon1-25
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-27"></span>
<div class="name">
1-27
</div>
<div class="code-name">.icon1-27
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1-28"></span>
<div class="name">
1-28
</div>
<div class="code-name">.icon1-28
</div>
</li>
<li class="dib">
<span class="icon iconfont iconanquan1"></span>
<div class="name">
安全
</div>
<div class="code-name">.iconanquan1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconcunchu"></span>
<div class="name">
存储
</div>
<div class="code-name">.iconcunchu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfukuan"></span>
<div class="name">
付款
</div>
<div class="code-name">.iconfukuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhanghuziliao"></span>
<div class="name">
账户资料
</div>
<div class="code-name">.iconzhanghuziliao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconphone"></span>
<div class="name">
手机
</div>
<div class="code-name">.iconphone
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqiandaijinbi"></span>
<div class="name">
钱袋金币
</div>
<div class="code-name">.iconqiandaijinbi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouji"></span>
<div class="name">
手机
</div>
<div class="code-name">.iconshouji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhanghao"></span>
<div class="name">
账号
</div>
<div class="code-name">.iconzhanghao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconairudiantubiaohuizhi-zhuanqu_youxi"></span>
<div class="name">
游戏
</div>
<div class="code-name">.iconairudiantubiaohuizhi-zhuanqu_youxi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhanghaoguanli"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.iconzhanghaoguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icontubiao_tijiaodingdan"></span>
<div class="name">
提交订单
</div>
<div class="code-name">.icontubiao_tijiaodingdan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkefu"></span>
<div class="name">
客服
</div>
<div class="code-name">.iconkefu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconziyuan"></span>
<div class="name">
网络
</div>
<div class="code-name">.iconziyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyouxi"></span>
<div class="name">
游戏
</div>
<div class="code-name">.iconyouxi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyaopinlingshouqiye"></span>
<div class="name">
药品零售企业
</div>
<div class="code-name">.iconyaopinlingshouqiye
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjisuxiangying"></span>
<div class="name">
极速响应
</div>
<div class="code-name">.iconjisuxiangying
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkuaisukaidian"></span>
<div class="name">
快速开店
</div>
<div class="code-name">.iconkuaisukaidian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchaoshi"></span>
<div class="name">
超市
</div>
<div class="code-name">.iconchaoshi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqianbao-"></span>
<div class="name">
钱包
</div>
<div class="code-name">.iconqianbao-
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwangluo"></span>
<div class="name">
网络
</div>
<div class="code-name">.iconwangluo
</div>
</li>
<li class="dib">
<span class="icon iconfont iconnetwork"></span>
<div class="name">
网络
</div>
<div class="code-name">.iconnetwork
</div>
</li>
<li class="dib">
<span class="icon iconfont icondianhuazixun"></span>
<div class="name">
电话咨询
</div>
<div class="code-name">.icondianhuazixun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconjishu"></span>
<div class="name">
技术
</div>
<div class="code-name">.iconjishu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.iconshipin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqianbao"></span>
<div class="name">
钱包
</div>
<div class="code-name">.iconqianbao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshipin1"></span>
<div class="name">
视频
</div>
<div class="code-name">.iconshipin1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyouxi1"></span>
<div class="name">
游戏
</div>
<div class="code-name">.iconyouxi1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconanquan"></span>
<div class="name">
安全
</div>
<div class="code-name">.iconanquan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwangluo1"></span>
<div class="name">
网络
</div>
<div class="code-name">.iconwangluo1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzu"></span>
<div class="name">
计算机平台/云
</div>
<div class="code-name">.iconzu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfanhuishouye"></span>
<div class="name">
返回首页
</div>
<div class="code-name">.iconfanhuishouye
</div>
</li>
<li class="dib">
<span class="icon iconfont iconceshiyongli"></span>
<div class="name">
测试用例1
</div>
<div class="code-name">.iconceshiyongli
</div>
</li>
<li class="dib">
<span class="icon iconfont icondailishangguanli"></span>
<div class="name">
代理商管理
</div>
<div class="code-name">.icondailishangguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icontuikuan"></span>
<div class="name">
退款
</div>
<div class="code-name">.icontuikuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuwushang"></span>
<div class="name">
服务商
</div>
<div class="code-name">.iconfuwushang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqianbao1"></span>
<div class="name">
钱包
</div>
<div class="code-name">.iconqianbao1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxiangqing"></span>
<div class="name">
详情
</div>
<div class="code-name">.iconxiangqing
</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>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><span class="iconfont iconxxx"></span>
</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="#iconyonghu1"></use>
</svg>
<div class="name">用户 </div>
<div class="code-name">#iconyonghu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconguanli"></use>
</svg>
<div class="name">管理</div>
<div class="code-name">#iconguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxingming"></use>
</svg>
<div class="name">姓名</div>
<div class="code-name">#iconxingming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondisc"></use>
</svg>
<div class="name">网盘</div>
<div class="code-name">#icondisc</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyoujian"></use>
</svg>
<div class="name">邮件</div>
<div class="code-name">#iconyoujian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconcaishui"></use>
</svg>
<div class="name">财税</div>
<div class="code-name">#iconcaishui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouji1"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#iconshouji1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyuming"></use>
</svg>
<div class="name">域名</div>
<div class="code-name">#iconyuming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconBgAnimation"></use>
</svg>
<div class="name">动态</div>
<div class="code-name">#iconBgAnimation</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconrongliang"></use>
</svg>
<div class="name">容量</div>
<div class="code-name">#iconrongliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconAPIjiekou"></use>
</svg>
<div class="name">API接口</div>
<div class="code-name">#iconAPIjiekou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchehui1"></use>
</svg>
<div class="name">撤回</div>
<div class="code-name">#iconchehui1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondenglumimaphone"></use>
</svg>
<div class="name">登录 密码 phone</div>
<div class="code-name">#icondenglumimaphone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconclas-manage"></use>
</svg>
<div class="name">管理员</div>
<div class="code-name">#iconclas-manage</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxianzhichujing"></use>
</svg>
<div class="name">限制出境</div>
<div class="code-name">#iconxianzhichujing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconnvwawamishu"></use>
</svg>
<div class="name">女 娃娃 秘书</div>
<div class="code-name">#iconnvwawamishu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpinpaixingxiang"></use>
</svg>
<div class="name">品牌形象</div>
<div class="code-name">#iconpinpaixingxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconguidang"></use>
</svg>
<div class="name">归档</div>
<div class="code-name">#iconguidang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhuiyishi"></use>
</svg>
<div class="name">会议室</div>
<div class="code-name">#iconhuiyishi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhuishouzhan"></use>
</svg>
<div class="name">回收站</div>
<div class="code-name">#iconhuishouzhan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjiankong"></use>
</svg>
<div class="name">监控</div>
<div class="code-name">#iconjiankong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqiye"></use>
</svg>
<div class="name">企业</div>
<div class="code-name">#iconqiye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondingding"></use>
</svg>
<div class="name">钉钉</div>
<div class="code-name">#icondingding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshezhi"></use>
</svg>
<div class="name">设 置</div>
<div class="code-name">#iconshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyonghushuliang"></use>
</svg>
<div class="name">用户数量</div>
<div class="code-name">#iconyonghushuliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwangpan"></use>
</svg>
<div class="name">网盘</div>
<div class="code-name">#iconwangpan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxiaoshoujia"></use>
</svg>
<div class="name">销售价</div>
<div class="code-name">#iconxiaoshoujia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconlingshoujia"></use>
</svg>
<div class="name">零售价</div>
<div class="code-name">#iconlingshoujia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbaocun"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#iconbaocun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontui"></use>
</svg>
<div class="name">退</div>
<div class="code-name">#icontui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbiaoqian"></use>
</svg>
<div class="name">标签</div>
<div class="code-name">#iconbiaoqian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchehui"></use>
</svg>
<div class="name">撤回</div>
<div class="code-name">#iconchehui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuwu"></use>
</svg>
<div class="name">服务</div>
<div class="code-name">#iconfuwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshijian"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#iconshijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuwu1"></use>
</svg>
<div class="name">服务</div>
<div class="code-name">#iconfuwu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontixing"></use>
</svg>
<div class="name">提醒 (3)</div>
<div class="code-name">#icontixing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongongsi"></use>
</svg>
<div class="name">公司</div>
<div class="code-name">#icongongsi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfontxinxichaxun"></use>
</svg>
<div class="name">查询</div>
<div class="code-name">#iconiconfontxinxichaxun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyouxiang"></use>
</svg>
<div class="name">邮箱</div>
<div class="code-name">#iconyouxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfasong"></use>
</svg>
<div class="name">发送</div>
<div class="code-name">#iconfasong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongerenbangong"></use>
</svg>
<div class="name">个人办公</div>
<div class="code-name">#icongerenbangong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyunxiazai"></use>
</svg>
<div class="name">云下载</div>
<div class="code-name">#iconyunxiazai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqipao"></use>
</svg>
<div class="name">气泡</div>
<div class="code-name">#iconqipao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzidingyi"></use>
</svg>
<div class="name">自定义</div>
<div class="code-name">#iconzidingyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbiyan"></use>
</svg>
<div class="name">闭眼</div>
<div class="code-name">#iconbiyan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbianjiliucheng"></use>
</svg>
<div class="name">编辑流程</div>
<div class="code-name">#iconbianjiliucheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongonggao"></use>
</svg>
<div class="name">公告</div>
<div class="code-name">#icongonggao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconlaba"></use>
</svg>
<div class="name">喇叭</div>
<div class="code-name">#iconlaba</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyonghu"></use>
</svg>
<div class="name">用户</div>
<div class="code-name">#iconyonghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwending"></use>
</svg>
<div class="name">稳定</div>
<div class="code-name">#iconwending</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconziliao"></use>
</svg>
<div class="name">资料</div>
<div class="code-name">#iconziliao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconguqingshezhi"></use>
</svg>
<div class="name">沽清设置</div>
<div class="code-name">#iconguqingshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshujukubeifen"></use>
</svg>
<div class="name">数据库备份</div>
<div class="code-name">#iconshujukubeifen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhandianxinxi"></use>
</svg>
<div class="name">站点信息</div>
<div class="code-name">#iconzhandianxinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjiaoban"></use>
</svg>
<div class="name">交班</div>
<div class="code-name">#iconjiaoban</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyingxiaofangan"></use>
</svg>
<div class="name">营销方案</div>
<div class="code-name">#iconyingxiaofangan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconrijie"></use>
</svg>
<div class="name">日结</div>
<div class="code-name">#iconrijie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1_huaban1"></use>
</svg>
<div class="name">1_画板 1</div>
<div class="code-name">#icon1_huaban1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-05"></use>
</svg>
<div class="name">1-05</div>
<div class="code-name">#icon1-05</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-04"></use>
</svg>
<div class="name">1-04</div>
<div class="code-name">#icon1-04</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-09"></use>
</svg>
<div class="name">1-09</div>
<div class="code-name">#icon1-09</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-10"></use>
</svg>
<div class="name">1-10</div>
<div class="code-name">#icon1-10</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-22"></use>
</svg>
<div class="name">1-22</div>
<div class="code-name">#icon1-22</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-25"></use>
</svg>
<div class="name">1-25</div>
<div class="code-name">#icon1-25</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-27"></use>
</svg>
<div class="name">1-27</div>
<div class="code-name">#icon1-27</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1-28"></use>
</svg>
<div class="name">1-28</div>
<div class="code-name">#icon1-28</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconanquan1"></use>
</svg>
<div class="name">安全</div>
<div class="code-name">#iconanquan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconcunchu"></use>
</svg>
<div class="name">存储</div>
<div class="code-name">#iconcunchu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfukuan"></use>
</svg>
<div class="name">付款</div>
<div class="code-name">#iconfukuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhanghuziliao"></use>
</svg>
<div class="name">账户资料</div>
<div class="code-name">#iconzhanghuziliao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconphone"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#iconphone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqiandaijinbi"></use>
</svg>
<div class="name">钱袋金币</div>
<div class="code-name">#iconqiandaijinbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouji"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#iconshouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhanghao"></use>
</svg>
<div class="name">账号</div>
<div class="code-name">#iconzhanghao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconairudiantubiaohuizhi-zhuanqu_youxi"></use>
</svg>
<div class="name">游戏</div>
<div class="code-name">#iconairudiantubiaohuizhi-zhuanqu_youxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhanghaoguanli"></use>
</svg>
<div class="name">账号管理</div>
<div class="code-name">#iconzhanghaoguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontubiao_tijiaodingdan"></use>
</svg>
<div class="name">提交订单</div>
<div class="code-name">#icontubiao_tijiaodingdan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkefu"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#iconkefu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconziyuan"></use>
</svg>
<div class="name">网络</div>
<div class="code-name">#iconziyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyouxi"></use>
</svg>
<div class="name">游戏</div>
<div class="code-name">#iconyouxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyaopinlingshouqiye"></use>
</svg>
<div class="name">药品零售企业</div>
<div class="code-name">#iconyaopinlingshouqiye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjisuxiangying"></use>
</svg>
<div class="name">极速响应</div>
<div class="code-name">#iconjisuxiangying</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkuaisukaidian"></use>
</svg>
<div class="name">快速开店</div>
<div class="code-name">#iconkuaisukaidian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchaoshi"></use>
</svg>
<div class="name">超市</div>
<div class="code-name">#iconchaoshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqianbao-"></use>
</svg>
<div class="name">钱包</div>
<div class="code-name">#iconqianbao-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwangluo"></use>
</svg>
<div class="name">网络</div>
<div class="code-name">#iconwangluo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconnetwork"></use>
</svg>
<div class="name">网络</div>
<div class="code-name">#iconnetwork</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondianhuazixun"></use>
</svg>
<div class="name">电话咨询</div>
<div class="code-name">#icondianhuazixun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconjishu"></use>
</svg>
<div class="name">技术</div>
<div class="code-name">#iconjishu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#iconshipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqianbao"></use>
</svg>
<div class="name">钱包</div>
<div class="code-name">#iconqianbao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshipin1"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#iconshipin1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyouxi1"></use>
</svg>
<div class="name">游戏</div>
<div class="code-name">#iconyouxi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconanquan"></use>
</svg>
<div class="name">安全</div>
<div class="code-name">#iconanquan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwangluo1"></use>
</svg>
<div class="name">网络</div>
<div class="code-name">#iconwangluo1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzu"></use>
</svg>
<div class="name">计算机平台/云</div>
<div class="code-name">#iconzu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfanhuishouye"></use>
</svg>
<div class="name">返回首页</div>
<div class="code-name">#iconfanhuishouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconceshiyongli"></use>
</svg>
<div class="name">测试用例1</div>
<div class="code-name">#iconceshiyongli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondailishangguanli"></use>
</svg>
<div class="name">代理商管理</div>
<div class="code-name">#icondailishangguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontuikuan"></use>
</svg>
<div class="name">退款</div>
<div class="code-name">#icontuikuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuwushang"></use>
</svg>
<div class="name">服务商</div>
<div class="code-name">#iconfuwushang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqianbao1"></use>
</svg>
<div class="name">钱包</div>
<div class="code-name">#iconqianbao1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxiangqing"></use>
</svg>
<div class="name">详情</div>
<div class="code-name">#iconxiangqing</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"><script src="./iconfont.js"></script>
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html"><style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
</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>