first commit

This commit is contained in:
编码猿
2024-09-27 01:32:49 +08:00
commit 28ebe05a64
7399 changed files with 1174529 additions and 0 deletions

View File

@@ -0,0 +1 @@
6c33258e-dd51-4817-872d-bfeb1b6d360e

View File

@@ -0,0 +1 @@
89b070b5-5454-42cd-bc82-4dca1a67ba52

View File

@@ -0,0 +1,778 @@
{extend name="admin@public/basic" /}
{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/admin/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;}
.section{ padding:20px;}
.section h4 span{ color:#0084e9;}
.fa {font-size: 25px !important;}
.fa:hover {font-size: 50px !important;}
</style>
{/block}
{block name="cotent"}
<div class="section" id="all">
<h4><span>全部图标</span> Web Application Icons</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-caret-square-o-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-left"></i><span>fa-caret-square-o-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-right"></i><span>fa-caret-square-o-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-up"></i><span>fa-caret-square-o-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cart-arrow-down"></i><span>fa-cart-arrow-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cart-plus"></i><span>fa-cart-plus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc"></i><span>fa-cc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-certificate"></i><span>fa-certificate</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check"></i><span>fa-check</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check-circle"></i><span>fa-check-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check-circle-o"></i><span>fa-check-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check-square"></i><span>fa-check-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check-square-o"></i><span>fa-check-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-child"></i><span>fa-child</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle"></i><span>fa-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle-o"></i><span>fa-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle-o-notch"></i><span>fa-circle-o-notch</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle-thin"></i><span>fa-circle-thin</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-clock-o"></i><span>fa-clock-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-close"></i><span>fa-close</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cloud"></i><span>fa-cloud</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cloud-download"></i><span>fa-cloud-download</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cloud-upload"></i><span>fa-cloud-upload</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-code"></i><span>fa-code</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-code-fork"></i><span>fa-code-fork</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-coffee"></i><span>fa-coffee</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cog"></i><span>fa-cog</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cogs"></i><span>fa-cogs</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-comment"></i><span>fa-comment</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-comment-o"></i><span>fa-comment-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-comments"></i><span>fa-comments</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-comments-o"></i><span>fa-comments-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-compass"></i><span>fa-compass</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-copyright"></i><span>fa-copyright</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-credit-card"></i><span>fa-credit-card</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-crop"></i><span>fa-crop</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-crosshairs"></i><span>fa-crosshairs</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cube"></i><span>fa-cube</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cubes"></i><span>fa-cubes</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cutlery"></i><span>fa-cutlery</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dashboard"></i><span>fa-dashboard</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-database"></i><span>fa-database</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-desktop"></i><span>fa-desktop</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-diamond"></i><span>fa-diamond</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dot-circle-o"></i><span>fa-dot-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-download"></i><span>fa-download</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-edit"></i><span>fa-edit</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ellipsis-h"></i><span>fa-ellipsis-h</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ellipsis-v"></i><span>fa-ellipsis-v</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-envelope"></i><span>fa-envelope</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-envelope-o"></i><span>fa-envelope-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-envelope-square"></i><span>fa-envelope-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eraser"></i><span>fa-eraser</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-exchange"></i><span>fa-exchange</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-exclamation"></i><span>fa-exclamation</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-exclamation-circle"></i><span>fa-exclamation-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-exclamation-triangle"></i><span>fa-exclamation-triangle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-external-link"></i><span>fa-external-link</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-external-link-square"></i><span>fa-external-link-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eye"></i><span>fa-eye</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eye-slash"></i><span>fa-eye-slash</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eyedropper"></i><span>fa-eyedropper</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fax"></i><span>fa-fax</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-female"></i><span>fa-female</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fighter-jet"></i><span>fa-fighter-jet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-archive-o"></i><span>fa-file-archive-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-audio-o"></i><span>fa-file-audio-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-code-o"></i><span>fa-file-code-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-excel-o"></i><span>fa-file-excel-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-image-o"></i><span>fa-file-image-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-movie-o"></i><span>fa-file-movie-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-pdf-o"></i><span>fa-file-pdf-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-photo-o"></i><span>fa-file-photo-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-picture-o"></i><span>fa-file-picture-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-powerpoint-o"></i><span>fa-file-powerpoint-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-sound-o"></i><span>fa-file-sound-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-video-o"></i><span>fa-file-video-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-word-o"></i><span>fa-file-word-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-zip-o"></i><span>fa-file-zip-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-film"></i><span>fa-film</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-filter"></i><span>fa-filter</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fire"></i><span>fa-fire</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fire-extinguisher"></i><span>fa-fire-extinguisher</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flag"></i><span>fa-flag</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flag-checkered"></i><span>fa-flag-checkered</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flag-o"></i><span>fa-flag-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flash"></i><span>fa-flash</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flask"></i><span>fa-flask</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-folder"></i><span>fa-folder</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-folder-o"></i><span>fa-folder-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-folder-open"></i><span>fa-folder-open</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-folder-open-o"></i><span>fa-folder-open-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-frown-o"></i><span>fa-frown-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-futbol-o"></i><span>fa-futbol-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gamepad"></i><span>fa-gamepad</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gavel"></i><span>fa-gavel</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gear"></i><span>fa-gear</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gears"></i><span>fa-gears</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-genderless"></i><span>fa-genderless</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gift"></i><span>fa-gift</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-glass"></i><span>fa-glass</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-globe"></i><span>fa-globe</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-graduation-cap"></i><span>fa-graduation-cap</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-group"></i><span>fa-group</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hdd-o"></i><span>fa-hdd-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-headphones"></i><span>fa-headphones</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heart"></i><span>fa-heart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heart-o"></i><span>fa-heart-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heartbeat"></i><span>fa-heartbeat</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-history"></i><span>fa-history</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-home"></i><span>fa-home</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hotel"></i><span>fa-hotel</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-image"></i><span>fa-image</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-inbox"></i><span>fa-inbox</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-info"></i><span>fa-info</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-info-circle"></i><span>fa-info-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-institution"></i><span>fa-institution</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-key"></i><span>fa-key</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-keyboard-o"></i><span>fa-keyboard-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-language"></i><span>fa-language</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-laptop"></i><span>fa-laptop</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-leaf"></i><span>fa-leaf</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-legal"></i><span>fa-legal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-lemon-o"></i><span>fa-lemon-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-level-down"></i><span>fa-level-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-level-up"></i><span>fa-level-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-life-bouy"></i><span>fa-life-bouy</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-life-buoy"></i><span>fa-life-buoy</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-life-ring"></i><span>fa-life-ring</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-life-saver"></i><span>fa-life-saver</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-lightbulb-o"></i><span>fa-lightbulb-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-line-chart"></i><span>fa-line-chart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-location-arrow"></i><span>fa-location-arrow</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-lock"></i><span>fa-lock</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-magic"></i><span>fa-magic</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-magnet"></i><span>fa-magnet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mail-forward"></i><span>fa-mail-forward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mail-reply"></i><span>fa-mail-reply</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mail-reply-all"></i><span>fa-mail-reply-all</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-male"></i><span>fa-male</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-map-marker"></i><span>fa-map-marker</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-meh-o"></i><span>fa-meh-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-microphone"></i><span>fa-microphone</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-microphone-slash"></i><span>fa-microphone-slash</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus"></i><span>fa-minus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus-circle"></i><span>fa-minus-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus-square"></i><span>fa-minus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus-square-o"></i><span>fa-minus-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mobile"></i><span>fa-mobile</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mobile-phone"></i><span>fa-mobile-phone</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-money"></i><span>fa-money</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-moon-o"></i><span>fa-moon-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mortar-board"></i><span>fa-mortar-board</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-motorcycle"></i><span>fa-motorcycle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-music"></i><span>fa-music</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-navicon"></i><span>fa-navicon</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-newspaper-o"></i><span>fa-newspaper-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paint-brush"></i><span>fa-paint-brush</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paper-plane"></i><span>fa-paper-plane</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paper-plane-o"></i><span>fa-paper-plane-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paw"></i><span>fa-paw</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pencil"></i><span>fa-pencil</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pencil-square"></i><span>fa-pencil-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pencil-square-o"></i><span>fa-pencil-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-phone"></i><span>fa-phone</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-phone-square"></i><span>fa-phone-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-photo"></i><span>fa-photo</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-picture-o"></i><span>fa-picture-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pie-chart"></i><span>fa-pie-chart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plane"></i><span>fa-plane</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plug"></i><span>fa-plug</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus"></i><span>fa-plus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-circle"></i><span>fa-plus-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-square"></i><span>fa-plus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-square-o"></i><span>fa-plus-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-power-off"></i><span>fa-power-off</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-print"></i><span>fa-print</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-puzzle-piece"></i><span>fa-puzzle-piece</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-qrcode"></i><span>fa-qrcode</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-question"></i><span>fa-question</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-question-circle"></i><span>fa-question-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-quote-left"></i><span>fa-quote-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-quote-right"></i><span>fa-quote-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-random"></i><span>fa-random</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-recycle"></i><span>fa-recycle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-refresh"></i><span>fa-refresh</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-remove"></i><span>fa-remove</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-reorder"></i><span>fa-reorder</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-reply"></i><span>fa-reply</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-reply-all"></i><span>fa-reply-all</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-retweet"></i><span>fa-retweet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-road"></i><span>fa-road</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rocket"></i><span>fa-rocket</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rss"></i><span>fa-rss</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rss-square"></i><span>fa-rss-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-search"></i><span>fa-search</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-search-minus"></i><span>fa-search-minus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-search-plus"></i><span>fa-search-plus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-send"></i><span>fa-send</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-send-o"></i><span>fa-send-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-server"></i><span>fa-server</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share"></i><span>fa-share</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-alt"></i><span>fa-share-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-alt-square"></i><span>fa-share-alt-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-square"></i><span>fa-share-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-square-o"></i><span>fa-share-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-shield"></i><span>fa-shield</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ship"></i><span>fa-ship</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-shopping-cart"></i><span>fa-shopping-cart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sign-in"></i><span>fa-sign-in</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sign-out"></i><span>fa-sign-out</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-signal"></i><span>fa-signal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sitemap"></i><span>fa-sitemap</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sliders"></i><span>fa-sliders</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-smile-o"></i><span>fa-smile-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-soccer-ball-o"></i><span>fa-soccer-ball-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort"></i><span>fa-sort</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-alpha-asc"></i><span>fa-sort-alpha-asc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-alpha-desc"></i><span>fa-sort-alpha-desc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-amount-asc"></i><span>fa-sort-amount-asc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-amount-desc"></i><span>fa-sort-amount-desc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-asc"></i><span>fa-sort-asc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-desc"></i><span>fa-sort-desc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-down"></i><span>fa-sort-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-numeric-asc"></i><span>fa-sort-numeric-asc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-numeric-desc"></i><span>fa-sort-numeric-desc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sort-up"></i><span>fa-sort-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-space-shuttle"></i><span>fa-space-shuttle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-spinner"></i><span>fa-spinner</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-spoon"></i><span>fa-spoon</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-square"></i><span>fa-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-square-o"></i><span>fa-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star"></i><span>fa-star</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star-half"></i><span>fa-star-half</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star-half-empty"></i><span>fa-star-half-empty</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star-half-full"></i><span>fa-star-half-full</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star-half-o"></i><span>fa-star-half-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-star-o"></i><span>fa-star-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-street-view"></i><span>fa-street-view</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-suitcase"></i><span>fa-suitcase</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sun-o"></i><span>fa-sun-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-support"></i><span>fa-support</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tablet"></i><span>fa-tablet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tachometer"></i><span>fa-tachometer</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tag"></i><span>fa-tag</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tags"></i><span>fa-tags</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tasks"></i><span>fa-tasks</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-taxi"></i><span>fa-taxi</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-terminal"></i><span>fa-terminal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-thumb-tack"></i><span>fa-thumb-tack</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-thumbs-down"></i><span>fa-thumbs-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-thumbs-o-down"></i><span>fa-thumbs-o-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-thumbs-o-up"></i><span>fa-thumbs-o-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-thumbs-up"></i><span>fa-thumbs-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ticket"></i><span>fa-ticket</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-times"></i><span>fa-times</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-times-circle"></i><span>fa-times-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-times-circle-o"></i><span>fa-times-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tint"></i><span>fa-tint</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-down"></i><span>fa-toggle-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-left"></i><span>fa-toggle-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-off"></i><span>fa-toggle-off</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-on"></i><span>fa-toggle-on</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-right"></i><span>fa-toggle-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-toggle-up"></i><span>fa-toggle-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-trash"></i><span>fa-trash</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-trash-o"></i><span>fa-trash-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tree"></i><span>fa-tree</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-trophy"></i><span>fa-trophy</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-truck"></i><span>fa-truck</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tty"></i><span>fa-tty</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-umbrella"></i><span>fa-umbrella</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-university"></i><span>fa-university</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-unlock"></i><span>fa-unlock</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-unlock-alt"></i><span>fa-unlock-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-unsorted"></i><span>fa-unsorted</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-upload"></i><span>fa-upload</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-user"></i><span>fa-user</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-user-plus"></i><span>fa-user-plus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-user-secret"></i><span>fa-user-secret</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-user-times"></i><span>fa-user-times</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-users"></i><span>fa-users</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-video-camera"></i><span>fa-video-camera</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-down"></i><span>fa-volume-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-off"></i><span>fa-volume-off</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-up"></i><span>fa-volume-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-warning"></i><span>fa-warning</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wheelchair"></i><span>fa-wheelchair</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wifi"></i><span>fa-wifi</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wrench"></i><span>fa-wrench</span></li>
</ul>
</div>
<div class="section" id="transportation">
<h4><span>运输工具</span> Transportation Icons</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-ambulance"></i><span>fa-ambulance</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-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-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-taxi"></i><span>fa-taxi</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fighter-jet"></i><span>fa-fighter-jet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-motorcycle"></i><span>fa-motorcycle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plane"></i><span>fa-plane</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rocket"></i><span>fa-rocket</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ship"></i><span>fa-ship</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-space-shuttle"></i><span>fa-space-shuttle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-subway"></i><span>fa-subway</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-train"></i><span>fa-train</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-truck"></i><span>fa-truck</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wheelchair"></i><span>fa-wheelchair</span></li>
</ul>
</div>
<div class="section" id="gender">
<h4><span>性别</span> Gender Icons</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-circle-thin"></i><span>fa-circle-thin</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mars"></i><span>fa-mars</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mars-double"></i><span>fa-mars-double</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mars-stroke"></i><span>fa-mars-stroke</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mars-stroke-h"></i><span>fa-mars-stroke-h</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mars-stroke-v"></i><span>fa-mars-stroke-v</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-mercury"></i><span>fa-mercury</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-neuter"></i><span>fa-neuter</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-transgender"></i><span>fa-transgender</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-transgender-alt"></i><span>fa-transgender-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-venus"></i><span>fa-venus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-venus-double"></i><span>fa-venus-double</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-venus-mars"></i><span>fa-venus-mars</span></li>
</ul>
</div>
<div class="section" id="file">
<h4><span>文件类型</span> File Type Icons</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-file"></i><span>fa-file</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-archive-o"></i><span>fa-file-archive-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-audio-o"></i><span>fa-file-audio-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-code-o"></i><span>fa-file-code-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-excel-o"></i><span>fa-file-excel-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-image-o"></i><span>fa-file-image-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-video-o"></i><span>fa-file-video-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-o"></i><span>fa-file-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-pdf-o"></i><span>fa-file-pdf-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-powerpoint-o"></i><span>fa-file-powerpoint-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-text"></i><span>fa-file-text</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-text-o"></i><span>fa-file-text-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-word-o"></i><span>fa-file-word-o</span></li>
</ul>
</div>
<div class="section" id="spinner">
<h4><span>旋转加载</span> Spinner Icons</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-cog"></i><span>fa-cog</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle-o-notch"></i><span>fa-circle-o-notch</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-refresh"></i><span>fa-refresh</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-spinner"></i><span>fa-spinner</span></li>
</ul>
</div>
<div class="section" id="form">
<h4><span>表单控件</span> Form Control Icons</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-check-square"></i><span>fa-check-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-check-square-o"></i><span>fa-check-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle"></i><span>fa-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-circle-o"></i><span>fa-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dot-circle-o"></i><span>fa-dot-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus-square"></i><span>fa-minus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-minus-square-o"></i><span>fa-minus-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-square"></i><span>fa-plus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-square-o"></i><span>fa-plus-square-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-square"></i><span>fa-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-square-o"></i><span>fa-square-o</span></li>
</ul>
</div>
<div class="section" id="payment">
<h4><span>支付方式</span> Payment Icons</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-cc-amex"></i><span>fa-cc-amex</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-discover"></i><span>fa-cc-discover</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-mastercard"></i><span>fa-cc-mastercard</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-paypal"></i><span>fa-cc-paypal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-stripe"></i><span>fa-cc-stripe</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-visa"></i><span>fa-cc-visa</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-credit-card"></i><span>fa-credit-card</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-google-wallet"></i><span>fa-google-wallet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paypal"></i><span>fa-paypal</span></li>
</ul>
</div>
<div class="section" id="chart">
<h4><span>统计</span> Chart Icons</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-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-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-line-chart"></i><span>fa-line-chart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pie-chart"></i><span>fa-pie-chart</span></li>
</ul>
</div>
<div class="section" id="currency">
<h4><span>货币</span> Currency Icons</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-btc"></i><span>fa-btc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-jpy"></i><span>fa-jpy</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-usd"></i><span>fa-usd</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eur"></i><span>fa-eur</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gbp"></i><span>fa-gbp</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ils"></i><span>fa-ils</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-inr"></i><span>fa-inr</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-krw"></i><span>fa-krw</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-money"></i><span>fa-money</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rub"></i><span>fa-rub</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-try"></i><span>fa-try</span></li>
</ul>
</div>
<div class="section" id="text">
<h4><span>文本编辑</span> Text Editor Icons</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-align-center"></i><span>fa-align-center</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-align-justify"></i><span>fa-align-justify</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-align-left"></i><span>fa-align-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-align-right"></i><span>fa-align-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bold"></i><span>fa-bold</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-font"></i><span>fa-font</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-italic"></i><span>fa-italic</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-header"></i><span>fa-header</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-underline"></i><span>fa-underline</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-text-width"></i><span>fa-text-width</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-text-height"></i><span>fa-text-height</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-strikethrough"></i><span>fa-strikethrough</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-subscript"></i><span>fa-subscript</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-superscript"></i><span>fa-superscript</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-link"></i><span>fa-link</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chain-broken"></i><span>fa-chain-broken</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-clipboard"></i><span>fa-clipboard</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-files-o"></i><span>fa-files-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-scissors"></i><span>fa-scissors</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-columns"></i><span>fa-columns</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eraser"></i><span>fa-eraser</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file"></i><span>fa-file</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-o"></i><span>fa-file-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-text"></i><span>fa-file-text</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-file-text-o"></i><span>fa-file-text-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-floppy-o"></i><span>fa-floppy-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-repeat"></i><span>fa-repeat</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-undo"></i><span>fa-undo</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-outdent"></i><span>fa-outdent</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-indent"></i><span>fa-indent</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-list"></i><span>fa-list</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-list-alt"></i><span>fa-list-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-list-ol"></i><span>fa-list-ol</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-list-ul"></i><span>fa-list-ul</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paperclip"></i><span>fa-paperclip</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paragraph"></i><span>fa-paragraph</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-table"></i><span>fa-table</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-th"></i><span>fa-th</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-th-large"></i><span>fa-th-large</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-th-list"></i><span>fa-th-list</span></li>
</ul>
</div>
<div class="section" id="directional">
<h4><span>方向性</span> Directional Icons</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-angle-double-down"></i><span>fa-angle-double-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-double-left"></i><span>fa-angle-double-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-double-right"></i><span>fa-angle-double-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-double-up"></i><span>fa-angle-double-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-down"></i><span>fa-angle-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-left"></i><span>fa-angle-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-right"></i><span>fa-angle-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angle-up"></i><span>fa-angle-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-down"></i><span>fa-arrow-circle-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-left"></i><span>fa-arrow-circle-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-right"></i><span>fa-arrow-circle-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-up"></i><span>fa-arrow-circle-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-o-down"></i><span>fa-arrow-circle-o-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-o-left"></i><span>fa-arrow-circle-o-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-o-right"></i><span>fa-arrow-circle-o-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-circle-o-up"></i><span>fa-arrow-circle-o-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-down"></i><span>fa-arrow-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-left"></i><span>fa-arrow-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-right"></i><span>fa-arrow-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-arrow-up"></i><span>fa-arrow-up</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-alt"></i><span>fa-arrows-alt</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-caret-down"></i><span>fa-caret-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-left"></i><span>fa-caret-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-right"></i><span>fa-caret-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-up"></i><span>fa-caret-up</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-caret-square-o-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-left"></i><span>fa-caret-square-o-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-right"></i><span>fa-caret-square-o-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-caret-square-o-up"></i><span>fa-caret-square-o-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-circle-down"></i><span>fa-chevron-circle-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-circle-left"></i><span>fa-chevron-circle-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-circle-right"></i><span>fa-chevron-circle-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-circle-up"></i><span>fa-chevron-circle-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-down"></i><span>fa-chevron-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-left"></i><span>fa-chevron-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-right"></i><span>fa-chevron-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-chevron-up"></i><span>fa-chevron-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hand-o-down"></i><span>fa-hand-o-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hand-o-left"></i><span>fa-hand-o-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hand-o-right"></i><span>fa-hand-o-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hand-o-up"></i><span>fa-hand-o-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-long-arrow-down"></i><span>fa-long-arrow-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-long-arrow-left"></i><span>fa-long-arrow-left</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-long-arrow-right"></i><span>fa-long-arrow-right</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-long-arrow-up"></i><span>fa-long-arrow-up</span></li>
</ul>
</div>
<div class="section" id="video">
<h4><span>播放器控件</span> Video Player Icons</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-arrows-alt"></i><span>fa-arrows-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-backward"></i><span>fa-backward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-compress"></i><span>fa-compress</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-eject"></i><span>fa-eject</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-expand"></i><span>fa-expand</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fast-backward"></i><span>fa-fast-backward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-fast-forward"></i><span>fa-fast-forward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-forward"></i><span>fa-forward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pause"></i><span>fa-pause</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-play"></i><span>fa-play</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-play-circle"></i><span>fa-play-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-play-circle-o"></i><span>fa-play-circle-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-step-backward"></i><span>fa-step-backward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-step-forward"></i><span>fa-step-forward</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stop"></i><span>fa-stop</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-youtube-play"></i><span>fa-youtube-play</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-off"></i><span>fa-volume-off</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-down"></i><span>fa-volume-down</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-volume-up"></i><span>fa-volume-up</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-random"></i><span>fa-random</span></li>
</ul>
</div>
<div class="section" id="medical">
<h4><span>医疗</span> Medical Icons</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-ambulance"></i><span>fa-ambulance</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-h-square"></i><span>fa-h-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heart"></i><span>fa-heart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heart-o"></i><span>fa-heart-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-heartbeat"></i><span>fa-heartbeat</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hospital-o"></i><span>fa-hospital-o</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-medkit"></i><span>fa-medkit</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-plus-square"></i><span>fa-plus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stethoscope"></i><span>fa-stethoscope</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-user-md"></i><span>fa-user-md</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wheelchair"></i><span>fa-wheelchair</span></li>
</ul>
</div>
<div class="section" id="brand">
<h4><span>品牌</span> Brand Icons</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-adn"></i><span>fa-adn</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-android"></i><span>fa-android</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-angellist"></i><span>fa-angellist</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-apple"></i><span>fa-apple</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-behance"></i><span>fa-behance</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-behance-square"></i><span>fa-behance-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bitbucket"></i><span>fa-bitbucket</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bitbucket-square"></i><span>fa-bitbucket-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-btc"></i><span>fa-btc</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-buysellads"></i><span>fa-buysellads</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-amex"></i><span>fa-cc-amex</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-discover"></i><span>fa-cc-discover</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-mastercard"></i><span>fa-cc-mastercard</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-paypal"></i><span>fa-cc-paypal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-stripe"></i><span>fa-cc-stripe</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-cc-visa"></i><span>fa-cc-visa</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-codepen"></i><span>fa-codepen</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-connectdevelop"></i><span>fa-connectdevelop</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-css3"></i><span>fa-css3</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dashcube"></i><span>fa-dashcube</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-delicious"></i><span>fa-delicious</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-deviantart"></i><span>fa-deviantart</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-digg"></i><span>fa-digg</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dribbble"></i><span>fa-dribbble</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-dropbox"></i><span>fa-dropbox</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-drupal"></i><span>fa-drupal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-empire"></i><span>fa-empire</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-facebook"></i><span>fa-facebook</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-facebook-official"></i><span>fa-facebook-official</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-facebook-square"></i><span>fa-facebook-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-flickr"></i><span>fa-flickr</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-forumbee"></i><span>fa-forumbee</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-foursquare"></i><span>fa-foursquare</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-git"></i><span>fa-git</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-git-square"></i><span>fa-git-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-github"></i><span>fa-github</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-github-alt"></i><span>fa-github-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-github-square"></i><span>fa-github-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-gratipay"></i><span>fa-gratipay</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-google"></i><span>fa-google</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-google-plus"></i><span>fa-google-plus</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-google-plus-square"></i><span>fa-google-plus-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-google-wallet"></i><span>fa-google-wallet</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-hacker-news"></i><span>fa-hacker-news</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-html5"></i><span>fa-html5</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-instagram"></i><span>fa-instagram</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-ioxhost"></i><span>fa-ioxhost</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-joomla"></i><span>fa-joomla</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-jsfiddle"></i><span>fa-jsfiddle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-lastfm"></i><span>fa-lastfm</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-lastfm-square"></i><span>fa-lastfm-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-leanpub"></i><span>fa-leanpub</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-linkedin"></i><span>fa-linkedin</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-linkedin-square"></i><span>fa-linkedin-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-linux"></i><span>fa-linux</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-maxcdn"></i><span>fa-maxcdn</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-meanpath"></i><span>fa-meanpath</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-medium"></i><span>fa-medium</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-openid"></i><span>fa-openid</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pagelines"></i><span>fa-pagelines</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-paypal"></i><span>fa-paypal</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pied-piper"></i><span>fa-pied-piper</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pied-piper-alt"></i><span>fa-pied-piper-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pinterest"></i><span>fa-pinterest</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pinterest-p"></i><span>fa-pinterest-p</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-pinterest-square"></i><span>fa-pinterest-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-qq"></i><span>fa-qq</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-rebel"></i><span>fa-rebel</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-reddit"></i><span>fa-reddit</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-reddit-square"></i><span>fa-reddit-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-renren"></i><span>fa-renren</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-sellsy"></i><span>fa-sellsy</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-alt"></i><span>fa-share-alt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-share-alt-square"></i><span>fa-share-alt-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-shirtsinbulk"></i><span>fa-shirtsinbulk</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-simplybuilt"></i><span>fa-simplybuilt</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-skyatlas"></i><span>fa-skyatlas</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-skype"></i><span>fa-skype</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-slack"></i><span>fa-slack</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-slideshare"></i><span>fa-slideshare</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-soundcloud"></i><span>fa-soundcloud</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-spotify"></i><span>fa-spotify</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stack-exchange"></i><span>fa-stack-exchange</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stack-overflow"></i><span>fa-stack-overflow</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-steam"></i><span>fa-steam</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-steam-square"></i><span>fa-steam-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stumbleupon"></i><span>fa-stumbleupon</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-stumbleupon-circle"></i><span>fa-stumbleupon-circle</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tencent-weibo"></i><span>fa-tencent-weibo</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-trello"></i><span>fa-trello</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tumblr"></i><span>fa-tumblr</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-tumblr-square"></i><span>fa-tumblr-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-twitch"></i><span>fa-twitch</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-twitter"></i><span>fa-twitter</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-twitter-square"></i><span>fa-twitter-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-viacoin"></i><span>fa-viacoin</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-vimeo-square"></i><span>fa-vimeo-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-vine"></i><span>fa-vine</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-vk"></i><span>fa-vk</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-weixin"></i><span>fa-weixin</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-weibo"></i><span>fa-weibo</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-whatsapp"></i><span>fa-whatsapp</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-windows"></i><span>fa-windows</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-wordpress"></i><span>fa-wordpress</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-xing"></i><span>fa-xing</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-xing-square"></i><span>fa-xing-square</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-yahoo"></i><span>fa-yahoo</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-yelp"></i><span>fa-yelp</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-youtube"></i><span>fa-youtube</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-youtube-play"></i><span>fa-youtube-play</span></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-youtube-square"></i><span>fa-youtube-square</span></li>
</ul>
</div>
{/block}
{block name="script"}
<script>
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
element = layui.element;
$ = layui.jquery;
/**
* 复制图标编码至粘贴板
*/
$("body").on("click", ".icons li", function () {
console.log('复制');
console.log($(this).text());
window.sessionStorage.setItem("icon", $(this).text());
var selectIcon = parent.layer.getFrameIndex(window.name);
parent.layer.close(selectIcon);
})
})
</script>
{/block}

