<!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=1481827" 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">&#xe685;</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">&#xe672;</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">&#xe60a;</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">&#xe609;</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">&#xe665;</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">&#xe626;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">用户管理</div>
|
<div class="code-name">&#xe6a6;</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">&#xe691;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">注册码工具</div>
|
<div class="code-name">&#xe614;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">大小写</div>
|
<div class="code-name">&#xe6b0;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">审</div>
|
<div class="code-name">&#xe752;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">转账汇款</div>
|
<div class="code-name">&#xe853;</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">&#xe66c;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">交易记录</div>
|
<div class="code-name">&#xe661;</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">&#xe663;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">关 闭</div>
|
<div class="code-name">&#xe625;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">支付宝支付 (1)</div>
|
<div class="code-name">&#xe660;</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">&#xe6f6;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">产品管理</div>
|
<div class="code-name">&#xe74f;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">_删 除</div>
|
<div class="code-name">&#xe64f;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">注意</div>
|
<div class="code-name">&#xe818;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">用户</div>
|
<div class="code-name">&#xe67e;</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">&#xe74e;</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">&#xe611;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">API</div>
|
<div class="code-name">&#xe7ac;</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">&#xe60b;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">开发者管理</div>
|
<div class="code-name">&#xe636;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">用户</div>
|
<div class="code-name">&#xe619;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">收起</div>
|
<div class="code-name">&#xe715;</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">&#xe657;</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont"></span>
|
<div class="name">下载</div>
|
<div class="code-name">&#xe63f;</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 icon-yonghu11"></span>
|
<div class="name">
|
用户
|
</div>
|
<div class="code-name">.icon-yonghu11
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-mima"></span>
|
<div class="name">
|
密码
|
</div>
|
<div class="code-name">.icon-mima
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-quanxianguanli_jyxd"></span>
|
<div class="name">
|
权限管理
|
</div>
|
<div class="code-name">.icon-quanxianguanli_jyxd
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-huiyuan"></span>
|
<div class="name">
|
会员
|
</div>
|
<div class="code-name">.icon-huiyuan
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-menu"></span>
|
<div class="name">
|
菜单
|
</div>
|
<div class="code-name">.icon-menu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-huiyuanxinxi"></span>
|
<div class="name">
|
会员信息
|
</div>
|
<div class="code-name">.icon-huiyuanxinxi
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-xiangshangyidong"></span>
|
<div class="name">
|
向上移动
|
</div>
|
<div class="code-name">.icon-xiangshangyidong
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-xiangxiayidong"></span>
|
<div class="name">
|
向下移动
|
</div>
|
<div class="code-name">.icon-xiangxiayidong
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-huidaodingbu"></span>
|
<div class="name">
|
回到顶部
|
</div>
|
<div class="code-name">.icon-huidaodingbu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-jiqun"></span>
|
<div class="name">
|
集群
|
</div>
|
<div class="code-name">.icon-jiqun
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-caozuorizhi1"></span>
|
<div class="name">
|
操作日志
|
</div>
|
<div class="code-name">.icon-caozuorizhi1
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-yonghuguanli"></span>
|
<div class="name">
|
用户管理
|
</div>
|
<div class="code-name">.icon-yonghuguanli
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-wenhao"></span>
|
<div class="name">
|
问号
|
</div>
|
<div class="code-name">.icon-wenhao
|
</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-zhucemagongju"></span>
|
<div class="name">
|
注册码工具
|
</div>
|
<div class="code-name">.icon-zhucemagongju
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-daxiaoxie"></span>
|
<div class="name">
|
大小写
|
</div>
|
<div class="code-name">.icon-daxiaoxie
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-shen"></span>
|
<div class="name">
|
审
|
</div>
|
<div class="code-name">.icon-shen
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-huikuan"></span>
|
<div class="name">
|
转账汇款
|
</div>
|
<div class="code-name">.icon-huikuan
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-guanli"></span>
|
<div class="name">
|
管理
|
</div>
|
<div class="code-name">.icon-guanli
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-ducha"></span>
|
<div class="name">
|
督查
|
</div>
|
<div class="code-name">.icon-ducha
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-jiaoyijilu"></span>
|
<div class="name">
|
交易记录
|
</div>
|
<div class="code-name">.icon-jiaoyijilu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-shebei"></span>
|
<div class="name">
|
设备管理
|
</div>
|
<div class="code-name">.icon-shebei
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-diedaopingfen"></span>
|
<div class="name">
|
跌倒评分
|
</div>
|
<div class="code-name">.icon-diedaopingfen
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-guanbi"></span>
|
<div class="name">
|
关 闭
|
</div>
|
<div class="code-name">.icon-guanbi
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-zhifubaozhifu"></span>
|
<div class="name">
|
支付宝支付 (1)
|
</div>
|
<div class="code-name">.icon-zhifubaozhifu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-guanlizhongxin"></span>
|
<div class="name">
|
管理中心
|
</div>
|
<div class="code-name">.icon-guanlizhongxin
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-guanlirengenzong"></span>
|
<div class="name">
|
管理人跟踪
|
</div>
|
<div class="code-name">.icon-guanlirengenzong
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-chanpinguanli"></span>
|
<div class="name">
|
产品管理
|
</div>
|
<div class="code-name">.icon-chanpinguanli
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-_shanchu"></span>
|
<div class="name">
|
_删 除
|
</div>
|
<div class="code-name">.icon-_shanchu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-zhuyi"></span>
|
<div class="name">
|
注意
|
</div>
|
<div class="code-name">.icon-zhuyi
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-yonghu1"></span>
|
<div class="name">
|
用户
|
</div>
|
<div class="code-name">.icon-yonghu1
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-kaifazhe"></span>
|
<div class="name">
|
开发者
|
</div>
|
<div class="code-name">.icon-kaifazhe
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-qiye"></span>
|
<div class="name">
|
企业
|
</div>
|
<div class="code-name">.icon-qiye
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-erweima-copy"></span>
|
<div class="name">
|
二维码
|
</div>
|
<div class="code-name">.icon-erweima-copy
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-chanpinzhongxin"></span>
|
<div class="name">
|
产品中心
|
</div>
|
<div class="code-name">.icon-chanpinzhongxin
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-API"></span>
|
<div class="name">
|
API
|
</div>
|
<div class="code-name">.icon-API
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-index-select"></span>
|
<div class="name">
|
首页-选中
|
</div>
|
<div class="code-name">.icon-index-select
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-qiye-copy"></span>
|
<div class="name">
|
企业
|
</div>
|
<div class="code-name">.icon-qiye-copy
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-kaifazheguanli"></span>
|
<div class="name">
|
开发者管理
|
</div>
|
<div class="code-name">.icon-kaifazheguanli
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-yonghu"></span>
|
<div class="name">
|
用户
|
</div>
|
<div class="code-name">.icon-yonghu
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-packup"></span>
|
<div class="name">
|
收起
|
</div>
|
<div class="code-name">.icon-packup
|
</div>
|
</li>
|
|
<li class="dib">
|
<span class="icon iconfont icon-gouwuchekong"></span>
|
<div class="name">
|
购物车空
|
</div>
|
<div class="code-name">.icon-gouwuchekong
|
</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-xiazai"></span>
|
<div class="name">
|
下载
|
</div>
|
<div class="code-name">.icon-xiazai
|
</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 icon-xxx"></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="#icon-yonghu11"></use>
|
</svg>
|
<div class="name">用户</div>
|
<div class="code-name">#icon-yonghu11</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-mima"></use>
|
</svg>
|
<div class="name">密码</div>
|
<div class="code-name">#icon-mima</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-quanxianguanli_jyxd"></use>
|
</svg>
|
<div class="name">权限管理</div>
|
<div class="code-name">#icon-quanxianguanli_jyxd</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-huiyuan"></use>
|
</svg>
|
<div class="name">会员</div>
|
<div class="code-name">#icon-huiyuan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-menu"></use>
|
</svg>
|
<div class="name">菜单</div>
|
<div class="code-name">#icon-menu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-huiyuanxinxi"></use>
|
</svg>
|
<div class="name">会员信息</div>
|
<div class="code-name">#icon-huiyuanxinxi</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiangshangyidong"></use>
|
</svg>
|
<div class="name">向上移动</div>
|
<div class="code-name">#icon-xiangshangyidong</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiangxiayidong"></use>
|
</svg>
|
<div class="name">向下移动</div>
|
<div class="code-name">#icon-xiangxiayidong</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-huidaodingbu"></use>
|
</svg>
|
<div class="name">回到顶部</div>
|
<div class="code-name">#icon-huidaodingbu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-jiqun"></use>
|
</svg>
|
<div class="name">集群</div>
|
<div class="code-name">#icon-jiqun</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-caozuorizhi1"></use>
|
</svg>
|
<div class="name">操作日志</div>
|
<div class="code-name">#icon-caozuorizhi1</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-yonghuguanli"></use>
|
</svg>
|
<div class="name">用户管理</div>
|
<div class="code-name">#icon-yonghuguanli</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-wenhao"></use>
|
</svg>
|
<div class="name">问号</div>
|
<div class="code-name">#icon-wenhao</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-zhucemagongju"></use>
|
</svg>
|
<div class="name">注册码工具</div>
|
<div class="code-name">#icon-zhucemagongju</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-daxiaoxie"></use>
|
</svg>
|
<div class="name">大小写</div>
|
<div class="code-name">#icon-daxiaoxie</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-shen"></use>
|
</svg>
|
<div class="name">审</div>
|
<div class="code-name">#icon-shen</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-huikuan"></use>
|
</svg>
|
<div class="name">转账汇款</div>
|
<div class="code-name">#icon-huikuan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-guanli"></use>
|
</svg>
|
<div class="name">管理</div>
|
<div class="code-name">#icon-guanli</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-ducha"></use>
|
</svg>
|
<div class="name">督查</div>
|
<div class="code-name">#icon-ducha</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-jiaoyijilu"></use>
|
</svg>
|
<div class="name">交易记录</div>
|
<div class="code-name">#icon-jiaoyijilu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-shebei"></use>
|
</svg>
|
<div class="name">设备管理</div>
|
<div class="code-name">#icon-shebei</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-diedaopingfen"></use>
|
</svg>
|
<div class="name">跌倒评分</div>
|
<div class="code-name">#icon-diedaopingfen</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-guanbi"></use>
|
</svg>
|
<div class="name">关 闭</div>
|
<div class="code-name">#icon-guanbi</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-zhifubaozhifu"></use>
|
</svg>
|
<div class="name">支付宝支付 (1)</div>
|
<div class="code-name">#icon-zhifubaozhifu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-guanlizhongxin"></use>
|
</svg>
|
<div class="name">管理中心</div>
|
<div class="code-name">#icon-guanlizhongxin</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-guanlirengenzong"></use>
|
</svg>
|
<div class="name">管理人跟踪</div>
|
<div class="code-name">#icon-guanlirengenzong</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-chanpinguanli"></use>
|
</svg>
|
<div class="name">产品管理</div>
|
<div class="code-name">#icon-chanpinguanli</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-_shanchu"></use>
|
</svg>
|
<div class="name">_删 除</div>
|
<div class="code-name">#icon-_shanchu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-zhuyi"></use>
|
</svg>
|
<div class="name">注意</div>
|
<div class="code-name">#icon-zhuyi</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-yonghu1"></use>
|
</svg>
|
<div class="name">用户</div>
|
<div class="code-name">#icon-yonghu1</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-kaifazhe"></use>
|
</svg>
|
<div class="name">开发者</div>
|
<div class="code-name">#icon-kaifazhe</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-qiye"></use>
|
</svg>
|
<div class="name">企业</div>
|
<div class="code-name">#icon-qiye</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-erweima-copy"></use>
|
</svg>
|
<div class="name">二维码</div>
|
<div class="code-name">#icon-erweima-copy</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-chanpinzhongxin"></use>
|
</svg>
|
<div class="name">产品中心</div>
|
<div class="code-name">#icon-chanpinzhongxin</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-API"></use>
|
</svg>
|
<div class="name">API</div>
|
<div class="code-name">#icon-API</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-index-select"></use>
|
</svg>
|
<div class="name">首页-选中</div>
|
<div class="code-name">#icon-index-select</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-qiye-copy"></use>
|
</svg>
|
<div class="name">企业</div>
|
<div class="code-name">#icon-qiye-copy</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-kaifazheguanli"></use>
|
</svg>
|
<div class="name">开发者管理</div>
|
<div class="code-name">#icon-kaifazheguanli</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-yonghu"></use>
|
</svg>
|
<div class="name">用户</div>
|
<div class="code-name">#icon-yonghu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-packup"></use>
|
</svg>
|
<div class="name">收起</div>
|
<div class="code-name">#icon-packup</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-gouwuchekong"></use>
|
</svg>
|
<div class="name">购物车空</div>
|
<div class="code-name">#icon-gouwuchekong</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-xiazai"></use>
|
</svg>
|
<div class="name">下载</div>
|
<div class="code-name">#icon-xiazai</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>
|
