easy-icon

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

Usage no npm install needed!

<script type="module">
  import easyIcon from 'https://cdn.skypack.dev/easy-icon';
</script>

README

Easy-ICON

Version Downloads Size License TopLang issue

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

Online trial | Github | Gitee | 中文


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

Easy-ICON

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

  1. Very simple to use
  2. 1583 commonly used font icons, including multiple font libraries
  3. Customize any css style, the zoom is not blurred
  4. 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

2.1.1 Online Mode

The online mode relies on the font library on the network, while the offline mode converts the font library to base64 so that it can be used offline

<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.1.2 Offline Mode
<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">

Or use a collection version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.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

2.2.1 Online Mode
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.2.2 Offline Mode
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';

Or use a collection version

import 'easy-icon/offline/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

Easy-ICON
Expand all icons Easy-ICON Easy-ICON Easy-ICON Easy-ICON

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.

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

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

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

3.4 Rotate

Use ei-rotate-90, ei-rotate-180, ei-rotate-270 to rotate the icon clockwise 90, 180, 270 degrees respectively

<i class="ei-smile ei-rotate-90"></i>
<i class="ei-smile ei-rotate-180"></i>
<i class="ei-smile ei-rotate-270"></i>