easy-icon
/
index_cn.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 - 一个简单易用的icon字体库</title>
    <meta name="keywords" content="字体图标库,js字体图标库,web图标">
    <meta name="description" content="Easy-ICON - 一个简单易用的icon字体库">
    <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'>图标</span>
            <span class='navi-item' navi-target='useBlock'>使用</span>
            <span class='navi-item' navi-target='spinBlock'>旋转</span>
            <span class='navi-item' navi-target='sizeBlock'>尺寸</span>
        </div>
        <div class='link-w'>
            <a class='link-item' href='https://theajack.gitee.io/easy-icon/' target="blank">EN</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="复制" 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="切换模式" onclick="toggleMode(this)"><i class="ei-th"></i></button>
            </div>
        </div>
        <div id='no-icon'>没有找到查询结果</div>
        <ul class="clearfix" id="iconList">
            <!-- xxx -->
        </ul>
    </div>
    <div id="no-icon" style="display: block;">Easy-ICON 使用 Font-Awesome 图标库, 对原作者做出的贡献表示感谢!</div>
    <div id='useBlock'>
        <div class="doc-title">如何使用?</div>
        <div class='doc-title-s'>1. 安装</div>
        <div class='doc-title-ss'>a.使用css文件引用:(推荐下载到本地然后引用本地文件)</div>
        <div class='doc-text'>easy-icon 共分为了五个模块，可以独立单独引用</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'>集合版本</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.使用npm方式安装:</div>
        <pre class='demo-code'>npm i easy-icon</pre>
        <div class='doc-text'>您只需要引用一次即可:</div>
        <div class='doc-text'>与css文件引用一样，可以模块独立引用，无需使用全部</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'>也可以直接引入 css 文件 (需搭配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'>或者使用集合版本</div>
        <pre class='demo-code'>import 'easy-icon/easy-icon-all.js';</pre>
        <div class='doc-text'>引用css文件</div>
        <pre class='demo-code'>import 'easy-icon/css/easy-icon-all.css';</pre>

        <div class='doc-title-s'>2. 使用</div>
        <div class='doc-text'>Easy ICON使用起来十分简单，您只需要在您想要使用的地方插入一个如下的标签即可:</div>
        <pre class='demo-code'>&lt;i class="ei-smile">&lt;/i></pre>
        <div class='doc-text'>然后您就可以看到一个可爱的图标: <i class="ei-smile"></i></div>

        <div class='doc-text'>需要注意的是，五个模块对应的前缀不一样，分别为</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. 离线模式</div>
        <div class='doc-text'>离线模式将字体库转换成base64，从而可以离线使用。引用方式与在线模式一样，只不过文件不同</div>

        <div class='doc-title-ss'>a.css文件引用</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'>集合版本</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.使用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'>也可以直接引入 css 文件 (需搭配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'>或者使用集合版本</div>
        <pre class='demo-code'>import 'easy-icon/offline/easy-icon-all.js';</pre>
        <div class='doc-text'>引用css文件</div>
        <pre class='demo-code'>import 'easy-icon/offline/css/easy-icon-all.css';</pre>
    </div>
    <div id='spinBlock'>
        <div class="doc-title">让图标旋转!</div>
        <div class="doc-title-s">1. 旋转动画</div>
        <div class='doc-text'>您可以通过添加 <span class="red">ei-spin</span> 类来使图标旋转:</div>
        <pre class='demo-code'>&lt;i class="ei-spinner-snake ei-spin">&lt;/i></pre>
        <div class='doc-text'>效果: <i class="ei-spinner-snake ei-spin"></i></div>
        <div class='doc-text'>ei-spin 类对五个模块表现一致</div>

        <div class="doc-title-s">2. 翻转</div>

        <div class='doc-text'>使用 <span class="red">ei-flip-horizontal</span> 可以使图标绕竖直轴翻转180度:</div>
        <pre class='demo-code'>&lt;i class="ei-thumbs-o-up ei-flip-horizontal">&lt;/i></pre>
        <div class='doc-text'>效果: 翻转前：<i class="ei-thumbs-o-up"></i> 翻转后：<i class="ei-thumbs-o-up ei-flip-horizontal"></i></div>
        <br>
        <div class='doc-text'>使用 <span class="red">ei-flip-vertical</span> 可以使图标绕水平轴翻转180度:</div>
        <pre class='demo-code'>&lt;i class="ei-thumbs-o-up ei-flip-vertical">&lt;/i></pre>
        <div class='doc-text'>效果: 翻转前：<i class="ei-thumbs-o-up"></i> 翻转后：<i class="ei-thumbs-o-up ei-flip-vertical"></i></div>

        <div class="doc-title-s">3. 旋转</div>
        <div class='doc-text'>使用 <span class="red">ei-rotate-90</span>、<span class="red">ei-rotate-180</span>、<span class="red">ei-rotate-270</span> 分别可以使图标按顺时针方向旋转 90、180、270度:</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'>效果：
            <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">选择尺寸</div>
        <div class='doc-text'>
            Easy ICON 内置了八种不同大小的尺寸，从小到大依次为:
            <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'>效果: <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'>当然，您可以使用任何自定义css样式来覆盖默认的样式.</div>
        <div class='doc-text'>尺寸类对五个模块表现一致</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">新浪微博</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>