介绍
Easy-ICON 是一款高颜值、简单易用的web字体图标库，只需引入一个css文件（或一个npm包），您就可以简单地使用1000多个漂亮的图标。
仓库地址
https://gitee.com/theajack/easy-icon
https://github.com/theajack/easy-icon
简单示例
以下是css文件引入的一个简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="easy-icon-all.css">
</head>
<body>
<i class="ei-heart ei-xs" style="color: red;"></i>
<i class="ei-spinner-indicator ei-spin"></i> <!--一个旋转的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>特性：
- 使用非常简单
- 1583个常用的字体图标，来自多个字体图库
- 自定义任意css样式，缩放不模糊
- 按模块部分使用
安装使用
使用css文件引用:(推荐下载到本地然后引用本地文件)
- easy-icon 共分为了五个模块，可以独立单独引用
<link rel="stylesheet" href="easy-icon.css">
<link rel="stylesheet" href="easy-icon-a.css">
<link rel="stylesheet" href="easy-icon-f.css">
<link rel="stylesheet" href="easy-icon-t.css">
<link rel="stylesheet" href="easy-icon-l.css">或者使用一个集合的版本
<link rel="stylesheet" href="easy-icon-all.css">- 使用npm安装:
npm i easy-icon;只需要引用一次即可:
与css文件引用一样，可以模块独立引用，无需使用全部
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';或者使用集合版本
import 'easy-icon/easy-icon-all.js';- 使用
Easy ICON使用起来十分简单，您只需要在您想要使用的地方插入一个如下的标签即可:
<i class="ei-spmile"></i>需要注意的是，五个模块对应的前缀不一样，分别为
- easy-icon-a: ei-
- easy-icon-a: ea-
- easy-icon-f: ef-
- easy-icon-t: et-
- easy-icon-l: el-
- 其他
让图标旋转，可以通过添加 ei-spin 类来使图标旋转:
<i class="ei-spinner-snake ei-spin"></i>ei-spin 类对五个模块表现一致
选择尺寸
Easy ICON 内置了八种不同大小的尺寸，从小到大依次为::xs,s,l,lg,2x,3x,4x,5x
尺寸类对五个模块表现一致
<i class="ei-smile ei-s"></i>
<i class="ei-smile ei-xs"></i>可以使用任何自定义css样式来覆盖默认的样式
总结
easy-icon是一个开源不久的字体图标库，集成了1500+个图标，方便安装，使用简单！可以尝试！