layui图标拓展-自定义图标

前端开发中,Layui框架自带图标不够用时需自行拓展。本文介绍配置流程:先从阿里矢量库下载矢量图标,再将解压后的文件导入框架字体文件夹,接着修改layui.css中的相关代码,最后在项目中使用特定代码,刷新页面即可显示图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在前端开发过程中我们经常会遇到框架提供的图标不够用的情况,那就需要我们自己进行拓展了,自己弄过几次,但每次配置都会忽略一些小细节,写个备忘文章

配置流程:

1.下载矢量图标

2.导入图标文件

3.修改css

4.使用


一、下载矢量图标

https://www.iconfont.cn/

进入阿里矢量库

阿里矢量图库

选择自己喜欢的图标库或者直接搜索自己的喜欢的图标(比如我想要购物车的图标,在里面直接搜索相关关键词就可以)

在这里插入图片描述

选择自己喜欢的图标,然后直接添加到购物车,可以添加多个,一起打包

在这里插入图片描述

选择下载代码 之后自动开始压缩包下载

二、导入图标文件

将下载好的压缩包解压,然后将文件夹里面的所有文件全部剪切到自己的框架的字体文件夹下(这里我们为了既能够用layui自带的图标,又可以用我们下载的图标,所以我们 不进行替换 ,而是单独创建字体文件夹)

在这里插入图片描述

在这里插入图片描述

三、修改CSS

打开layui.css 搜索 @font-face 这里我们为了便于修改和查看 排下版

在这里插入图片描述

上面是未修改的 我们需要复制这二块 然后修改部分代码

四、使用

打开字体文件中的 demo_index.html

用谷歌浏览器打开 IE不兼容

在项目中使用代码 注意不要带 ;符号

&#xe63d

现在刷新就可以看到图标了 如果无法正常使用可以留言或者email给我

### Layui 图标类 `icon` 和动画效果解析 #### 加载图标及其动画属性 为了实现加载图标的动态显示,可以利用 Layui 提供的特定 CSS 类来创建旋转动画效果。具体来说: - **基础图标类**:通过 `<i>` 标签定义图标,并应用相应的图标样式类名,如 `layui-icon-loading` 表示加载状态下的图标[^1]。 - **动画控制类**: - `layui-anim`: 启用动画效果。 - `layui-anim-rotate`: 设置顺时针方向上的无限循环旋转动作。 - `layui-anim-loop`: 确保动画持续不断重复执行直到手动停止或页面刷新为止。 因此,完整的 HTML 结构如下所示,用于展示一个正在加载中的圆形箭头图标并使其保持自旋运动: ```html <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> ``` 此代码片段会呈现一个小巧而优雅的旋转图标,在用户等待后台处理完成期间提供视觉反馈。 #### 笑脸图标的应用实例 对于希望让某个静态表情符号也具备类似的转动特性,则只需按照相同的方式为其附加必要的动画指令即可达成目标。例如要使笑脸图标 (`layui-icon-face-smile`) 发生连续性的圆周位移变化,可参照下面这段示范性源码编写方式[^3]: ```html <i class="layui-anim-loop"></i> ``` 上述做法同样适用于其他任何支持此类扩展特性的图形元素之上,只要确保所使用的额外修饰符不会与其他现有规则发生冲突便可正常运作。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值