layui内置图标不满足需求，自定义添加阿里矢量图标

最新推荐文章于 2024-04-24 16:13:35 发布
最新推荐文章于 2024-04-24 16:13:35 发布
阅读量754 收藏
点赞数
分类专栏： layui添加阿里矢量图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yours_xiao_gao/article/details/115079174
版权

layui css

layui添加阿里矢量图标

适用于layui内置图标不够用的情况

1.第一步
进入阿里矢量图标官网，选择自己的图标，加入购物车，点击下载代码
在这里插入图片描述
2.第二部，解压下载的文件，复制所有内容，到项目中
在这里插入图片描述

在这里插入图片描述
这里再layui/font下又创建了一个font文件夹

3.第三步
打开iconfont.css文件，箭头处内容改为layui-icon
在这里插入图片描述

4.第四步
打开layui.css,复制iconfont.css的内容，在最低处添加
在这里插入图片描述
5，第五步
调用，与其他的layui-icon图标调用一样
在这里插入图片描述

Yours_xiao_gao
关注
专栏目录
【Layui】layui 自定义icon 图标
德仔
10-14 2962
Layui 提供的图标较少，通常不能满足个性化的需求，阿里,font-awesome等提供免费的图库，那么如何扩展呢？
Layui自定义字体图标扩展
userwang的博客
07-01 1156
目录前言图标扩展及使用方式 前言 本章给大家分享的是Layui的自定义字体图标。 图标扩展及使用方式 layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。 链接：阿里巴巴矢量图库 我们可以随机选择一个图标点进去 鼠标点在图标上会有一个
layui图标拓展-自定义图标
覃福安的博客
05-17 4300
在前端开发过程中我们经常会遇到框架提供的图标不够用的情况，那就需要我们自己进行拓展了，自己弄过几次，但每次配置都会忽略一些小细节，写个备忘文章 配置流程： 1.下载矢量图标 2.导入图标文件 3.修改css 4.使用 一、下载矢量图标 https://www.iconfont.cn/ 进入阿里矢量库 选择自己喜欢的图标库或者直接搜索自己的喜欢的...
layui 界面显示不全
Giraffe_it的博客
11-27 2253
这里跟大家分享一个经验， 刚在开发 layui    时碰到的一个问题，在我通过点击权限树节点，打开的 iframe 框架的页面显示不全   jsp页面  layui 主体 body 内打开页面 <div class="layui-body" id="container"> <div class="layui-tab" lay-filter="t...
Layui自定义icon图标
weixin_43702272的博客
11-04 1623
在使用Layui 进行开发时，会使用： <i class="layui-icon">&#xe60c;</i> 或者 <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 进行图标的引入，但是官方给的图标毕竟有限...
阿里前端layui自定义图标的简单使用
weixin_61503139的博客
04-08 620
5.文件复制追加新图标。
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
阿里矢量图标库
04-26
阿里矢量图标库是阿里巴巴设计团队推出的一款强大的在线图标资源平台，它集合了大量的高质量、可缩放...无论是寻找特定主题的图标，还是构建一套完整的UI图标系统，阿里矢量图标库都能满足需求，极大地提高了工作效率。
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
Layui 扩展字体图标
辰风沐阳
07-01 1219
layui 目前（2020-06-28）提供了168个图标，但是很多时候这些图标中没有自己想要的，今天在项目中想找一个二维码的图标，但是在layui提供的图标中并没有，此时我们可以扩展图标（阿里巴巴矢量图标库 www.iconfont.cn）layui提供的图标也是取材于此 文章目录1. 进入阿里巴巴矢量图标库官网，登陆账号2. 下载图标3. 三种使用方式4. Font-class 使用示例 1. 进入阿里巴巴矢量图标库官网，登陆账号 阿里巴巴矢量图标库官网 https://www.iconfont..
解决layui使用layui-icon出现默认图标的问题
10-16
今天小编就为大家分享一篇解决layui使用layui-icon出现默认图标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui添加第三方图标
佳佳鸽的博客
01-31 1023
layui添加第三方图标
layui 自定义小图标 【转载】
tyweb_nte的博客
05-18 1535
文章地址：https://fly.layui.com/jie/19051/
最新的layui 自定义icon 图标
本堃不方的博客
09-15 7504
看了好多教程，一点思路也不清晰，闲话少说，直接上步骤！！！ 前提工作，自己下载好layui，注册登录好iconfont-阿里巴巴矢量图标库。 1、在 阿里巴巴矢量图标库 选择自己的想要的icon(作者以菜单为例) 2、把该图标放置在购物车，然后点击最上方的购物车图标或者页面滑到底端右边出现的购物车图标，示例图如下： 添加到购物车 3、打开购物车，点击 下载代码，压缩包解压后放在你项目的任何位...
layui图标使用和自定义矢量库图标
热门推荐
Charge8的博客
07-03 6万+
layui图标： layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）点击打开链接矢量图标库。 使用方法： 通过对一个内联元素（一般推荐用i标签）设定class="layui-icon"，来定义一个图标，然后对元素加上图标对应的font-class（注意：layui 2.3.0 之前只支持采用unicode 字符)，即可显示出你想要的图标。内置图...
自定义Layui Tree的节点的操作图标
最新发布
weixin_44581243的博客
04-24 727
红框内就是支持的的操作，其中info是我自己添加的，使用layui-icon-file作为显示的图标。如果有其他需求，例如弹窗查看节点的信息，或者不喜欢图标的icon怎么办呢？这时就需要通过修改源码的方式来实现了。打开layui.js，搜索。这时候保存layui.js。打开使用tree的地方，
Layui颜色.图标.动画
qq_34820433的博客
04-17 754
框架提供了主色调、场景色和极简中性色风格的十六进制颜色代码参考；我们希望能动起来，可以结合框架的动画功能；框架内置了很多常用的小图标，首先需要定义。自带的颜色、图标和动画功能。，然后根据具体再定义；本节课我们来开始了解。
扩展layui中的自带字体图标
weixin_30826761的博客
01-20 171
项目中，虽然layui的字体图标库中已经有了1000多个图标了，但是也有时候不能满足我们自定义图标的需求，所以需要进行自定义，具体步骤如下： 1.在iconfont上找到自己喜欢的图标，也可以上传ui做好的图标，做自己喜欢的图标，加入购物车后导出字体图标； 2.打开icoMoon网站，将自己导出的图标中的svg文件和layui中的svg文件一起导入，然后selectAll。 3.genera...
Layui-按钮 - 页面元素+图标+动画
Alexious520的博客
12-06 284
基础图标设置格式： <div> <i class="layui-icon layui-icon-mike " style="color: red ; font-size: 40px"></i><!--麦克风图标--> </div> 效果图： 基础动画设置格式： <div> <i class="layui-icon layui-icon-wifi layui-anim layui-anim-rotate.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值