mirror of
https://jihulab.com/DGP-Studio/Snap.Hutao.Docs.git
synced 2025-11-19 21:16:31 +08:00
Deploying to gh-pages from @ DGP-Studio/Snap.Hutao.Docs@1dccc22e55 🚀
This commit is contained in:
Masterain98
502
fontlist/demo_index.html
Normal file
502
fontlist/demo_index.html
Normal file
@@ -0,0 +1,502 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
</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="#docs-link"></use>
|
||||
</svg>
|
||||
<div class="name">链接</div>
|
||||
<div class="code-name">#docs-link</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-edit"></use>
|
||||
</svg>
|
||||
<div class="name">编辑</div>
|
||||
<div class="code-name">#docs-edit</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-qrcode"></use>
|
||||
</svg>
|
||||
<div class="name">二维码</div>
|
||||
<div class="code-name">#docs-qrcode</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-set"></use>
|
||||
</svg>
|
||||
<div class="name">设置</div>
|
||||
<div class="code-name">#docs-set</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-set-fill"></use>
|
||||
</svg>
|
||||
<div class="name">设置</div>
|
||||
<div class="code-name">#docs-set-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-callback-fill"></use>
|
||||
</svg>
|
||||
<div class="name">帮助反馈</div>
|
||||
<div class="code-name">#docs-callback-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-switch"></use>
|
||||
</svg>
|
||||
<div class="name">切换</div>
|
||||
<div class="code-name">#docs-switch</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-favorites-fill"></use>
|
||||
</svg>
|
||||
<div class="name">favorites-fill</div>
|
||||
<div class="code-name">#docs-favorites-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-costoms-alearance"></use>
|
||||
</svg>
|
||||
<div class="name">costoms-alearance</div>
|
||||
<div class="code-name">#docs-costoms-alearance</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-hot"></use>
|
||||
</svg>
|
||||
<div class="name">hot</div>
|
||||
<div class="code-name">#docs-hot</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-resonserate"></use>
|
||||
</svg>
|
||||
<div class="name">resonse rate</div>
|
||||
<div class="code-name">#docs-resonserate</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-hot-fill"></use>
|
||||
</svg>
|
||||
<div class="name">hot-fill</div>
|
||||
<div class="code-name">#docs-hot-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-resonserate-fill"></use>
|
||||
</svg>
|
||||
<div class="name">resonse rate-fill</div>
|
||||
<div class="code-name">#docs-resonserate-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-collection"></use>
|
||||
</svg>
|
||||
<div class="name">collection</div>
|
||||
<div class="code-name">#docs-collection</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-collection-fill"></use>
|
||||
</svg>
|
||||
<div class="name">collection-fill</div>
|
||||
<div class="code-name">#docs-collection-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-stick"></use>
|
||||
</svg>
|
||||
<div class="name">置顶</div>
|
||||
<div class="code-name">#docs-stick</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-favorites"></use>
|
||||
</svg>
|
||||
<div class="name">favorites</div>
|
||||
<div class="code-name">#docs-favorites</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-arrows-left"></use>
|
||||
</svg>
|
||||
<div class="name">左箭头</div>
|
||||
<div class="code-name">#docs-arrows-left</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-arrows-right"></use>
|
||||
</svg>
|
||||
<div class="name">右箭头</div>
|
||||
<div class="code-name">#docs-arrows-right</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-arrows-top"></use>
|
||||
</svg>
|
||||
<div class="name">上箭头</div>
|
||||
<div class="code-name">#docs-arrows-top</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-arrows-bottom"></use>
|
||||
</svg>
|
||||
<div class="name">下箭头</div>
|
||||
<div class="code-name">#docs-arrows-bottom</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-transpond"></use>
|
||||
</svg>
|
||||
<div class="name">转发</div>
|
||||
<div class="code-name">#docs-transpond</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-font"></use>
|
||||
</svg>
|
||||
<div class="name">icon_font</div>
|
||||
<div class="code-name">#docs-font</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-share-fill"></use>
|
||||
</svg>
|
||||
<div class="name">分 享</div>
|
||||
<div class="code-name">#docs-share-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-gotop"></use>
|
||||
</svg>
|
||||
<div class="name">回到顶部</div>
|
||||
<div class="code-name">#docs-gotop</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-map"></use>
|
||||
</svg>
|
||||
<div class="name">map</div>
|
||||
<div class="code-name">#docs-map</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-refresh"></use>
|
||||
</svg>
|
||||
<div class="name">refresh</div>
|
||||
<div class="code-name">#docs-refresh</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-endorse-fill"></use>
|
||||
</svg>
|
||||
<div class="name">点赞</div>
|
||||
<div class="code-name">#docs-endorse-fill</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-language"></use>
|
||||
</svg>
|
||||
<div class="name">语言</div>
|
||||
<div class="code-name">#docs-language</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-endorse-border"></use>
|
||||
</svg>
|
||||
<div class="name">点赞</div>
|
||||
<div class="code-name">#docs-endorse-border</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-github"></use>
|
||||
</svg>
|
||||
<div class="name">GitHub</div>
|
||||
<div class="code-name">#docs-github</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-zhifubao-guanfang"></use>
|
||||
</svg>
|
||||
<div class="name">支付宝-官方</div>
|
||||
<div class="code-name">#docs-zhifubao-guanfang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-paypal"></use>
|
||||
</svg>
|
||||
<div class="name">paypal</div>
|
||||
<div class="code-name">#docs-paypal</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-Paypal"></use>
|
||||
</svg>
|
||||
<div class="name">Paypal </div>
|
||||
<div class="code-name">#docs-Paypal</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-wecath-paly"></use>
|
||||
</svg>
|
||||
<div class="name">微信</div>
|
||||
<div class="code-name">#docs-wecath-paly</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-wechat"></use>
|
||||
</svg>
|
||||
<div class="name">wechat</div>
|
||||
<div class="code-name">#docs-wechat</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-bilibili"></use>
|
||||
</svg>
|
||||
<div class="name">bilibili</div>
|
||||
<div class="code-name">#docs-bilibili</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-zcool"></use>
|
||||
</svg>
|
||||
<div class="name">zcool</div>
|
||||
<div class="code-name">#docs-zcool</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-qq"></use>
|
||||
</svg>
|
||||
<div class="name">qq</div>
|
||||
<div class="code-name">#docs-qq</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-facebook"></use>
|
||||
</svg>
|
||||
<div class="name">Facebook</div>
|
||||
<div class="code-name">#docs-facebook</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-gitee"></use>
|
||||
</svg>
|
||||
<div class="name">gitee</div>
|
||||
<div class="code-name">#docs-gitee</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-zhihu"></use>
|
||||
</svg>
|
||||
<div class="name">知乎</div>
|
||||
<div class="code-name">#docs-zhihu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-medium"></use>
|
||||
</svg>
|
||||
<div class="name">medium</div>
|
||||
<div class="code-name">#docs-medium</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-twttier"></use>
|
||||
</svg>
|
||||
<div class="name">twitter hover_pc</div>
|
||||
<div class="code-name">#docs-twttier</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-behance"></use>
|
||||
</svg>
|
||||
<div class="name">behance</div>
|
||||
<div class="code-name">#docs-behance</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-instagram"></use>
|
||||
</svg>
|
||||
<div class="name">instagram</div>
|
||||
<div class="code-name">#docs-instagram</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-youtube"></use>
|
||||
</svg>
|
||||
<div class="name">you-tube</div>
|
||||
<div class="code-name">#docs-youtube</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-bilibili-text"></use>
|
||||
</svg>
|
||||
<div class="name">bilibili</div>
|
||||
<div class="code-name">#docs-bilibili-text</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#docs-weibo"></use>
|
||||
</svg>
|
||||
<div class="name">微博</div>
|
||||
<div class="code-name">#docs-weibo</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>
|
||||
Reference in New Issue
Block a user