Layui拓展第三方图标

最新推荐文章于 2023-04-13 13:38:27 发布

xw-何妨吟啸且徐行

最新推荐文章于 2023-04-13 13:38:27 发布

阅读量1.3k

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/xuw_xy/article/details/115271260

版权

js-qt 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

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

步骤如下：

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="开始预览"> <i
                    class="layui-icon " style="font-size: 30px;">&#xe652;</i></button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_stop_video_preview" title="停止预览"> <i
                    class="layui-icon iconfont" style="font-size: 30px;">&#xe607;</i></button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_capture" title="点击抓图"> <i
                    class="layui-icon" style="font-size: 33px;">&#xe660;</i></button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_start_record" title="开始录像"> <i
                    class="layui-icon" style="font-size: 30px;">&#xe6ed;</i></button>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="btn_stop_record" title="停止录像"> <i
                    class="layui-icon iconfont" style="font-size: 30px;">&#xe61a;</i></button>

效果截图如下：