Iconfont的官网:https://www.iconfont.cn/

首先没有账号的需要先注册账号,可以用微博扫码或者GitHub账户登录。

登录成功后搜索框搜索到你需要的图标

项目中引用Iconfont(阿里巴巴矢量图标)的方式

悬停在搜索结果中的某个图标上选择添加入库,此时可以看到右上角购物车图标已经显示为红色的1标记,点击图标后显示如下图

项目中引用Iconfont(阿里巴巴矢量图标)的方式

1.点击输入项目名新增一个项目

2.新增了的项目的显示结果

3.点击添加入库

4.确定

此时已经添加该图标到你的iconfont图标项目中了

在顶部导航栏中  资源管理--我的项目--我发起的项目 可以找到已经添加到该项目的图标

项目中引用Iconfont(阿里巴巴矢量图标)的方式

如上图选择font class方式进行添加

点击复制项目链接(这个项目链接是动态生成的在每次你添加新的图标到该项目中,这个链接会让你点击更新链接)

如果只是针对某个页面进行使用该图标库则在对应的页面中使用如下图

项目中引用Iconfont(阿里巴巴矢量图标)的方式

然后再对应的图标上添加对应i标签的class属性即可 如下图,

项目中引用Iconfont(阿里巴巴矢量图标)的方式

class的名字格式为class="icon iconfont  图标名称“

图标名称是在iconfont网站中复制过来的这个是唯一的名称代码,如下图复制过来添加到上面的class里重启项目就生效拉

项目中引用Iconfont(阿里巴巴矢量图标)的方式

----------------------------------------以上已经单个页面引用完毕,下面是全局项目引用 减少了修改工作量

如果你想全局整个项目引用则可以在web.xml中添加一个变量进行全局应用然后再每个需要的页面进行该变量的引用即可。这样不用每次需要添加新图标的时候都要改所有的页面引用。

web.xml配置如下

项目中引用Iconfont(阿里巴巴矢量图标)的方式

页面引用如下,引用该全局参数名即可。

项目中引用Iconfont(阿里巴巴矢量图标)的方式

在图标的class属性的使用和单个页面的是一样的 使用i标签的class的名字格式为class="icon iconfont  图标名称“

相关文章: