新鲜出炉:高颜值、简单易用的字体图标库——easy-icon

介绍

Easy-ICON 是一款高颜值、简单易用的web字体图标库,只需引入一个css文件(或一个npm包),您就可以简单地使用1000多个漂亮的图标。


新鲜出炉:高颜值、简单易用的字体图标库——easy-icon

仓库地址

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>
新鲜出炉:高颜值、简单易用的字体图标库——easy-icon

特性:

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

安装使用

使用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-
新鲜出炉:高颜值、简单易用的字体图标库——easy-icon
  • 其他

让图标旋转,可以通过添加 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+个图标,方便安装,使用简单!可以尝试!

版权声明:飞鱼 发表于 2020-07-19 11:58:24。
转载请注明:新鲜出炉:高颜值、简单易用的字体图标库——easy-icon | HelloWorld.La

暂无评论

暂无评论...