智慧印刷工坊

智慧印刷工坊

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

admin 128 80
介绍

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

仓库地址简单示例

以下是css文件引入的一个简单例子

!DOCTYPEhtmlhtmllang="en"headlinkrel="stylesheet"href=""/headbodyiclass="ei-heartei-xs"style="color:red;"/iiclass="ei-spinner-indicatorei-spin"/i!--一个旋转的loading--iclass="ea-star-half-empty"/iiclass="et-likeei-l"/iiclass="ef-html5ei-xl"/iiclass="el-goodsei-4x"/i/body/html

特性:

使用非常简单

1583个常用的字体图标,来自多个字体图库

自定义任意css样式,缩放不模糊

按模块部分使用

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

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

linkrel="stylesheet"href=""linkrel="stylesheet"href=""linkrel="stylesheet"href=""linkrel="stylesheet"href=""linkrel="stylesheet"href=""

或者使用一个集合的版本

linkrel="stylesheet"href=""

使用npm安装:

npmieasy-icon;

只需要引用一次即可:

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

import'easy-icon';import'easy-icon/';import'easy-icon/';import'easy-icon/';import'easy-icon/';

或者使用集合版本

import'easy-icon/';

使用

EasyICON使用起来十分简单,您只需要在您想要使用的地方插入一个如下的标签即可:

iclass="ei-spmile"/i

需要注意的是,五个模块对应的前缀不一样,分别为

easy-icon-a:ei-

easy-icon-a:ea-

easy-icon-f:ef-

easy-icon-t:et-

easy-icon-l:el-

其他

iclass="ei-spinner-snakeei-spin"/i

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

EasyICON内置了八种不同大小的尺寸,从小到大依次为::xs,s,l,lg,2x,3x,4x,5x

尺寸类对五个模块表现一致

iclass="ei-smileei-s"/iiclass="ei-smileei-xs"/i

可以使用任何自定义css样式来覆盖默认的样式

总结

easy-icon是一个开源不久的字体图标库,集成了1500+个图标,方便安装,使用简单!可以尝试!