在线使用 | Github | Gitee | English
[TOC]
Easy-ICON 是一款高颜值、简单易用的web字体图标库,只需引入一个css文件(或一个npm包),您就可以简单地使用1000多个漂亮的图标
以下是css文件引入的一个简单例子
<!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> <!--一个旋转的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>
效果图:
Easy-ICON 是一个简单易用的icon字体库
Easy-ICON 使用 Font-Awesome 等多个图标库, 对原作者做出的贡献表示感谢!
特性:
easy-icon 共分为了五个模块,可以独立单独引用
在线模式依赖网络上的字体库,而离线模式将字体库转换成base64,从而可以离线使用
<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">
或者使用一个集合的版本
<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">
或者使用一个集合的版本
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.css">
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';
也可以直接引入 css 文件 (需搭配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';
或者使用集合版本
import 'easy-icon/easy-icon-all.js';
引用css文件
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';
也可以直接引入 css 文件 (需搭配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';
或者使用集合版本
import 'easy-icon/offline/easy-icon-all.js';
引用css文件
import 'easy-icon/offline/css/easy-icon-all.css';
Easy ICON使用起来十分简单,您只需要在您想要使用的地方插入一个如下的标签即可:
<i class="ei-spmile"></i>
需要注意的是,五个模块对应的前缀不一样,分别为
您可以通过添加 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样式来覆盖默认的样式.
使用 ei-flip-horizontal
可以使图标绕竖直轴翻转180度
<i class="ei-thumbs-o-up ei-flip-horizontal"></i>
使用 ei-flip-vertical
可以使图标绕水平轴翻转180度
<i class="ei-thumbs-o-up ei-flip-vertical"></i>
使用 ei-rotate-90
,ei-rotate-180
,ei-rotate-270
分别可以使图标按顺时针方向旋转 90、180、270度
<i class="ei-smile ei-rotate-90"></i>
<i class="ei-smile ei-rotate-180"></i>
<i class="ei-smile ei-rotate-270"></i>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型