【ExtJS】使用字体图标

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

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

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

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

网址:fontawesonme

下载库文件


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


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


3.在官网查看使用方法

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

这里以css为例



发现需要link一下css文件

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

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


4.真正使用图标类

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

fontawesome的使用介绍


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

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


拿到图标的class名

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


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

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


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


猜你喜欢

转载自blog.csdn.net/ZYD45/article/details/80354856
今日推荐