• 技术文章 >web前端 >Layui教程

    layui怎么添加icon

    藏色散人藏色散人2020-11-13 10:28:36原创422

    layui添加icon的方法:首先打开iconfont官网并选择中意的字体图标库;然后在项目中点击“下载至本地”,并将解压的文件复制到本地的项目中;最后在本地项目引入相关html代码即可。

    推荐:《layUI教程

    layui2.0及以前版本的字体图标不能满足项目的需求,其图标来源于阿里巴巴www.iconfont.cn,所以自己手动丰富了项目字体图标库,记录如下。

    1、添加字体图标至购物车

    打开www.iconfont.cn,选择中意的字体图标库,添加至"库"(即字体购物车图标),如下图所示输入图片说明

    2、将图标添加至项目

    点击右侧“购物车图标”,然后将选中的字体图标添加至项目。建议新建项目,方便以后扩展。

    3、下载并引入代码

    在项目中,点击"下载至本地",然后将解压的文件复制到本地的项目中,并在本地引入 iconfont.css 文件即可。

    4、选择字体图标

    在浏览器中打开,demo_unicode.html文件,按照文件提示,在本地项目引入相关html代码即可。
    如 <i class="iconfont">3</i>

    若是layui,为样式美观,可修改iconfont.css的修改css代码如下

    .iconfont{font-family:"iconfont" !important;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    -webkit-text-stroke-width: 0.2px;
    font-size:14px;
    transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;
    }

    5、以后若需要再添加字体图标,重复上述步骤,直接在阿里巴巴iconfont下载项目代码至本地,覆盖以往的代码(iconfont.css 除外),即可使用新的字体图标。

    以上就是layui怎么添加icon的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:layui
    上一篇:如何解决layui报错问题 下一篇:layui修改表格行高的方法
    第15期线上培训班

    相关文章推荐

    • 怎么将layui引入开发框架中• layui的优缺点是什么?• layui 免费开源吗?• 如何解决layui报错问题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网