Easy-ICON - A Easy to Use Web Font ICON lib

How To Use?

1. Install

a.Use css file reference:(Recommended to download to local and then reference local files)

Easy-icon is divided into five modules, which can be referenced independently

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

Or use a collection version

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

b.Install using npm:

npm i easy-icon

You only need to import once:

Same as css file reference, can be referenced independently by module, without using all

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

You can also directly import css files (need to be used with tools such as 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';

Or use a collection version

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

Css file

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

2. Useage

It's very easy to use, you just need to insert the tag anywhere:

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

Then you will see a lovely icon like this:

It should be noted that the prefixes corresponding to the five modules are different, respectively

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

3. Offline mode

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

a.css file reference

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

Collection version

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

b.Install using 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';

You can also directly import css files (need to be used with tools such as 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';

Or use the collection version

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

Css file

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

Spin the icon!

1. Spin

You can add the ei-spin class to spin the icon:

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

The effect is like this:

The ei-spin class behaves consistently for the five modules

2. Flip

Use ei-flip-horizontal to flip the icon 180 degrees around the vertical axis:

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

Effect: Before flipping: After flipping:

Use ei-flip-vertical to flip the icon 180 degrees around the horizontal axis:

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

Effect: Before flipping: After flipping:

3. Rotate

Use ei-rotate-90、ei-rotate-180、ei-rotate-270 to rotate the icon clockwise by 90, 180, and 270 degrees, respectively:

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

Effect: