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>

 輸出為:

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM