easy-icon
/
index.html

<!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="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/assets/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/assets/navi.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/assets/doc.css">
    <script src="https://cdn.jsdelivr.net/gh/theajack/easy-icon/assets/index.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/theajack/easy-icon/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="https://cdn.jsdelivr.net/gh/theajack/easy-icon/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 etc, 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-title-ss'>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">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css">
&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>
        <div class='doc-title-ss'>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';
import 'easy-icon/easy-icon-a.js';
import 'easy-icon/easy-icon-f.js';
import 'easy-icon/easy-icon-t.js';
import 'easy-icon/easy-icon-l.js';</pre>
<div class='doc-text'>You can also directly import css files (need to be used with tools such as css-loader)</div>
<pre class='demo-code'>import 'easy-icon/css/easy-icon.css';
import 'easy-icon/css/easy-icon-a.css';
import 'easy-icon/css/easy-icon-f.css';
import 'easy-icon/css/easy-icon-t.css';
import 'easy-icon/css/easy-icon-l.css';</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-text'>Css file</div>
        <pre class='demo-code'>import 'easy-icon/css/easy-icon-all.css';</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 class='doc-title-s'>3. Offline mode</div>
        <div class='doc-text'>The offline mode converts the font library to base64 so that it can be used offline. The citation method is the same as the online mode, but the files are different</div>

        <div class='doc-title-ss'>a.css file reference</div>
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.o.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.o.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.o.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.o.css">
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.o.css"></pre>
        <div class='doc-text'>Collection version</div>
        <pre class='demo-code'>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.css"></pre>

        <div class='doc-title-ss'>b.Install using npm:</div>

        <pre class='demo-code'>import 'easy-icon/offline';
import 'easy-icon/offline/easy-icon-a.js';
import 'easy-icon/offline/easy-icon-f.js';
import 'easy-icon/offline/easy-icon-t.js';
import 'easy-icon/offline/easy-icon-l.js';</pre>
        <div class='doc-text'>You can also directly import css files (need to be used with tools such as css-loader)</div>
<pre class='demo-code'>import 'easy-icon/offline/css/easy-icon.css';
import 'easy-icon/offline/css/easy-icon-a.css';
import 'easy-icon/offline/css/easy-icon-f.css';
import 'easy-icon/offline/css/easy-icon-t.css';
import 'easy-icon/offline/css/easy-icon-l.css';</pre>
        <div class='doc-text'>Or use the collection version</div>
        <pre class='demo-code'>import 'easy-icon/offline/easy-icon-all.js';</pre>
        <div class='doc-text'>Css file</div>
        <pre class='demo-code'>import 'easy-icon/offline/css/easy-icon-all.css';</pre>
    </div>
    <div id='spinBlock'>
        <div class="doc-title">Spin the icon!</div>
        <div class="doc-title-s">1. Spin</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 class="doc-title-s">2. Flip</div>

        <div class='doc-text'>Use <span class="red"> ei-flip-horizontal </span> to flip the icon 180 degrees around the vertical axis:</div>
        <pre class='demo-code'>&lt;i class="ei-thumbs-o-up ei-flip-horizontal">&lt;/i></pre>
        <div class='doc-text'>Effect: Before flipping:<i class="ei-thumbs-o-up"></i> After flipping:<i class="ei-thumbs-o-up ei-flip-horizontal"></i></div>
        <br>
        <div class='doc-text'>Use <span class="red"> ei-flip-vertical </span> to flip the icon 180 degrees around the horizontal axis:</div>
        <pre class='demo-code'>&lt;i class="ei-thumbs-o-up ei-flip-vertical">&lt;/i></pre>
        <div class='doc-text'>Effect: Before flipping: <i class="ei-thumbs-o-up"></i> After flipping:<i class="ei-thumbs-o-up ei-flip-vertical"></i></div>

        <div class="doc-title-s">3. Rotate</div>
        <div class='doc-text'>Use <span class="red">ei-rotate-90</span>、<span class="red">ei-rotate-180</span>、<span class="red">ei-rotate-270</span> to rotate the icon clockwise by 90, 180, and 270 degrees, respectively:</div>
        <pre class='demo-code'>&lt;i class="ei-smile">&lt;/i>
&lt;i class="ei-smile ei-rotate-90">&lt;/i>
&lt;i class="ei-smile ei-rotate-180">&lt;/i>
&lt;i class="ei-smile ei-rotate-270">&lt;/i></pre>
        <div class='doc-text'>Effect:
            <i class="ei-smile"></i>
            <i class="ei-smile ei-rotate-90"></i>
            <i class="ei-smile ei-rotate-180"></i>
            <i class="ei-smile ei-rotate-270"></i>
        </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">2020</span> TheaJack All rights
            reserved
        </div>
    </div>
    <div id='toastEle'></div>
    <script src="https://cdn.jsdelivr.net/gh/theajack/easy-icon/assets/buildDom.js"></script>
    <script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1281058979&web_id=1281058979"></script>
</body>

</html>