1 Star 0 Fork 12

雪山千古冷,独照峨嵋峰 / easy-icon

forked from theajack / easy-icon 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 8.05 KB
一键复制 编辑 原始数据 按行查看 历史
theajack 提交于 2020-05-20 19:04 . feat: 修改文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Easy-ICON - A Easy to Use Web Font ICON lib</title>
<meta name="keywords" content="font icon lib,js lib,web font">
<meta name="description" content="Easy-ICON - A Easy to Use Web Font ICON lib">
<link rel="stylesheet" href="./dist/easy-icon-all.css">
<link rel="stylesheet" href="./assets/index.css">
<link rel="stylesheet" href="./assets/navi.css">
<link rel="stylesheet" href="./assets/doc.css">
<script src="./assets/index.js"></script>
<script src="./assets/navi.js"></script>
</head>
<body>
<div id='navi'>
<div id='logo'>
<a class='link-item' href='https://github.com/theajack/easy-icon' target="blank"><img src="./assets/images/logo.png" alt=""></a>
</div>
<div class='navi-w'>
<span class='navi-item active' navi-target='iconShow'>Icon</span>
<span class='navi-item' navi-target='useBlock'>Use</span>
<span class='navi-item' navi-target='spinBlock'>Spin</span>
<span class='navi-item' navi-target='sizeBlock'>Size</span>
</div>
<div class='link-w'>
<a class='link-item' href='https://theajack.gitee.io/easy-icon/index_cn.html' target="blank">中文</a>
<a class='link-item' href='https://github.com/theajack/easy-icon' target="blank"><i class="ei-github"></i></a>
</div>
</div>
<div id="iconsExample" class="text">
<div id="iconShow" class="t-center">
<span id='icons'>
<i class="ei-resize"></i>
<i class="ei-resize icon-middle"></i>
<i class="ei-resize icon-large"></i>
<i class="ei-resize icon-slarge"></i>
</span>
<div class='input-w'>
<input type="text" id='fullHtmlInput' readonly="" class="ei-input">
<button class="ei-btn code-copy" title="Copy" onclick="copyInputValue('fullHtmlInput')"><i
class="ei-copy"></i></button>
</div>
<div class='input-w'>
<input type="text" id='searchInput' class="ei-input" placeholder="Search icon.">
<button class="ei-btn code-copy" title="Switch Mode" onclick="toggleMode(this)"><i class="ei-th"></i></button>
</div>
</div>
<div id='no-icon'>Sorry! No results found.</div>
<ul class="clearfix" id="iconList">
<!-- xxx -->
</ul>
</div>
<div id="no-icon" style="display: block;">Easy-ICON is powered by Font-Awesome, thanks a lot!</div>
<div id='useBlock'>
<div class="doc-title">How To Use?</div>
<div class='doc-title-s'>1.Install</div>
<div class='doc-text'>a.Use css file reference:(Recommended to download to local and then reference local files)</div>
<div class='doc-text'>Easy-icon is divided into five modules, which can be referenced independently</div>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.css"></pre>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css"></pre>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css"></pre>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css"></pre>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.css"></pre>
<div class='doc-text'>Or use a collection version</div>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css"></pre>
<pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.min.css"></pre>
<div class='doc-text'>b.Install using npm:</div>
<pre class='demo-code'>npm i easy-icon</pre>
<div class='doc-text'>You only need to import once:</div>
<div class='doc-text'>Same as css file reference, can be referenced independently by module, without using all</div>
<pre class='demo-code'>import 'easy-icon'</pre>
<pre class='demo-code'>import 'easy-icon/easy-icon-a.js'</pre>
<pre class='demo-code'>import 'easy-icon/easy-icon-f.js'</pre>
<pre class='demo-code'>import 'easy-icon/easy-icon-t.js'</pre>
<pre class='demo-code'>import 'easy-icon/easy-icon-l.js'</pre>
<div class='doc-text'>Or use a collection version</div>
<pre class='demo-code'>import 'easy-icon/easy-icon-all.js'</pre>
<div class='doc-title-s'>2.Useage</div>
<div class='doc-text'>It's very easy to use, you just need to insert the tag anywhere:</div>
<pre class='demo-code'>&lt;i class="ei-smile">&lt;/i></pre>
<div class='doc-text'>Then you will see a lovely icon like this: <i class="ei-smile"></i></div>
<div class='doc-text'>It should be noted that the prefixes corresponding to the five modules are different, respectively</div>
<ul>
<li>easy-icon: ei-</li>
<li>easy-icon-a: ea-</li>
<li>easy-icon-f: ef-</li>
<li>easy-icon-t: et-</li>
<li>easy-icon-l: el-</li>
</ul>
</div>
<div id='spinBlock'>
<div class="doc-title">Spin the icon!</div>
<div class='doc-text'>You can add the <span class="red">ei-spin</span> class to spin the icon:</div>
<pre class='demo-code'>&lt;i class="ei-spinner-snake ei-spin">&lt;/i></pre>
<div class='doc-text'>The effect is like this: <i class="ei-spinner-snake ei-spin"></i></div>
<div class='doc-text'>The ei-spin class behaves consistently for the five modules</div>
</div>
<div id='sizeBlock'>
<div class="doc-title">Choose size</div>
<div class='doc-text'>
Easy-icon comes in eight sizes to choose from, from small to large:
<span class="red">xs</span>,<span class="red">s</span>,<span class="red">l</span>,<span class="red">xl</span>,<span class="red">2x</span>,<span class="red">3x</span>,<span class="red">4x</span>,<span class="red">5x</span>
</div>
<pre class='demo-code'>&lt;i class="ei-smile ei-xs">&lt;/i>
&lt;i class="ei-smile ei-s">&lt;/i>
&lt;i class="ei-smile ei-l">&lt;/i>
&lt;i class="ei-smile ei-xl">&lt;/i>
&lt;i class="ei-smile ei-2x">&lt;/i>
&lt;i class="ei-smile ei-3x">&lt;/i>
&lt;i class="ei-smile ei-4x">&lt;/i>
&lt;i class="ei-smile ei-5x">&lt;/i>
</pre>
<div class='doc-text'>The effect is like this: <i class="ei-smile ei-xs"></i><i class="ei-smile ei-s"></i><i class="ei-smile ei-l"></i><i class="ei-smile ei-xl"></i><i class="ei-smile ei-2x"></i><i class="ei-smile ei-3x"></i><i class="ei-smile ei-4x"></i><i class="ei-smile ei-5x"></i></div>
<div class='doc-text'>Of course, you can use css to customize any style.</div>
<div class='doc-text'>The size class performs the same for the five modules</div>
</div>
<div id="footer" class="bg-black text-white part">
<div id="footerLink">
<a href='https://github.com/theajack' target="blank"><span class="link">GitHub</span></a>
<span class="split-icon">|</span>
<a href='http://weibo.com/p/1005055304330572/home?from=page_100505&amp;mod=TAB&amp;is_all=1' target="blank"><span class="link">Sina Micro-blog</span></a>
<span class="split-icon">|</span>
Email:theajack@qq.com
<span class="split-icon d-hide">|</span>
<a href='https://www.theajack.com' target="blank"><span class="link d-hide">theajack.com</span></a>
</div>
<div id="copyright">
&copy; <span id="_year">2019</span> TheaJack All rights
reserved
</div>
</div>
<div id='toastEle'></div>
<script src="./assets/buildDom.js"></script>
</body>
</html>
JavaScript
1
https://gitee.com/wangyinjie/easy-icon.git
git@gitee.com:wangyinjie/easy-icon.git
wangyinjie
easy-icon
easy-icon
master

搜索帮助