Easy-ICON - 一个简单易用的icon字体库

如何使用?

1. 安装

a.使用css文件引用:(推荐下载到本地然后引用本地文件)

easy-icon 共分为了五个模块，可以独立单独引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.css">

集合版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">

b.使用npm方式安装:

npm i easy-icon

您只需要引用一次即可:

与css文件引用一样，可以模块独立引用，无需使用全部

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';

也可以直接引入 css 文件 (需搭配css-loader等工具使用)

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';

或者使用集合版本

import 'easy-icon/easy-icon-all.js';

引用css文件

import 'easy-icon/css/easy-icon-all.css';

2. 使用

Easy ICON使用起来十分简单，您只需要在您想要使用的地方插入一个如下的标签即可:

<i class="ei-smile"></i>

然后您就可以看到一个可爱的图标:

需要注意的是，五个模块对应的前缀不一样，分别为

easy-icon: ei-
easy-icon-a: ea-
easy-icon-f: ef-
easy-icon-t: et-
easy-icon-l: el-

3. 离线模式

离线模式将字体库转换成base64，从而可以离线使用。引用方式与在线模式一样，只不过文件不同

a.css文件引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.o.css">

集合版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.css">

b.使用npm方式安装:

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';

也可以直接引入 css 文件 (需搭配css-loader等工具使用)

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';

或者使用集合版本

import 'easy-icon/offline/easy-icon-all.js';

引用css文件

import 'easy-icon/offline/css/easy-icon-all.css';

让图标旋转!

1. 旋转动画

您可以通过添加 ei-spin 类来使图标旋转:

<i class="ei-spinner-snake ei-spin"></i>

效果:

ei-spin 类对五个模块表现一致

2. 翻转

使用 ei-flip-horizontal 可以使图标绕竖直轴翻转180度:

<i class="ei-thumbs-o-up ei-flip-horizontal"></i>

效果: 翻转前：翻转后：

使用 ei-flip-vertical 可以使图标绕水平轴翻转180度:

<i class="ei-thumbs-o-up ei-flip-vertical"></i>

效果: 翻转前：翻转后：

3. 旋转

使用 ei-rotate-90、ei-rotate-180、ei-rotate-270 分别可以使图标按顺时针方向旋转 90、180、270度:

<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>

效果：