Layui拓展第三方图标

在项目中引入自己下载的阿里巴巴矢量图标库中的图标：

步骤如下：

1. 进入阿里矢量库，将自己想下载的图标选中，点击“添加入库”

2.点击右上角购物车标志，将选中的图标代码下载到本地解压。

下载代码到本地：

解压：

3. 在layui项目中创建一个文件夹，放入上面的几个文件，然后再引入iconfont.css文件即可使用：

引入下载的图标样式：

    <link rel="stylesheet" href="../src/myicon/iconfont.css" media="all">

使用方法：

     <!-- 测试引入外部图标 --><a class="layui-btn layui-btn-normal" ><i class="iconfont icon-icon__tingzhiluzhishipin" style="font-size: 30px;"></i></a>

如果想要更换图标，可将demo_index.html用浏览器打开，显示出带有下载图标的页面,如下:

换图标：赋值粘贴上图红圈字样到i标签中，注意iconfont也要加在class属性里：

部分代码如下：

  <!-- 以图标形式显示 --><button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_start_video_preview" title="开始预览"> <iclass="layui-icon " style="font-size: 30px;"></i></button><button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_stop_video_preview" title="停止预览"> <iclass="layui-icon iconfont" style="font-size: 30px;"></i></button><button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_capture" title="点击抓图"> <iclass="layui-icon" style="font-size: 33px;"></i></button><button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_start_record" title="开始录像"> <iclass="layui-icon" style="font-size: 30px;"></i></button><button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_stop_record" title="停止录像"> <iclass="layui-icon iconfont" style="font-size: 30px;"></i></button>

效果截图如下：

阿里矢量库：

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

layui官网参考：

https://fly.layui.com/extend/search/图标/

文章参考（亲测可行）：

https://www.pianshen.com/article/6241285274/

https://blog.csdn.net/qq_39710367/article/details/88533176

layui图标使用和自定义矢量库图标__Charge的博客-CSDN博客

Layui拓展第三方图标相关推荐

layui引入第三方依赖
layui引入第三方js插件准备编写第一个Hello World 配置第三方js路径用layui包裹一个js插件在页面调用在layui中引入moment第三方插件配置moment momen ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
layui引用外部图标
layui引用外部图标因为最近的项目中,layui自带的图标已经不能满足需求了,所以各种百度,有了以下成果: 1.选择阿里图标库中自己中意的图标,添加到购物车,从购物车中下载代码 2.下载完成后,解 ...
引入第三方图标库，并在前台罗列图标
目前在项目中引入一个第三方矢量图标库已经成为了非常常见的需求.这是因为矢量图不仅体积小,而且在放大时不会失真,颜色也可以轻松修改.相比于传统的方式去加载大量的图片(假设你没有用"雪碧图&qu ...
【Layui】layui 自定义icon 图标
layui 自定义icon 图标 Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢? 准备工作前提工作,自己下载好layui,注册 ...
layui下拉图标，layui排行号选择器
下载的组件 layui下拉图标 layui排行号选择器下载路径:https://gitee.com/ayscap/icon-selected 参考:https://gitee.com/layui-e ...
layui内置图标不满足需求，自定义添加阿里矢量图标
layui添加阿里矢量图标适用于layui内置图标不够用的情况 1.第一步进入阿里矢量图标官网,选择自己的图标,加入购物车,点击下载代码 2.第二部,解压下载的文件,复制所有内容,到项目中这里再 ...
layui扩展第三方字体（详细）
layui自身携带了168个字体图标,但有些时候并不能满足我们的使用需要,这时我们就可以根据需求来进行图标的扩展. layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont) ...
关于layui的icon图标不显示的原因
如果你要使用layui原生的图标,但发现不显示可能是因为你把下载的layui文件中layui.css和layui.js单单提出来放到你的项目里了解决: 把文件中的Dist都引用过来

Layui拓展第三方图标

Layui拓展第三方图标相关推荐

最新文章

热门文章