mirrors
/
sakura
mirror of https://github.com/mashirozx/sakura.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
sakura/css/iconfont/demo_symbol.html

560 lines
22 KiB
HTML
Raw Normal View History

First Commit
2022-06-27 10:35:06 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<script src="iconfont.js"></script>
<style type="text/css">
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-black-cat"></use>
</svg>
<div class="name">cat</div>
<div class="fontclass">#icon-black-cat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-white-cat"></use>
</svg>
<div class="name">cat-in-white-silhoue</div>
<div class="fontclass">#icon-white-cat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-markdown"></use>
</svg>
<div class="name">markdown</div>
<div class="fontclass">#icon-markdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-right"></use>
</svg>
<div class="name">uniE6A3</div>
<div class="fontclass">#icon-right</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>
</svg>
<div class="name">uniE6A0</div>
<div class="fontclass">#icon-caidan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-delete"></use>
</svg>
<div class="name">uniE6B4</div>
<div class="fontclass">#icon-delete</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-message"></use>
</svg>
<div class="name">uniE6BC</div>
<div class="fontclass">#icon-message</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-link"></use>
</svg>
<div class="name">uniE6BF</div>
<div class="fontclass">#icon-link</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
<div class="name">uniE6C4</div>
<div class="fontclass">#icon-weibo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-info"></use>
</svg>
<div class="name">uniE6E5</div>
<div class="fontclass">#icon-info</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-forward"></use>
</svg>
<div class="name">uniE6EB</div>
<div class="fontclass">#icon-forward</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-share"></use>
</svg>
<div class="name">uniE6F3</div>
<div class="fontclass">#icon-share</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fold"></use>
</svg>
<div class="name">uniE6DE</div>
<div class="fontclass">#icon-fold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-favorfill"></use>
</svg>
<div class="name">uniE64B</div>
<div class="fontclass">#icon-favorfill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-time"></use>
</svg>
<div class="name">uniE65F</div>
<div class="fontclass">#icon-time</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-favor"></use>
</svg>
<div class="name">uniE64C</div>
<div class="fontclass">#icon-favor</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
<div class="name">uniE66F</div>
<div class="fontclass">#icon-weixin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-github"></use>
</svg>
<div class="name">uniE66C</div>
<div class="fontclass">#icon-github</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-notification"></use>
</svg>
<div class="name">uniE66B</div>
<div class="fontclass">#icon-notification</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tags"></use>
</svg>
<div class="name">uniE68C</div>
<div class="fontclass">#icon-tags</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pulldown"></use>
</svg>
<div class="name">uniE69F</div>
<div class="fontclass">#icon-pulldown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-search"></use>
</svg>
<div class="name">uniE65C</div>
<div class="fontclass">#icon-search</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pullleft"></use>
</svg>
<div class="name">uniE71F</div>
<div class="fontclass">#icon-pullleft</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-notice"></use>
</svg>
<div class="name">uniE70A</div>
<div class="fontclass">#icon-notice</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-attention"></use>
</svg>
<div class="name">uniE73D</div>
<div class="fontclass">#icon-attention</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rounddown"></use>
</svg>
<div class="name">uniE75C</div>
<div class="fontclass">#icon-rounddown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-upload"></use>
</svg>
<div class="name">uniE75D</div>
<div class="fontclass">#icon-upload</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-douban"></use>
</svg>
<div class="name">uniE607</div>
<div class="fontclass">#icon-douban</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
<div class="name">uniE604</div>
<div class="fontclass">#icon-QQ</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caidan1"></use>
</svg>
<div class="name">uniE628</div>
<div class="fontclass">#icon-caidan1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-appreciatefill"></use>
</svg>
<div class="name">uniE6E3</div>
<div class="fontclass">#icon-appreciatefill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-appreciate"></use>
</svg>
<div class="name">uniE644</div>
<div class="fontclass">#icon-appreciate</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">uniE646</div>
<div class="fontclass">#icon-close</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
<div class="name">uniE74A</div>
<div class="fontclass">#icon-calendar</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-location"></use>
</svg>
<div class="name">uniE651</div>
<div class="fontclass">#icon-location</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-check"></use>
</svg>
<div class="name">uniE645</div>
<div class="fontclass">#icon-check</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-roundcheck"></use>
</svg>
<div class="name">uniE657</div>
<div class="fontclass">#icon-roundcheck</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-camera"></use>
</svg>
<div class="name">uniE665</div>
<div class="fontclass">#icon-camera</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-likefill"></use>
</svg>
<div class="name">uniE668</div>
<div class="fontclass">#icon-likefill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-warn"></use>
</svg>
<div class="name">uniE663</div>
<div class="fontclass">#icon-warn</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-comment"></use>
</svg>
<div class="name">uniE667</div>
<div class="fontclass">#icon-comment</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-like"></use>
</svg>
<div class="name">uniE669</div>
<div class="fontclass">#icon-like</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-back"></use>
</svg>
<div class="name">uniE679</div>
<div class="fontclass">#icon-back</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-my1"></use>
</svg>
<div class="name">uniE686</div>
<div class="fontclass">#icon-my1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-more"></use>
</svg>
<div class="name">uniE684</div>
<div class="fontclass">#icon-more</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-question"></use>
</svg>
<div class="name">uniE691</div>
<div class="fontclass">#icon-question</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pullright"></use>
</svg>
<div class="name">uniE720</div>
<div class="fontclass">#icon-pullright</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-countdown"></use>
</svg>
<div class="name">uniE708</div>
<div class="fontclass">#icon-countdown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mark"></use>
</svg>
<div class="name">uniE731</div>
<div class="fontclass">#icon-mark</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-unfold"></use>
</svg>
<div class="name">uniE661</div>
<div class="fontclass">#icon-unfold</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-file"></use>
</svg>
<div class="name">uniE739</div>
<div class="fontclass">#icon-file</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-my"></use>
</svg>
<div class="name">uniE78B</div>
<div class="fontclass">#icon-my</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-write"></use>
</svg>
<div class="name">uniE761</div>
<div class="fontclass">#icon-write</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-community"></use>
</svg>
<div class="name">uniE741</div>
<div class="fontclass">#icon-community</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hot"></use>
</svg>
<div class="name">uniE758</div>
<div class="fontclass">#icon-hot</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-text"></use>
</svg>
<div class="name">uniE791</div>
<div class="fontclass">#icon-text</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-menu"></use>
</svg>
<div class="name">uniE769</div>
<div class="fontclass">#icon-menu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bing"></use>
</svg>
<div class="name">bing</div>
<div class="fontclass">#icon-bing</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sakura"></use>
</svg>
<div class="name">sakura-black</div>
<div class="fontclass">#icon-sakura</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pixiv"></use>
</svg>
<div class="name">pixiv-gray</div>
<div class="fontclass">#icon-pixiv</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gear"></use>
</svg>
<div class="name">gear</div>
<div class="fontclass">#icon-gear</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dots"></use>
</svg>
<div class="name">dots</div>
<div class="fontclass">#icon-dots</div>
</li>
</ul>
<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="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
<pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
vertical-align: <span class="hljs-number">-0.15</span>em;
fill: currentColor;
overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
</span></code></pre>
</div>
</body>
</html>