mirror of https://github.com/mashirozx/sakura.git
413 lines
16 KiB
HTML
413 lines
16 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>IconFont</title>
|
||
<link rel="stylesheet" href="demo.css">
|
||
<link rel="stylesheet" href="iconfont.css">
|
||
</head>
|
||
<body>
|
||
<div class="main markdown">
|
||
<h1>IconFont 图标</h1>
|
||
<ul class="icon_lists clear">
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-black-cat"></i>
|
||
<div class="name">cat</div>
|
||
<div class="fontclass">.icon-black-cat</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-white-cat"></i>
|
||
<div class="name">cat-in-white-silhoue</div>
|
||
<div class="fontclass">.icon-white-cat</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-markdown"></i>
|
||
<div class="name">markdown</div>
|
||
<div class="fontclass">.icon-markdown</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-right"></i>
|
||
<div class="name">uniE6A3</div>
|
||
<div class="fontclass">.icon-right</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-caidan"></i>
|
||
<div class="name">uniE6A0</div>
|
||
<div class="fontclass">.icon-caidan</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-delete"></i>
|
||
<div class="name">uniE6B4</div>
|
||
<div class="fontclass">.icon-delete</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-message"></i>
|
||
<div class="name">uniE6BC</div>
|
||
<div class="fontclass">.icon-message</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-link"></i>
|
||
<div class="name">uniE6BF</div>
|
||
<div class="fontclass">.icon-link</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-weibo"></i>
|
||
<div class="name">uniE6C4</div>
|
||
<div class="fontclass">.icon-weibo</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-info"></i>
|
||
<div class="name">uniE6E5</div>
|
||
<div class="fontclass">.icon-info</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-forward"></i>
|
||
<div class="name">uniE6EB</div>
|
||
<div class="fontclass">.icon-forward</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-share"></i>
|
||
<div class="name">uniE6F3</div>
|
||
<div class="fontclass">.icon-share</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-fold"></i>
|
||
<div class="name">uniE6DE</div>
|
||
<div class="fontclass">.icon-fold</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-favorfill"></i>
|
||
<div class="name">uniE64B</div>
|
||
<div class="fontclass">.icon-favorfill</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-time"></i>
|
||
<div class="name">uniE65F</div>
|
||
<div class="fontclass">.icon-time</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-favor"></i>
|
||
<div class="name">uniE64C</div>
|
||
<div class="fontclass">.icon-favor</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-weixin"></i>
|
||
<div class="name">uniE66F</div>
|
||
<div class="fontclass">.icon-weixin</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-github"></i>
|
||
<div class="name">uniE66C</div>
|
||
<div class="fontclass">.icon-github</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-notification"></i>
|
||
<div class="name">uniE66B</div>
|
||
<div class="fontclass">.icon-notification</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-tags"></i>
|
||
<div class="name">uniE68C</div>
|
||
<div class="fontclass">.icon-tags</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-pulldown"></i>
|
||
<div class="name">uniE69F</div>
|
||
<div class="fontclass">.icon-pulldown</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-search"></i>
|
||
<div class="name">uniE65C</div>
|
||
<div class="fontclass">.icon-search</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-pullleft"></i>
|
||
<div class="name">uniE71F</div>
|
||
<div class="fontclass">.icon-pullleft</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-notice"></i>
|
||
<div class="name">uniE70A</div>
|
||
<div class="fontclass">.icon-notice</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-attention"></i>
|
||
<div class="name">uniE73D</div>
|
||
<div class="fontclass">.icon-attention</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-rounddown"></i>
|
||
<div class="name">uniE75C</div>
|
||
<div class="fontclass">.icon-rounddown</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-upload"></i>
|
||
<div class="name">uniE75D</div>
|
||
<div class="fontclass">.icon-upload</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-douban"></i>
|
||
<div class="name">uniE607</div>
|
||
<div class="fontclass">.icon-douban</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-QQ"></i>
|
||
<div class="name">uniE604</div>
|
||
<div class="fontclass">.icon-QQ</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-caidan1"></i>
|
||
<div class="name">uniE628</div>
|
||
<div class="fontclass">.icon-caidan1</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-appreciatefill"></i>
|
||
<div class="name">uniE6E3</div>
|
||
<div class="fontclass">.icon-appreciatefill</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-appreciate"></i>
|
||
<div class="name">uniE644</div>
|
||
<div class="fontclass">.icon-appreciate</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-close"></i>
|
||
<div class="name">uniE646</div>
|
||
<div class="fontclass">.icon-close</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-calendar"></i>
|
||
<div class="name">uniE74A</div>
|
||
<div class="fontclass">.icon-calendar</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-location"></i>
|
||
<div class="name">uniE651</div>
|
||
<div class="fontclass">.icon-location</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-check"></i>
|
||
<div class="name">uniE645</div>
|
||
<div class="fontclass">.icon-check</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-roundcheck"></i>
|
||
<div class="name">uniE657</div>
|
||
<div class="fontclass">.icon-roundcheck</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-camera"></i>
|
||
<div class="name">uniE665</div>
|
||
<div class="fontclass">.icon-camera</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-likefill"></i>
|
||
<div class="name">uniE668</div>
|
||
<div class="fontclass">.icon-likefill</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-warn"></i>
|
||
<div class="name">uniE663</div>
|
||
<div class="fontclass">.icon-warn</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-comment"></i>
|
||
<div class="name">uniE667</div>
|
||
<div class="fontclass">.icon-comment</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-like"></i>
|
||
<div class="name">uniE669</div>
|
||
<div class="fontclass">.icon-like</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-back"></i>
|
||
<div class="name">uniE679</div>
|
||
<div class="fontclass">.icon-back</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-my1"></i>
|
||
<div class="name">uniE686</div>
|
||
<div class="fontclass">.icon-my1</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-more"></i>
|
||
<div class="name">uniE684</div>
|
||
<div class="fontclass">.icon-more</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-question"></i>
|
||
<div class="name">uniE691</div>
|
||
<div class="fontclass">.icon-question</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-pullright"></i>
|
||
<div class="name">uniE720</div>
|
||
<div class="fontclass">.icon-pullright</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-countdown"></i>
|
||
<div class="name">uniE708</div>
|
||
<div class="fontclass">.icon-countdown</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-mark"></i>
|
||
<div class="name">uniE731</div>
|
||
<div class="fontclass">.icon-mark</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-unfold"></i>
|
||
<div class="name">uniE661</div>
|
||
<div class="fontclass">.icon-unfold</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-file"></i>
|
||
<div class="name">uniE739</div>
|
||
<div class="fontclass">.icon-file</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-my"></i>
|
||
<div class="name">uniE78B</div>
|
||
<div class="fontclass">.icon-my</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-write"></i>
|
||
<div class="name">uniE761</div>
|
||
<div class="fontclass">.icon-write</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-community"></i>
|
||
<div class="name">uniE741</div>
|
||
<div class="fontclass">.icon-community</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-hot"></i>
|
||
<div class="name">uniE758</div>
|
||
<div class="fontclass">.icon-hot</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-text"></i>
|
||
<div class="name">uniE791</div>
|
||
<div class="fontclass">.icon-text</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-menu"></i>
|
||
<div class="name">uniE769</div>
|
||
<div class="fontclass">.icon-menu</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-bing"></i>
|
||
<div class="name">bing</div>
|
||
<div class="fontclass">.icon-bing</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-sakura"></i>
|
||
<div class="name">sakura-black</div>
|
||
<div class="fontclass">.icon-sakura</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-pixiv"></i>
|
||
<div class="name">pixiv-gray</div>
|
||
<div class="fontclass">.icon-pixiv</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-gear"></i>
|
||
<div class="name">gear</div>
|
||
<div class="fontclass">.icon-gear</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon iconfont icon-dots"></i>
|
||
<div class="name">dots</div>
|
||
<div class="fontclass">.icon-dots</div>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<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="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
|
||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
|
||
<blockquote>
|
||
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||
</blockquote>
|
||
</div>
|
||
</body>
|
||
</html>
|