zh-commons
Version:
1,528 lines • 53.2 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.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=1507260" 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 zhIcon"></span>
<div class="name">html5</div>
<div class="code-name">&#xe600;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">右箭头</div>
<div class="code-name">&#xe646;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">上箭头</div>
<div class="code-name">&#xe647;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">下箭头</div>
<div class="code-name">&#xe648;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">无头像</div>
<div class="code-name">&#xe63c;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">更多</div>
<div class="code-name">&#xe621;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">链接</div>
<div class="code-name">&#xe613;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe61a;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">代码生成</div>
<div class="code-name">&#xe63d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">delete</div>
<div class="code-name">&#xe6a6;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">链接 关联</div>
<div class="code-name">&#xe77c;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">播放</div>
<div class="code-name">&#xe630;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">暂停</div>
<div class="code-name">&#xe635;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">点赞</div>
<div class="code-name">&#xe664;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">css</div>
<div class="code-name">&#xe743;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">星标-激活</div>
<div class="code-name">&#xe61f;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">星标-未激活</div>
<div class="code-name">&#xe620;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">js</div>
<div class="code-name">&#xe65d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">注意</div>
<div class="code-name">&#xe763;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">编辑器 · 代码</div>
<div class="code-name">&#xe6f7;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">查看</div>
<div class="code-name">&#xe60e;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">注意 #d8432a & 12px</div>
<div class="code-name">&#xe611;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">锁 1</div>
<div class="code-name">&#xe657;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">链接</div>
<div class="code-name">&#xe671;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">复制</div>
<div class="code-name">&#xe62d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">左箭头</div>
<div class="code-name">&#xe670;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">电话</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">css3</div>
<div class="code-name">&#xe653;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">人物，我的</div>
<div class="code-name">&#xe602;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">位置</div>
<div class="code-name">&#xe64b;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">wifi</div>
<div class="code-name">&#xe853;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">剪刀</div>
<div class="code-name">&#xe601;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">电话</div>
<div class="code-name">&#xe6f9;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">缩小</div>
<div class="code-name">&#xe67b;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">CSS</div>
<div class="code-name">&#xe614;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">HTML</div>
<div class="code-name">&#xe617;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">JS</div>
<div class="code-name">&#xe61b;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">js</div>
<div class="code-name">&#xec68;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">双上箭头-01</div>
<div class="code-name">&#xe628;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">双右箭头-01</div>
<div class="code-name">&#xe62a;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">双左箭头-01</div>
<div class="code-name">&#xe62b;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">更多</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">减</div>
<div class="code-name">&#xe627;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">放大</div>
<div class="code-name">&#xe60f;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">更多</div>
<div class="code-name">&#xe66a;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">双箭头 下</div>
<div class="code-name">&#xe714;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">复制</div>
<div class="code-name">&#xe622;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">设置</div>
<div class="code-name">&#xe771;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">上传</div>
<div class="code-name">&#xe623;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">查看</div>
<div class="code-name">&#xe642;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">云</div>
<div class="code-name">&#xe6b0;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">delete hover</div>
<div class="code-name">&#xe61c;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">加</div>
<div class="code-name">&#xe61d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">更多</div>
<div class="code-name">&#xe86d;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">设置</div>
<div class="code-name">&#xe864;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">html</div>
<div class="code-name">&#xe8b1;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">钥匙(1)</div>
<div class="code-name">&#xe638;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">更多 全部 分类</div>
<div class="code-name">&#xe726;</div>
</li>
<li class="dib">
<span class="icon zhIcon"></span>
<div class="name">剪刀</div>
<div class="code-name">&#xe609;</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: 'zhIcon';
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#zhIcon') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.zhIcon {
font-family: "zhIcon" !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="zhIcon">&#x33;</span>
</code></pre>
<blockquote>
<p>"zhIcon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon zhIcon zh-html5"></span>
<div class="name">
html5
</div>
<div class="code-name">.zh-html5
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-arrow-right"></span>
<div class="name">
右箭头
</div>
<div class="code-name">.zh-arrow-right
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-arrow-up"></span>
<div class="name">
上箭头
</div>
<div class="code-name">.zh-arrow-up
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-arrow-down"></span>
<div class="name">
下箭头
</div>
<div class="code-name">.zh-arrow-down
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-wutouxiang"></span>
<div class="name">
无头像
</div>
<div class="code-name">.zh-wutouxiang
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-gengduo"></span>
<div class="name">
更多
</div>
<div class="code-name">.zh-gengduo
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-lianjie"></span>
<div class="name">
链接
</div>
<div class="code-name">.zh-lianjie
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shoucang"></span>
<div class="name">
收藏
</div>
<div class="code-name">.zh-shoucang
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-weibiaoti46"></span>
<div class="name">
代码生成
</div>
<div class="code-name">.zh-weibiaoti46
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-delete"></span>
<div class="name">
delete
</div>
<div class="code-name">.zh-delete
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-lianjieguanlian"></span>
<div class="name">
链接 关联
</div>
<div class="code-name">.zh-lianjieguanlian
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-bofang"></span>
<div class="name">
播放
</div>
<div class="code-name">.zh-bofang
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-zanting"></span>
<div class="name">
暂停
</div>
<div class="code-name">.zh-zanting
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-ai-like"></span>
<div class="name">
点赞
</div>
<div class="code-name">.zh-ai-like
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-css"></span>
<div class="name">
css
</div>
<div class="code-name">.zh-css
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-xingbiaojihuo"></span>
<div class="name">
星标-激活
</div>
<div class="code-name">.zh-xingbiaojihuo
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-xingbiaoweijihuo"></span>
<div class="name">
星标-未激活
</div>
<div class="code-name">.zh-xingbiaoweijihuo
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-js"></span>
<div class="name">
js
</div>
<div class="code-name">.zh-js
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-zhuyi"></span>
<div class="name">
注意
</div>
<div class="code-name">.zh-zhuyi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-insert_tag_field"></span>
<div class="name">
编辑器 · 代码
</div>
<div class="code-name">.zh-insert_tag_field
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-chakan"></span>
<div class="name">
查看
</div>
<div class="code-name">.zh-chakan
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-zhuyidapx"></span>
<div class="name">
注意 #d8432a & 12px
</div>
<div class="code-name">.zh-zhuyidapx
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-suo"></span>
<div class="name">
锁 1
</div>
<div class="code-name">.zh-suo
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-lianjie1"></span>
<div class="name">
链接
</div>
<div class="code-name">.zh-lianjie1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-icon-"></span>
<div class="name">
复制
</div>
<div class="code-name">.zh-icon-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-ico_leftarrow"></span>
<div class="name">
左箭头
</div>
<div class="code-name">.zh-ico_leftarrow
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-weibiaoti-"></span>
<div class="name">
电话
</div>
<div class="code-name">.zh-weibiaoti-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-css1"></span>
<div class="name">
css3
</div>
<div class="code-name">.zh-css1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-Shapecopy"></span>
<div class="name">
人物，我的
</div>
<div class="code-name">.zh-Shapecopy
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-weizhi"></span>
<div class="name">
位置
</div>
<div class="code-name">.zh-weizhi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-wifi"></span>
<div class="name">
wifi
</div>
<div class="code-name">.zh-wifi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-jiandao-"></span>
<div class="name">
剪刀
</div>
<div class="code-name">.zh-jiandao-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-dianhua"></span>
<div class="name">
电话
</div>
<div class="code-name">.zh-dianhua
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-suoxiao"></span>
<div class="name">
缩小
</div>
<div class="code-name">.zh-suoxiao
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-CSS"></span>
<div class="name">
CSS
</div>
<div class="code-name">.zh-CSS
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-HTML"></span>
<div class="name">
HTML
</div>
<div class="code-name">.zh-HTML
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-JS"></span>
<div class="name">
JS
</div>
<div class="code-name">.zh-JS
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-js1"></span>
<div class="name">
js
</div>
<div class="code-name">.zh-js1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shuangshangjiantou-"></span>
<div class="name">
双上箭头-01
</div>
<div class="code-name">.zh-shuangshangjiantou-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shuangyoujiantou-"></span>
<div class="name">
双右箭头-01
</div>
<div class="code-name">.zh-shuangyoujiantou-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shuangzuojiantou-"></span>
<div class="name">
双左箭头-01
</div>
<div class="code-name">.zh-shuangzuojiantou-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-gengduo1"></span>
<div class="name">
更多
</div>
<div class="code-name">.zh-gengduo1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-jian"></span>
<div class="name">
减
</div>
<div class="code-name">.zh-jian
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-fangda"></span>
<div class="name">
放大
</div>
<div class="code-name">.zh-fangda
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-gengduo2"></span>
<div class="name">
更多
</div>
<div class="code-name">.zh-gengduo2
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shuangjiantouxia"></span>
<div class="name">
双箭头 下
</div>
<div class="code-name">.zh-shuangjiantouxia
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-fuzhi"></span>
<div class="name">
复制
</div>
<div class="code-name">.zh-fuzhi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shezhi"></span>
<div class="name">
设置
</div>
<div class="code-name">.zh-shezhi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shangchuan"></span>
<div class="name">
上传
</div>
<div class="code-name">.zh-shangchuan
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-chakan1"></span>
<div class="name">
查看
</div>
<div class="code-name">.zh-chakan1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-yun"></span>
<div class="name">
云
</div>
<div class="code-name">.zh-yun
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-deletehover"></span>
<div class="name">
delete hover
</div>
<div class="code-name">.zh-deletehover
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-ziyuan"></span>
<div class="name">
加
</div>
<div class="code-name">.zh-ziyuan
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-gengduo3"></span>
<div class="name">
更多
</div>
<div class="code-name">.zh-gengduo3
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-shezhi1"></span>
<div class="name">
设置
</div>
<div class="code-name">.zh-shezhi1
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-html"></span>
<div class="name">
html
</div>
<div class="code-name">.zh-html
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-yuechi"></span>
<div class="name">
钥匙(1)
</div>
<div class="code-name">.zh-yuechi
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-changyongtubiao-xianxingdaochu-zhuanqu-"></span>
<div class="name">
更多 全部 分类
</div>
<div class="code-name">.zh-changyongtubiao-xianxingdaochu-zhuanqu-
</div>
</li>
<li class="dib">
<span class="icon zhIcon zh-ziyuan1"></span>
<div class="name">
剪刀
</div>
<div class="code-name">.zh-ziyuan1
</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="zhIcon zh-xxx"></span>
</code></pre>
<blockquote>
<p>"
zhIcon" 是你项目下的 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="#zh-html5"></use>
</svg>
<div class="name">html5</div>
<div class="code-name">#zh-html5</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-arrow-right"></use>
</svg>
<div class="name">右箭头</div>
<div class="code-name">#zh-arrow-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-arrow-up"></use>
</svg>
<div class="name">上箭头</div>
<div class="code-name">#zh-arrow-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-arrow-down"></use>
</svg>
<div class="name">下箭头</div>
<div class="code-name">#zh-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-wutouxiang"></use>
</svg>
<div class="name">无头像</div>
<div class="code-name">#zh-wutouxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-gengduo"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#zh-gengduo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-lianjie"></use>
</svg>
<div class="name">链接</div>
<div class="code-name">#zh-lianjie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shoucang"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#zh-shoucang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-weibiaoti46"></use>
</svg>
<div class="name">代码生成</div>
<div class="code-name">#zh-weibiaoti46</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-delete"></use>
</svg>
<div class="name">delete</div>
<div class="code-name">#zh-delete</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-lianjieguanlian"></use>
</svg>
<div class="name">链接 关联</div>
<div class="code-name">#zh-lianjieguanlian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-bofang"></use>
</svg>
<div class="name">播放</div>
<div class="code-name">#zh-bofang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-zanting"></use>
</svg>
<div class="name">暂停</div>
<div class="code-name">#zh-zanting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-ai-like"></use>
</svg>
<div class="name">点赞</div>
<div class="code-name">#zh-ai-like</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-css"></use>
</svg>
<div class="name">css</div>
<div class="code-name">#zh-css</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-xingbiaojihuo"></use>
</svg>
<div class="name">星标-激活</div>
<div class="code-name">#zh-xingbiaojihuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-xingbiaoweijihuo"></use>
</svg>
<div class="name">星标-未激活</div>
<div class="code-name">#zh-xingbiaoweijihuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-js"></use>
</svg>
<div class="name">js</div>
<div class="code-name">#zh-js</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-zhuyi"></use>
</svg>
<div class="name">注意</div>
<div class="code-name">#zh-zhuyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-insert_tag_field"></use>
</svg>
<div class="name">编辑器 · 代码</div>
<div class="code-name">#zh-insert_tag_field</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-chakan"></use>
</svg>
<div class="name">查看</div>
<div class="code-name">#zh-chakan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-zhuyidapx"></use>
</svg>
<div class="name">注意 #d8432a & 12px</div>
<div class="code-name">#zh-zhuyidapx</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-suo"></use>
</svg>
<div class="name">锁 1</div>
<div class="code-name">#zh-suo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-lianjie1"></use>
</svg>
<div class="name">链接</div>
<div class="code-name">#zh-lianjie1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-icon-"></use>
</svg>
<div class="name">复制</div>
<div class="code-name">#zh-icon-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-ico_leftarrow"></use>
</svg>
<div class="name">左箭头</div>
<div class="code-name">#zh-ico_leftarrow</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-weibiaoti-"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#zh-weibiaoti-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-css1"></use>
</svg>
<div class="name">css3</div>
<div class="code-name">#zh-css1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-Shapecopy"></use>
</svg>
<div class="name">人物，我的</div>
<div class="code-name">#zh-Shapecopy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-weizhi"></use>
</svg>
<div class="name">位置</div>
<div class="code-name">#zh-weizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-wifi"></use>
</svg>
<div class="name">wifi</div>
<div class="code-name">#zh-wifi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-jiandao-"></use>
</svg>
<div class="name">剪刀</div>
<div class="code-name">#zh-jiandao-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#zh-dianhua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-suoxiao"></use>
</svg>
<div class="name">缩小</div>
<div class="code-name">#zh-suoxiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-CSS"></use>
</svg>
<div class="name">CSS</div>
<div class="code-name">#zh-CSS</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-HTML"></use>
</svg>
<div class="name">HTML</div>
<div class="code-name">#zh-HTML</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-JS"></use>
</svg>
<div class="name">JS</div>
<div class="code-name">#zh-JS</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-js1"></use>
</svg>
<div class="name">js</div>
<div class="code-name">#zh-js1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shuangshangjiantou-"></use>
</svg>
<div class="name">双上箭头-01</div>
<div class="code-name">#zh-shuangshangjiantou-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shuangyoujiantou-"></use>
</svg>
<div class="name">双右箭头-01</div>
<div class="code-name">#zh-shuangyoujiantou-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shuangzuojiantou-"></use>
</svg>
<div class="name">双左箭头-01</div>
<div class="code-name">#zh-shuangzuojiantou-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-gengduo1"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#zh-gengduo1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-jian"></use>
</svg>
<div class="name">减</div>
<div class="code-name">#zh-jian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-fangda"></use>
</svg>
<div class="name">放大</div>
<div class="code-name">#zh-fangda</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-gengduo2"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#zh-gengduo2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shuangjiantouxia"></use>
</svg>
<div class="name">双箭头 下</div>
<div class="code-name">#zh-shuangjiantouxia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-fuzhi"></use>
</svg>
<div class="name">复制</div>
<div class="code-name">#zh-fuzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shezhi"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#zh-shezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shangchuan"></use>
</svg>
<div class="name">上传</div>
<div class="code-name">#zh-shangchuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-chakan1"></use>
</svg>
<div class="name">查看</div>
<div class="code-name">#zh-chakan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-yun"></use>
</svg>
<div class="name">云</div>
<div class="code-name">#zh-yun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-deletehover"></use>
</svg>
<div class="name">delete hover</div>
<div class="code-name">#zh-deletehover</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-ziyuan"></use>
</svg>
<div class="name">加</div>
<div class="code-name">#zh-ziyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-gengduo3"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#zh-gengduo3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-shezhi1"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#zh-shezhi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-html"></use>
</svg>
<div class="name">html</div>
<div class="code-name">#zh-html</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-yuechi"></use>
</svg>
<div class="name">钥匙(1)</div>
<div class="code-name">#zh-yuechi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-changyongtubiao-xianxingdaochu-zhuanqu-"></use>
</svg>
<div class="name">更多 全部 分类</div>
<div class="code-name">#zh-changyongtubiao-xianxingdaochu-zhuanqu-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#zh-ziyuan1"></use>
</svg>
<div class="name">剪刀</div>
<div class="code-name">#zh-ziyuan1</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>