View File

@@ -0,0 +1,180 @@
{extend name="admin@public/basic" /}
{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
<style>
.layui-icon {font-size: 25px !important;}
.layui-icon:hover {font-size: 50px !important;}
</style>
{/block}
{block name="cotent"}
<textarea id="copyText"></textarea>
<ul class="icons layui-row">
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-rate-half"></i><div class="doc-icon-code" >&amp;#xe6c9;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-rate"></i><div class="doc-icon-code">&amp;#xe67b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-rate-solid"></i><div class="doc-icon-code">&amp;#xe67a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-cellphone"></i><div class="doc-icon-code">&amp;#xe678;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-vercode"></i><div class="doc-icon-code">&amp;#xe679;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-login-wechat"></i><div class="doc-icon-code">&amp;#xe677;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-login-qq"></i><div class="doc-icon-code">&amp;#xe676;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-login-weibo"></i><div class="doc-icon-code">&amp;#xe675;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-password"></i><div class="doc-icon-code">&amp;#xe673;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-username"></i><div class="doc-icon-code">&amp;#xe66f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-refresh-3"></i><div class="doc-icon-code">&amp;#xe9aa;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-auz"></i><div class="doc-icon-code">&amp;#xe672;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-spread-left"></i><div class="doc-icon-code">&amp;#xe66b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-shrink-right"></i><div class="doc-icon-code">&amp;#xe668;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-snowflake"></i><div class="doc-icon-code">&amp;#xe6b1;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-tips"></i><div class="doc-icon-code">&amp;#xe702;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-note"></i><div class="doc-icon-code">&amp;#xe66e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-home"></i><div class="doc-icon-code">&amp;#xe68e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-senior"></i><div class="doc-icon-code">&amp;#xe674;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-refresh"></i><div class="doc-icon-code">&amp;#xe669;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-refresh-1"></i><div class="doc-icon-code">&amp;#xe666;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-flag"></i><div class="doc-icon-code">&amp;#xe66c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-theme"></i><div class="doc-icon-code">&amp;#xe66a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-notice"></i><div class="doc-icon-code">&amp;#xe667;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-website"></i><div class="doc-icon-code">&amp;#xe7ae;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-console"></i><div class="doc-icon-code">&amp;#xe665;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-face-surprised"></i><div class="doc-icon-code">&amp;#xe664;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-set"></i><div class="doc-icon-code">&amp;#xe716;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-template-1"></i><div class="doc-icon-code">&amp;#xe656;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-app"></i><div class="doc-icon-code">&amp;#xe653;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-template"></i><div class="doc-icon-code">&amp;#xe663;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-praise"></i><div class="doc-icon-code">&amp;#xe6c6;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-tread"></i><div class="doc-icon-code">&amp;#xe6c5;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-male"></i><div class="doc-icon-code">&amp;#xe662;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-female"></i><div class="doc-icon-code">&amp;#xe661;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-camera"></i><div class="doc-icon-code">&amp;#xe660;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-camera-fill"></i><div class="doc-icon-code">&amp;#xe65d;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-more"></i><div class="doc-icon-code">&amp;#xe65f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-more-vertical"></i><div class="doc-icon-code">&amp;#xe671;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-rmb"></i><div class="doc-icon-code">&amp;#xe65e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-dollar"></i><div class="doc-icon-code">&amp;#xe659;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-diamond"></i><div class="doc-icon-code">&amp;#xe735;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fire"></i><div class="doc-icon-code">&amp;#xe756;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-return"></i><div class="doc-icon-code">&amp;#xe65c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-location"></i><div class="doc-icon-code">&amp;#xe715;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-read"></i><div class="doc-icon-code">&amp;#xe705;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-survey"></i><div class="doc-icon-code">&amp;#xe6b2;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-face-smile"></i><div class="doc-icon-code">&amp;#xe6af;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-face-cry"></i><div class="doc-icon-code">&amp;#xe69c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-cart-simple"></i><div class="doc-icon-code">&amp;#xe698;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-cart"></i><div class="doc-icon-code">&amp;#xe657;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-next"></i><div class="doc-icon-code">&amp;#xe65b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-prev"></i><div class="doc-icon-code">&amp;#xe65a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-upload-drag"></i><div class="doc-icon-code">&amp;#xe681;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-upload"></i><div class="doc-icon-code">&amp;#xe67c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-download-circle"></i><div class="doc-icon-code">&amp;#xe601;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-component"></i><div class="doc-icon-code">&amp;#xe857;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-file-b"></i><div class="doc-icon-code">&amp;#xe655;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-user"></i><div class="doc-icon-code">&amp;#xe770;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-find-fill"></i><div class="doc-icon-code">&amp;#xe670;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i><div
class="doc-icon-code">&amp;#xe63d;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i><div class="doc-icon-code">&amp;#xe63e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-add-1"></i><div class="doc-icon-code">&amp;#xe654;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-play"></i><div class="doc-icon-code">&amp;#xe652;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-pause"></i><div class="doc-icon-code">&amp;#xe651;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-headset"></i><div class="doc-icon-code">&amp;#xe6fc;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-video"></i><div class="doc-icon-code">&amp;#xe6ed;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-voice"></i><div class="doc-icon-code">&amp;#xe688;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-speaker"></i><div class="doc-icon-code">&amp;#xe645;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-del"></i><div class="doc-icon-code">&amp;#xe64f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-code"></i><div class="doc-icon-code">&amp;#xe64e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-html"></i><div class="doc-icon-code">&amp;#xe64b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-strong"></i><div class="doc-icon-code">&amp;#xe62b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-unlink"></i><div class="doc-icon-code">&amp;#xe64d;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-picture"></i><div class="doc-icon-code">&amp;#xe64a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-link"></i><div class="doc-icon-code">&amp;#xe64c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-face-smile-b"></i><div class="doc-icon-code">&amp;#xe650;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-align-left"></i><div class="doc-icon-code">&amp;#xe649;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-align-right"></i><div class="doc-icon-code">&amp;#xe648;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-align-center"></i><div class="doc-icon-code">&amp;#xe647;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-u"></i><div class="doc-icon-code">&amp;#xe646;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-i"></i><div class="doc-icon-code">&amp;#xe644;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-tabs"></i><div class="doc-icon-code">&amp;#xe62a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-radio"></i><div class="doc-icon-code">&amp;#xe643;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-circle"></i><div class="doc-icon-code">&amp;#xe63f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-edit"></i><div class="doc-icon-code">&amp;#xe642;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-share"></i><div class="doc-icon-code">&amp;#xe641;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-delete"></i><div class="doc-icon-code">&amp;#xe640;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-form"></i><div class="doc-icon-code">&amp;#xe63c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-cellphone-fine"></i><div class="doc-icon-code">&amp;#xe63b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-dialogue"></i><div class="doc-icon-code">&amp;#xe63a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-fonts-clear"></i><div class="doc-icon-code">&amp;#xe639;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-layer"></i><div class="doc-icon-code">&amp;#xe638;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-date"></i><div class="doc-icon-code">&amp;#xe637;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-water"></i><div class="doc-icon-code">&amp;#xe636;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-code-circle"></i><div class="doc-icon-code">&amp;#xe635;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-carousel"></i><div class="doc-icon-code">&amp;#xe634;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-prev-circle"></i><div class="doc-icon-code">&amp;#xe633;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-layouts"></i><div class="doc-icon-code">&amp;#xe632;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-util"></i><div class="doc-icon-code">&amp;#xe631;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-templeate-1"></i><div class="doc-icon-code">&amp;#xe630;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-upload-circle"></i><div class="doc-icon-code">&amp;#xe62f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-tree"></i><div class="doc-icon-code">&amp;#xe62e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-table"></i><div class="doc-icon-code">&amp;#xe62d;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-chart"></i><div class="doc-icon-code">&amp;#xe62c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-chart-screen"></i><div class="doc-icon-code">&amp;#xe629;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-engine"></i><div class="doc-icon-code">&amp;#xe628;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-triangle-d"></i><div class="doc-icon-code">&amp;#xe625;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-triangle-r"></i><div class="doc-icon-code">&amp;#xe623;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-file"></i><div class="doc-icon-code">&amp;#xe621;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-set-sm"></i><div class="doc-icon-code">&amp;#xe620;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-add-circle"></i><div class="doc-icon-code">&amp;#xe61f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-404"></i><div class="doc-icon-code">&amp;#xe61c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-about"></i><div class="doc-icon-code">&amp;#xe60b;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-up"></i><div class="doc-icon-code">&amp;#xe619;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-down"></i><div class="doc-icon-code">&amp;#xe61a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-left"></i><div class="doc-icon-code">&amp;#xe603;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-right"></i><div class="doc-icon-code">&amp;#xe602;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-circle-dot"></i><div class="doc-icon-code">&amp;#xe617;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-search"></i><div class="doc-icon-code">&amp;#xe615;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-set-fill"></i><div class="doc-icon-code">&amp;#xe614;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-group"></i><div class="doc-icon-code">&amp;#xe613;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-friends"></i><div class="doc-icon-code">&amp;#xe612;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-reply-fill"></i><div class="doc-icon-code">&amp;#xe611;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-menu-fill"></i><div class="doc-icon-code">&amp;#xe60f;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-log"></i><div class="doc-icon-code">&amp;#xe60e;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-picture-fine"></i><div class="doc-icon-code">&amp;#xe60d;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-face-smile-fine"></i><div class="doc-icon-code">&amp;#xe60c;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-list"></i><div class="doc-icon-code">&amp;#xe60a;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-release"></i><div class="doc-icon-code">&amp;#xe609;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-ok"></i><div class="doc-icon-code">&amp;#xe605;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-help"></i><div class="doc-icon-code">&amp;#xe607;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-chat"></i><div class="doc-icon-code">&amp;#xe606;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-top"></i><div class="doc-icon-code">&amp;#xe604;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-star"></i><div class="doc-icon-code">&amp;#xe600;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-star-fill"></i><div class="doc-icon-code">&amp;#xe658;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-close-fill"></i><div class="doc-icon-code">&amp;#x1007;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-close"></i><div class="doc-icon-code">&amp;#x1006;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-ok-circle"></i><div class="doc-icon-code">&amp;#x1005;</div></li>
<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="layui-icon layui-icon-add-circle-fine"></i><div class="doc-icon-code">&amp;#xe608;</div></li>
</ul>
{/block}
{block name="script"}
<script>
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
element = layui.element;
$ = layui.jquery;
/**
* 复制图标编码至粘贴板
*/
$("body").on("click",".icons li",function(){
var copyText = document.getElementById("copyText");
copyText.innerText = $(this).html();
copyText.select();
document.execCommand("copy");
window.sessionStorage.setItem("icon",$(this).text());
var selectIcon = parent.layer.getFrameIndex(window.name);
parent.layer.close(selectIcon);
})
})
</script>
{/block}

