作为前端框架,很多时候为了页面美观,都要引用到字体图标【ExtJS】使用字体图标

那么,ExtJS框架如何使用字体图标那?

1.先去所需的字体图标库下载字体图标文件

这里,使用的是fontawesome上的字体图标

网址:fontawesonme

下载库文件

【ExtJS】使用字体图标

2.将下载的库文件,进行解压

【ExtJS】使用字体图标

解压到,自己ExtJS项目的resources文件夹下

【ExtJS】使用字体图标

3.在官网查看使用方法

主要是css使用或者是用js方式使用图标

这里以css为例

【ExtJS】使用字体图标

【ExtJS】使用字体图标

发现需要link一下css文件

在ExtJS的框架中,是在app.json中添加此引用

在app.json的css中引用,注意path路径

【ExtJS】使用字体图标

4.真正使用图标类

前期准备工作完成后,去字体图标官网看其使用的例子

fontawesome的使用介绍

【ExtJS】使用字体图标

发现在对应的图标名前都要加 “fas fa-”

我们在图标的官网找到 自己想要的图标

【ExtJS】使用字体图标

拿到图标的class名

然后再对应的extjs控件上 使用iconCls来引用(别忘了官网的要求 前缀加哪些字符

【ExtJS】使用字体图标

=====================================================================

我们也可以通过官网,查看使用css图标,哪些文件是必要的

【ExtJS】使用字体图标

然后可以删除掉,不必要的文件

【ExtJS】使用字体图标

相关文章: