layui-字体图标

最新推荐文章于 2022-08-01 14:42:37 发布

weixin_34233679

最新推荐文章于 2022-08-01 14:42:37 发布

阅读量271

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiangru0921/p/6729111.html

版权

layui官网下载：GitHub：https://github.com/sentsin/layui/

layui官网首页-下载：http://www.layui.com/

layui-字体图标-官方网站：http://www.layui.com/doc/element/icon.html

Layui的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个icon看作是一个普通的文字，这意味着你直接用css控制文字属性，如color、font-size，就可以改变图标的颜色和大小。而区分不同的图标，我们主要是采用 Unicode 字符

使用:（引入需要的文件）
通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 Unicode 字符，即可显示出你想要的图标，譬如：

<i class="layui-icon">&#xe60c;</i>   
其中的 &#xe60c; 即是图标对应的Unicode字符
 
你可以去定义它的颜色或者大小，如：
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="build/css/layui.css"/>
        <!--<link rel="stylesheet" type="text/css" href="build/css/layui.mobile.css"/>-->
    </head>
    <body>
        <i class="layui-icon" style="font-size: 30px; color: red;">&#xe60c;</i> 
        <script src="js/jquery-2.1.0.js"></script>
        <script src="build/layui.js"></script>
    </body>
</html>

输出为：

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

转载于:https://www.cnblogs.com/xiangru0921/p/6729111.html

weixin_34233679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui-字体图标

layui官网下载：GitHub：https://github.com/sentsin/layui/layui官网首页-下载：http://www.layui.com/layui-字体图标-官方网站：http://www.layui.com/doc/element/icon.htmlLayui的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以...
复制链接

扫一扫