Score
0
Watch 7 Star 19 Fork 2

theajack / easy-iconJavaScriptMIT

Join us
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
高颜值、简单易用的字体图标库 spread retract

https://theajack.gitee.io/easy-icon

Clone or download
Loading...
README.md
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

<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

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.

Comments ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/theajack/easy-icon.git
git@gitee.com:theajack/easy-icon.git
theajack
easy-icon
easy-icon
master

Help Search

205735 778617b6 1899542 205747 347fc4a1 1899542