View File

@@ -0,0 +1 @@
389cbdc0-62f0-45d1-827a-3375262e3c46

View File

@@ -0,0 +1,516 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/css/admin/upload.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/webuploader-0.1.5/webuploader.css">
</head>
<body>
<div class="page-container">
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
</div>
</div>
<div class="statusBar" style="display:none">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<!--{if $type != 'one'}-->
<div id="filePicker2"></div>
<!--{if/}-->
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="__STATIC__/plugs/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/layui/layui.all.js"></script>
<script type="text/javascript" src="__STATIC__/admin.js"></script>
<script>
// 添加全局站点信息
var BASE_URL = '/webuploader';
jQuery(function () {
var $ = jQuery, // just in case. Make sure it's not an other libaray.
//上传成功后保存的数组
$upload_iamges = '',
$wrap = $('#uploader'),
// 图片容器
$queue = $('<ul class="filelist"></ul>')
.appendTo($wrap.find('.queueList')),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info = $statusBar.find('.info'),
// 上传按钮
$upload = $wrap.find('.uploadBtn'),
// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),
// 总体进度条
$progress = $statusBar.find('.progress').hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有文件的进度信息key为file id
percentages = {},
supportTransition = (function () {
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
uploader;
if (!WebUploader.Uploader.support()) {
alert('Web Uploader 不支持您的浏览器如果你使用的是IE浏览器请尝试升级 flash 播放器');
throw new Error('WebUploader does not support the browser you are using.');
}
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片',
/*{if $type === 'one'}*/
multiple: false,
/*{else}*/
multiple: true,
/*{/if}*/
},
dnd: '#uploader .queueList',
paste: document.body,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
disableGlobalDnd: true,
chunked: true,
server: '{:url("@admin/api.upload/image")}',
fileNumLimit: 300,
fileSizeLimit: 5 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 1 * 1024 * 1024 // 50 M
});
// 添加“添加文件”的按钮,
uploader.addButton({
/*{if $type === 'one'}*/
/*{else}*/
id: '#filePicker2',
label: '继续添加'
/*{/if}*/
});
//单个文件上传完成后
uploader.on('uploadAccept', function (object, ret) {
if (ret.code == 0) {
/*{if $type === 'one'}*/
$upload_iamges = ret.url[0];
window.sessionStorage.setItem("upload_iamges", $upload_iamges);
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
/*{else}*/
if ($upload_iamges == '') {
$upload_iamges = ret.url[0];
} else {
$upload_iamges = $upload_iamges + '|' + ret.url[0];
}
/*{/if}*/
window.sessionStorage.setItem("upload_iamges", $upload_iamges);
return true;
} else {
$.msg.error(ret.msg);
object.file.setStatus('error', ret.msg);
return false;
}
});
// 当有文件添加进来时执行负责view的创建
function addFile(file) {
var $li = $('<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>' +
'<p class="progress"><span></span></p>' +
'</li>'),
$btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>' +
'<span class="rotateRight">向右旋转</span>' +
'<span class="rotateLeft">向左旋转</span></div>').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('<p class="error"></p>'),
showError = function (code) {
switch (code) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败,请重试';
break;
}
$info.text(text).appendTo($li);
};
if (file.getStatus() === 'invalid') {
showError(file.statusText);
} else {
// @todo lazyload
$wrap.text('预览中');
uploader.makeThumb(file, function (error, src) {
if (error) {
$wrap.text('不能预览');
return;
}
var img = $('<img src="' + src + '">');
$wrap.empty().append(img);
}, thumbnailWidth, thumbnailHeight);
percentages[file.id] = [file.size, 0];
file.rotation = 0;
}
file.on('statuschange', function (cur, prev) {
if (prev === 'progress') {
$prgress.hide().width(0);
} else if (prev === 'queued') {
$li.off('mouseenter mouseleave');
$btns.remove();
}
// 成功
if (cur === 'error' || cur === 'invalid') {
console.log(file.statusText);
showError(file.statusText);
percentages[file.id][1] = 1;
} else if (cur === 'interrupt') {
showError('interrupt');
} else if (cur === 'queued') {
percentages[file.id][1] = 0;
} else if (cur === 'progress') {
$info.remove();
$prgress.css('display', 'block');
} else if (cur === 'complete') {
$li.append('<span class="success"></span>');
}
$li.removeClass('state-' + prev).addClass('state-' + cur);
});
$li.on('mouseenter', function () {
$btns.stop().animate({height: 30});
});
$li.on('mouseleave', function () {
$btns.stop().animate({height: 0});
});
$btns.on('click', 'span', function () {
var index = $(this).index(),
deg;
switch (index) {
case 0:
uploader.removeFile(file);
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if (supportTransition) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
// use jquery animate to rotation
// $({
// rotation: rotation
// }).animate({
// rotation: file.rotation
// }, {
// easing: 'linear',
// step: function( now ) {
// now = now * Math.PI / 180;
// var cos = Math.cos( now ),
// sin = Math.sin( now );
// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
// }
// });
}
});
$li.appendTo($queue);
}
// 负责view的销毁
function removeFile(file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(percentages, function (k, v) {
total += v[0];
loaded += v[0] * v[1];
});
percent = total ? loaded / total : 0;
spans.eq(0).text(Math.round(percent * 100) + '%');
spans.eq(1).css('width', Math.round(percent * 100) + '%');
updateStatus();
}
function updateStatus() {
var text = '', stats;
if (state === 'ready') {
text = '选中' + fileCount + '张图片,共' +
WebUploader.formatSize(fileSize) + '。';
} else if (state === 'confirm') {
stats = uploader.getStats();
if (stats.uploadFailNum) {
text = '已成功上传' + stats.successNum + '张照片至XX相册' +
stats.uploadFailNum + '张照片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '共' + fileCount + '张(' +
WebUploader.formatSize(fileSize) +
'),已上传' + stats.successNum + '张';
if (stats.uploadFailNum) {
text += ',失败' + stats.uploadFailNum + '张';
}
}
$info.html(text);
}
function setState(val) {
var file, stats;
if (val === state) {
return;
}
$upload.removeClass('state-' + state);
$upload.addClass('state-' + val);
state = val;
switch (state) {
case 'pedding':
$placeHolder.removeClass('element-invisible');
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$('#filePicker2').removeClass('element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$('#filePicker2').addClass('element-invisible');
$progress.show();
$upload.text('暂停上传');
break;
case 'paused':
$progress.show();
$upload.text('继续上传');
break;
case 'confirm':
$progress.hide();
$upload.text('完成上传');
$upload.attr('data-close', 'closeOpen');
stats = uploader.getStats();
if (stats.successNum && !stats.uploadFailNum) {
setState('finish');
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
$.msg.success('上传成功');
} else {
// 没有成功的图片,重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
uploader.onUploadProgress = function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[file.id][1] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function (file) {
fileCount++;
fileSize += file.size;
if (fileCount === 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};
uploader.onFileDequeued = function (file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
};
uploader.on('all', function (type) {
var stats;
switch (type) {
case 'uploadFinished':
setState('confirm');
break;
case 'startUpload':
setState('uploading');
break;
case 'stopUpload':
setState('paused');
break;
}
});
uploader.onError = function (code) {
alert('Eroor: ' + code);
};
$upload.on('click', function () {
if ($(this).hasClass('disabled')) {
return false;
}
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop();
}
});
$info.on('click', '.retry', function () {
uploader.retry();
});
$info.on('click', '.ignore', function () {
alert('todo');
});
$upload.addClass('state-' + state);
updateTotalProgress();
});
</script>
</body>
</html>