layui怎么加图标

什么是Layui图标

LayUI是一款经典的前端UI框架，它能够帮助开发者快速构建美观易用的界面。LayUI提供了丰富的组件和功能，其中也包括图标库。Layui图标是一款自带图标字体库的UI框架，在Layui中使用图标可以让项目更加美观且易于识别。

Layui图标集提供了各种常用图标，例如菜单、箭头、导航、文件、社交媒体和设备等图标。通过使用Layui图标字体库，可以轻松添加这些图标到应用程序的Web界面。

如何添加Layui图标

第一步：下载字体文件

要使用Layui图标，首先需要从官网下载相应的字体文件。可以在官网上找到压缩包“Layui-icon”，解压后可以看到“fonts”文件夹。

<link rel="stylesheet" href="/layui/css/layui.css">
<!-- 引入自定义 ICONfont 样式文件，此处假设已经下载解压好，存放在 /fonts 文件夹下 -->
<link rel="stylesheet" href="/fonts/layui-icon.css" media="all">

第二步：添加HTML代码

要在应用程序中使用Layui图标，可以使用相应的HTML代码。使用“i”或“span”标签将图标添加到应用程序的HTML代码中。例如，下面的代码会将Twitter图标添加到HTML页面中：

<i class="layui-icon layui-icon-twitter"></i>

在上面的代码中，“i”标签是添加图标的标签，“layui-icon”是Layui图标字体库的默认前缀，“layui-icon-twitter”是具体的图标名称。这个名称可以在图标库的文档中找到。

第三步：改变图标大小和颜色

可以使用CSS样式更改Layui图标的大小和颜色。例如，要将图标的大小设置为18px，可以使用如下代码：

<i class="layui-icon layui-icon-twitter" style="font-size:18px"></i>

同样，可以通过设置“color”属性更改图标的颜色：

<i class="layui-icon layui-icon-twitter" style="color:#00FF00"></i>

更多细节

在使用Layui图标的过程中，还有一些细节需要注意。首先，Layui图标需要按照官方提供的图标名称进行命名，否则图标将无法正常显示。其次，图标的样式和颜色可以使用CSS属性进行修改，但不能使用“img”标签添加图标。最后，Layui图标不仅可以用于前端UI开发，也可以用于移动端APP开发。

Layui图标库的使用示例

接下来，我们将用实例来演示如何在Layui中使用图标。

示例1：添加导航图标

导航栏是网站设计中最常使用的元素之一。使用Layui图标可以让导航栏更加美观实用。下面展示如何在网站导航栏中添加图标：

<div class="layui-header">
    <div class="layui-logo">Layui</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href=""><i class="layui-icon layui-icon-read"></i> 文档</a>
            </li>
            <li class="layui-nav-item">
                <a href=""><i class="layui-icon layui-icon-login"></i> 登入</a>
            </li>
            <li class="layui-nav-item">
                <a href=""><i class="layui-icon layui-icon-survey"></i> 调查</a>
            </li>
        </ul>
</div>

上面的代码中，“layui-nav”是菜单导航的样式类，使用“layui-nav-item”和“layui-nav-child”来创建菜单项。在每个菜单项中添加标签，并使用对应的Layui图标。

<button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>&nbsp;刷新</button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>&nbsp;删除</button>

<table class="layui-table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td><i class="layui-icon layui-icon-edit"></i><i class="layui-icon layui-icon-delete"></i></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20</td>
            <td>女</td>
            <td><i class="layui-icon layui-icon-edit"></i><i class="layui-icon layui-icon-delete"></i></td>
        </tr>
    </tbody>
</table>

<div class="layui-breadcrumb">
    <a href=""><i class="layui-icon layui-icon-home"></i>&nbsp;首页</a>
    <a href="">城市管理</a>
    <a href="">上海市</a>
    <a href="">浦东新区</a>
    <a href="">张江科技园区</a>
    <a>研发中心</a>
</div>