zoukankan      html  css  js  c++  java
  • layui-字体图标

    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>

     输出为:

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

  • 相关阅读:
    [BZOJ1584][Usaco2009 Mar]Cleaning Up 打扫卫生
    CSS浮动
    Django by example -----1总结
    C#函数重载
    linux目录的特点
    Linux调优
    linux
    对齐方式
    19-10-25-G-悲伤
    19-10-24-H
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6729111.html
Copyright © 2011-2022 走看看