登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
开源项目 > WEB应用开发 > JavaScript工具包 &&
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
11 Star 64 Fork 12

theajack / easy-icon

代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
分支 23
标签 0
贡献代码
同步代码
创建 Pull Request
了解更多
对比差异 通过 Pull Request 同步
同步更新到分支
通过 Pull Request 同步
将会在向当前分支创建一个 Pull
Request，合入后将完成同步
取消
提示: 由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件
assets
dist
npm
src
test
.babelrc
.gitattributes
.gitignore
LICENSE
README.cn.md
README.md
index.html
index_cn.html
package-lock.json
package.json
version.md
webpack.config.js
Loading...
README
MIT
Easy-ICON

Version Downloads Size License TopLang issue

🚀 高颜值、简单易用的web字体图标库

在线使用 | Github | Gitee | English

[TOC]

0. 快速开始

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

😃 在线体验1583个图标

1. 介绍

Easy-ICON 是一个简单易用的icon字体库

Easy-ICON 使用 Font-Awesome 等多个图标库, 对原作者做出的贡献表示感谢!

特性：

  1. 使用非常简单
  2. 1583个常用的字体图标，来自多个字体图库
  3. 自定义任意css样式，缩放不模糊
  4. 按模块部分使用

2.安装使用

2.1 使用css文件引用:(推荐下载到本地然后引用本地文件)

easy-icon 共分为了五个模块，可以独立单独引用

2.1.1 在线模式

在线模式依赖网络上的字体库，而离线模式将字体库转换成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">
2.1.2 离线模式
<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">

2.2 或者使用npm安装:

npm i easy-icon;

您只需要引用一次即可:

与css文件引用一样，可以模块独立引用，无需使用全部

2.2.1 在线模式
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';
2.2.2 离线模式
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';

2.3 使用

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-

查看可用的图标

Easy-ICON
展开全部图标 Easy-ICON Easy-ICON Easy-ICON Easy-ICON

3.其他

3.1 让图标旋转

您可以通过添加 ei-spin 类来使图标旋转:

<i class="ei-spinner-snake ei-spin"></i>

ei-spin 类对五个模块表现一致

3.2 选择尺寸

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样式来覆盖默认的样式.

3.3 翻转

使用 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>

3.4 旋转

使用 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>
The MIT License (MIT) Copyright (c) 2019 theajack Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Starred
64
Star
64
Fork
12

简介

高颜值、简单易用的字体图标库 展开 收起
暂无标签
https://theajack.gitee.io/easy-icon
JavaScript 等 3 种语言
CSS
95.9%
HTML
3.5%
JavaScript
0.6%
MIT
使用 MIT 开源许可协议
Pages： http://theajack.gitee.io/easy-icon
取消

发行版

暂无发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

1. 开源生态

  • 生产力：来评估开源项目输出软件制品和开源价值的能力。
  • 创新力：用于评估开源软件及其生态系统的多样化程度。
  • 稳健性：用于评估开源项目面对多变的发展环境，抵御内外干扰并自我恢复的能力。

2. 协作、人、软件

  • 协作：代表了开源开发行为中协作的程度和深度。
  • 人：观察开源项目核心人员在开源项目中的影响力，并通过第三方视角考察用户和开发者对开源项目的评价。
  • 软件：从开源项目对外输出的制品评估其价值最终落脚点。也是开源评估最“古老”的主流方向之一“开源软件” 的具体表现。

3. 评估模型

    基于“开源生态”与“协作、人、软件”的维度，找到与该目标直接或间接相关的可量化指标，对开源项目健康与生态进行量化评估，最终形成开源评估指数。

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/theajack/easy-icon.git
git@gitee.com:theajack/easy-icon.git
theajack
easy-icon
easy-icon
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部