Online trial | Github | Gitee | 中文
[TOC]
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
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
Easy-icon is divided into five modules, which can be referenced independently
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"><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">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';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 a collection version
import 'easy-icon/offline/easy-icon-all.js';Css file
import 'easy-icon/offline/css/easy-icon-all.css';It's very easy to use, you just need to insert the tag anywhere:
<i class="ei-smile"></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-
Expand all icons
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
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.
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>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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent