README.md · 雪山千古冷，独照峨嵋峰/easy-icon

🚀 A beautiful, easy-to-use web font icon library

[TOC]

0. Quick start

Easy-ICON is a high-value, easy-to-use web font icon library, you only need to introduce a css file (or an npm package), you can simply use more than 1,000 beautiful icons

The following is a simple example introduced by the css file

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
</head>
<body>
    <i class="ei-heart ei-xs" style="color: red;"></i>
    <i class="ei-spinner-indicator ei-spin"></i> <!--A rotating loading-->
    <i class="ea-star-half-empty"></i>
    <i class="et-like ei-l"></i>
    <i class="ef-html5 ei-xl"></i>
    <i class="el-goods ei-4x"></i>
</body>
</html>

Effect picture:

😃 Experience 1583 icons online

1. Introduction

Easy-ICON is a easy to use web font icon lib

Easy-ICON uses multiple icon libraries, such as Font-Awesome, to thank the original author for their contributions!

Features:

Very simple to use
1583 commonly used font icons, including multiple font libraries
Customize any css style, the zoom is not blurred
Use according to module

2.Install & Use

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

2.2 OR Use 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';

Or use a collection version

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

2.3 Useage

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

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

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

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

See which icons you can use

Expand all icons

3.Others

3.1 Spin the icon

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

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

The ei-spin class behaves consistently for the five modules

3.2 Choose size

Easy-icon comes in eight sizes to choose from, from small to large:xs,s,l,lg,2x,3x,4x,5x

The size class performs the same for the five modules

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

Of course, you can use css to customize any style.

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

🚀 A beautiful, easy-to-use web font icon library

0. Quick start

1. Introduction

2.Install & Use

2.1 Use css file reference：(Recommended to download to local and then reference local files)

2.2 OR Use npm:

2.3 Useage

3.Others

3.1 Spin the icon

3.2 Choose size

简介

发行版

贡献者

近期动态

雪山千古冷，独照峨嵋峰 / easy-icon .gitee-modal { width: 500px !important; }

🚀 A beautiful, easy-to-use web font icon library

0. Quick start

1. Introduction

2.Install & Use

2.1 Use css file reference：(Recommended to download to local and then reference local files)

2.2 OR Use npm:

2.3 Useage

3.Others

3.1 Spin the icon

3.2 Choose size

简介

发行版

贡献者

近期动态

搜索帮助

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