<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图标列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<style>
h4{ font-size:18px;font-family:"Microsoft YaHei","Simsun",Arial; font-weight:normal; line-height:1; padding:0; margin:0;}
.icons li{ margin:5px 0; text-align:center; height:120px; cursor:pointer;}
.icons li i{ display:block; font-size:35px; margin:10px 0; line-height:60px; height:60px;}
.icons li:hover{ background:#2f4056; border-radius:5px; color:#fff;}
.icons li:hover i{ font-size:50px;}
.section{ padding:20px;}
.section h4 span{ color:#0084e9;}
.fa {font-size: 25px !important;}
.fa:hover {font-size: 50px !important;}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="section">
<h4><span>全部图标</span></h4>
<hr>
<ul class="icons layui-row">
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-adjust"></i><span>fa-adjust</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-anchor"></i><span>fa-anchor</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-archive"></i><span>fa-archive</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-area-chart"></i><span>fa-area-chart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrows"></i><span>fa-arrows</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrows-h"></i><span>fa-arrows-h</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrows-v"></i><span>fa-arrows-v</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-asterisk"></i><span>fa-asterisk</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-at"></i><span>fa-at</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-automobile"></i><span>fa-automobile</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ban"></i><span>fa-ban</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bank"></i><span>fa-bank</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bar-chart"></i><span>fa-bar-chart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bar-chart-o"></i><span>fa-bar-chart-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-barcode"></i><span>fa-barcode</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bars"></i><span>fa-bars</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bed"></i><span>fa-bed</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-beer"></i><span>fa-beer</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bell"></i><span>fa-bell</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bell-o"></i><span>fa-bell-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bell-slash"></i><span>fa-bell-slash</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bell-slash-o"></i><span>fa-bell-slash-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bicycle"></i><span>fa-bicycle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-binoculars"></i><span>fa-binoculars</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-birthday-cake"></i><span>fa-birthday-cake</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bolt"></i><span>fa-bolt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bomb"></i><span>fa-bomb</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-book"></i><span>fa-book</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bookmark"></i><span>fa-bookmark</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bookmark-o"></i><span>fa-bookmark-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-briefcase"></i><span>fa-briefcase</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bug"></i><span>fa-bug</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-building"></i><span>fa-building</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-building-o"></i><span>fa-building-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bullhorn"></i><span>fa-bullhorn</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bullseye"></i><span>fa-bullseye</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bus"></i><span>fa-bus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cab"></i><span>fa-cab</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-calculator"></i><span>fa-calculator</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-calendar"></i><span>fa-calendar</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-calendar-o"></i><span>fa-calendar-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-camera"></i><span>fa-camera</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-camera-retro"></i><span>fa-camera-retro</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-car"></i><span>fa-car</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-down"></i><span>fa-care