
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>icon</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0">
    <link href="{__FRAME_PATH}css/bootstrap.min.css" rel="stylesheet">
    <link href="{__FRAME_PATH}css/font-awesome.min.css" rel="stylesheet">
    <script src="{__FRAME_PATH}js/jquery.min.js"></script>
    <style>
        .icons-box{  margin-top: 10px;}
        .list-inline li{width: 3rem;
            border: 1px solid #F7F4F4;
            text-align: center;
            height: 3rem;
            padding: 0.5rem;
            background-color: #FFFFFF;
            color: #0A0A0A;}
        .list-inline li:hover{
            color: #ff0000;
            border: 1px solid #ff0000;
        }
        .form-control{
            display: inline-block;
            width: 75%;
        }
    </style>
</head>
<body>
<div class="ibox-content icons-box">
    <div class="form-group">
        <input type="email" class="form-control" id="search" placeholder="输入关键词搜索：注意全是英文">
        <button id="qingkong" class="btn btn-default">清空选择</button>
    </div>
    <div>
        <h5> v4.3.0新增图标 </h5>
        <ul class="list-inline">
            <li  title="bed"><i class="fa fa-bed"></i> </li>

            <li  title="buysellads"><i class="fa fa-buysellads"></i> </li>

            <li  title="cart-arrow-down"><i class="fa fa-cart-arrow-down"></i> </li>

            <li  title="cart-plus"><i class="fa fa-cart-plus"></i> </li>

            <li  title="connectdevelop"><i class="fa fa-connectdevelop"></i> </li>

            <li  title="dashcube"><i class="fa fa-dashcube"></i> </li>

            <li  title="diamond"><i class="fa fa-diamond"></i> </li>

            <li  title="facebook-official"><i class="fa fa-facebook-official"></i> </li>

            <li  title="forumbee"><i class="fa fa-forumbee"></i> </li>

            <li  title="heartbeat"><i class="fa fa-heartbeat"></i> </li>

            <li  title="hotel"><i class="fa fa-hotel"></i> </li>

            <li  title="leanpub"><i class="fa fa-leanpub"></i> </li>

            <li  title="mars"><i class="fa fa-mars"></i> </li>

            <li  title="mars-double"><i class="fa fa-mars-double"></i> </li>

            <li  title="mars-stroke"><i class="fa fa-mars-stroke"></i> </li>

            <li  title="mars-stroke-h"><i class="fa fa-mars-stroke-h"></i> </li>

            <li  title="mars-stroke-v"><i class="fa fa-mars-stroke-v"></i> </li>

            <li  title="medium"><i class="fa fa-medium"></i> </li>

            <li  title="mercury"><i class="fa fa-mercury"></i> </li>

            <li  title="motorcycle"><i class="fa fa-motorcycle"></i> </li>

            <li  title="neuter"><i class="fa fa-neuter"></i> </li>

            <li  title="pinterest-p"><i class="fa fa-pinterest-p"></i> </li>

            <li  title="sellsy"><i class="fa fa-sellsy"></i> </li>

            <li  title="server"><i class="fa fa-server"></i> </li>

            <li  title="ship"><i class="fa fa-ship"></i> </li>

            <li  title="shirtsinbulk"><i class="fa fa-shirtsinbulk"></i> </li>

            <li  title="simplybuilt"><i class="fa fa-simplybuilt"></i> </li>

            <li  title="skyatlas"><i class="fa fa-skyatlas"></i> </li>

            <li  title="street-view"><i class="fa fa-street-view"></i> </li>

            <li  title="subway"><i class="fa fa-subway"></i> </li>

            <li  title="train"><i class="fa fa-train"></i> </li>

            <li  title="transgender"><i class="fa fa-transgender"></i> </li>

            <li  title="transgender-alt"><i class="fa fa-transgender-alt"></i> </li>

            <li  title="user-plus"><i class="fa fa-user-plus"></i> </li>

            <li  title="user-secret"><i class="fa fa-user-secret"></i> </li>

            <li  title="user-times"><i class="fa fa-user-times"></i> </li>

            <li  title="venus"><i class="fa fa-venus"></i> </li>

            <li  title="venus-double"><i class="fa fa-venus-double"></i> </li>

            <li  title="venus-mars"><i class="fa fa-venus-mars"></i> </li>

            <li  title="viacoin"><i class="fa fa-viacoin"></i> </li>

            <li  title="whatsapp"><i class="fa fa-whatsapp"></i> </li>
        </ul>


        <div class="clearfix"></div>
    </div>

    <div>
        <h5> v4.2.0新增图标 </h5>
        <ul class="list-inline">
        <li title="angellist"><i class="fa fa-angellist"></i> </li>
        <li title="area-chart"><i class="fa fa-area-chart"></i> </li>
        <li title="at"><i class="fa fa-at"></i> </li>
        <li title="bell-slash"><i class="fa fa-bell-slash"></i> </li>
        <li title="bell-slash-o"><i class="fa fa-bell-slash-o"></i> </li>
        <li title="bicycle"><i class="fa fa-bicycle"></i> </li>
        <li title="binoculars"><i class="fa fa-binoculars"></i> </li>
        <li title="birthday-cake"><i class="fa fa-birthday-cake"></i> </li>
        <li title="bus"><i class="fa fa-bus"></i> </li>
        <li title="calculator"><i class="fa fa-calculator"></i> </li>
        <li title="cc"><i class="fa fa-cc"></i> </li>
        <li title="cc-amex"><i class="fa fa-cc-amex"></i> </li>
        <li title="cc-discover"><i class="fa fa-cc-discover"></i> </li>
        <li title="cc-mastercard"><i class="fa fa-cc-mastercard"></i> </li>
        <li title="cc-paypal"><i class="fa fa-cc-paypal"></i> </li>
        <li title="cc-stripe"><i class="fa fa-cc-stripe"></i> </li>
        <li title="cc-visa"><i class="fa fa-cc-visa"></i> </li>
        <li title="copyright"><i class="fa fa-copyright"></i> </li>
        <li title="eyedropper"><i class="fa fa-eyedropper"></i> </li>
        <li title="futbol-o"><i class="fa fa-futbol-o"></i> </li>
        <li title="google-wallet"><i class="fa fa-google-wallet"></i> </li>
        <li title="ils"><i class="fa fa-ils"></i> </li>
        <li title="ioxhost"><i class="fa fa-ioxhost"></i> </li>
        <li title="lastfm"><i class="fa fa-lastfm"></i> </li>
        <li title="lastfm-square"><i class="fa fa-lastfm-square"></i> </li>
        <li title="line-chart"><i class="fa fa-line-chart"></i> </li>
        <li title="meanpath"><i class="fa fa-meanpath"></i> </li>
        <li title="newspaper-o"><i class="fa fa-newspaper-o"></i> </li>
        <li title="paint-brush"><i class="fa fa-paint-brush"></i> </li>
        <li title="paypal"><i class="fa fa-paypal"></i> </li>
        <li title="pie-chart"><i class="fa fa-pie-chart"></i> </li>
        <li title="plug"><i class="fa fa-plug"></i> </li>
        <li title="shekel"><i class="fa fa-shekel"></i> </li>
        <li title="sheqel"><i class="fa fa-sheqel"></i> </li>
        <li title="slideshare"><i class="fa fa-slideshare"></i> </li>
        <li title="soccer-ball-o"><i class="fa fa-soccer-ball-o"></i> </li>
        <li title="toggle-off"><i class="fa fa-toggle-off"></i> </li>
        <li title="toggle-on"><i class="fa fa-toggle-on"></i> </li>
        <li title="trash"><i class="fa fa-trash"></i> </li>
        <li title="tty"><i class="fa fa-tty"></i> </li>
        <li title="twitch"><i class="fa fa-twitch"></i> </li>
        <li title="wifi"><i class="fa fa-wifi"></i> </li>
        <li title="yelp"><i class="fa fa-yelp"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>

    <div>
        <h5> v4.1.0新增图标 </h5>
        <ul class="list-inline">
        <li  title="rub"><i class="fa fa-rub"></i> </li>
        <li  title="ruble"><i class="fa fa-ruble"></i> </li>
        <li  title="rouble"><i class="fa fa-rouble"></i> </li>
        <li  title="pagelines"><i class="fa fa-pagelines"></i> </li>
        <li  title="stack-exchange"><i class="fa fa-stack-exchange"></i> </li>
        <li  title="arrow-circle-o-right"><i class="fa fa-arrow-circle-o-right"></i> </li>
        <li  title="arrow-circle-o-left"><i class="fa fa-arrow-circle-o-left"></i> </li>
        <li  title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
        <li  title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
        <li  title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
        <li  title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
        <li  title="vimeo-square"><i class="fa fa-vimeo-square"></i> </li>
        <li  title="try"><i class="fa fa-try"></i> </li>
        <li  title="turkish-lira"><i class="fa fa-turkish-lira"></i> </li>
        <li  title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>


        <li  title="automobile"><i class="fa fa-automobile"></i> </li>
        <li  title="bank"><i class="fa fa-bank"></i> </li>
        <li  title="behance"><i class="fa fa-behance"></i> </li>
        <li  title="behance-square"><i class="fa fa-behance-square"></i> </li>
        <li  title="bomb"><i class="fa fa-bomb"></i> </li>
        <li  title="building"><i class="fa fa-building"></i> </li>
        <li  title="cab"><i class="fa fa-cab"></i> </li>
        <li  title="car"><i class="fa fa-car"></i> </li>
        <li  title="child"><i class="fa fa-child"></i> </li>
        <li  title="circle-o-notch"><i class="fa fa-circle-o-notch"></i> </li>
        <li  title="circle-thin"><i class="fa fa-circle-thin"></i> </li>
        <li  title="codepen"><i class="fa fa-codepen"></i> </li>
        <li  title="cube"><i class="fa fa-cube"></i> </li>
        <li  title="cubes"><i class="fa fa-cubes"></i> </li>
        <li  title="database"><i class="fa fa-database"></i> </li>
        <li  title="delicious"><i class="fa fa-delicious"></i> </li>
        <li  title="deviantart"><i class="fa fa-deviantart"></i> </li>
        <li  title="digg"><i class="fa fa-digg"></i> </li>
        <li  title="drupal"><i class="fa fa-drupal"></i> </li>
        <li  title="empire"><i class="fa fa-empire"></i> </li>
        <li  title="envelope-square"><i class="fa fa-envelope-square"></i> </li>
        <li  title="fax"><i class="fa fa-fax"></i> </li>
        <li  title="file-archive-o"><i class="fa fa-file-archive-o"></i> </li>
        <li  title="file-audio-o"><i class="fa fa-file-audio-o"></i> </li>
        <li  title="file-code-o"><i class="fa fa-file-code-o"></i> </li>
        <li  title="file-excel-o"><i class="fa fa-file-excel-o"></i> </li>
        <li  title="file-image-o"><i class="fa fa-file-image-o"></i> </li>
        <li  title="file-movie-o"><i class="fa fa-file-movie-o"></i> </li>
        <li  title="file-pdf-o"><i class="fa fa-file-pdf-o"></i> </li>
        <li  title="file-photo-o"><i class="fa fa-file-photo-o"></i> </li>
        <li  title="file-picture-o"><i class="fa fa-file-picture-o"></i> </li>
        <li  title="file-powerpoint-o"><i class="fa fa-file-powerpoint-o"></i> </li>
        <li  title="file-sound-o"><i class="fa fa-file-sound-o"></i> </li>
        <li  title="file-video-o"><i class="fa fa-file-video-o"></i> </li>
        <li  title="file-word-o"><i class="fa fa-file-word-o"></i> </li>
        <li  title="file-zip-o"><i class="fa fa-file-zip-o"></i> </li>
        <li  title="ge"><i class="fa fa-ge"></i> </li>
        <li  title="git"><i class="fa fa-git"></i> </li>
        <li  title="git-square"><i class="fa fa-git-square"></i> </li>
        <li  title="google"><i class="fa fa-google"></i> </li>
        <li  title="graduation-cap"><i class="fa fa-graduation-cap"></i> </li>
        <li  title="hacker-news"><i class="fa fa-hacker-news"></i> </li>
        <li  title="header"><i class="fa fa-header"></i> </li>
        <li  title="history"><i class="fa fa-history"></i> </li>
        <li  title="institution"><i class="fa fa-institution"></i> </li>
        <li  title="joomla"><i class="fa fa-joomla"></i> </li>
        <li  title="jsfiddle"><i class="fa fa-jsfiddle"></i> </li>
        <li  title="language"><i class="fa fa-language"></i> </li>
        <li  title="life-bouy"><i class="fa fa-life-bouy"></i> </li>
        <li  title="life-ring"><i class="fa fa-life-ring"></i> </li>
        <li  title="life-saver"><i class="fa fa-life-saver"></i> </li>
        <li  title="mortar-board"><i class="fa fa-mortar-board"></i> </li>
        <li  title="openid"><i class="fa fa-openid"></i> </li>
        <li  title="paper-plane"><i class="fa fa-paper-plane"></i> </li>
        <li  title="paper-plane-o"><i class="fa fa-paper-plane-o"></i> </li>
        <li  title="paragraph"><i class="fa fa-paragraph"></i> </li>
        <li  title="paw"><i class="fa fa-paw"></i> </li>
        <li  title="pied-piper"><i class="fa fa-pied-piper"></i> </li>
        <li  title="pied-piper-alt"><i class="fa fa-pied-piper-alt"></i> </li>
        <li  title="pied-piper-square"><i class="fa fa-pied-piper-square"></i> </li>
        <li  title="qq"><i class="fa fa-qq"></i> </li>
        <li  title="ra"><i class="fa fa-ra"></i> </li>
        <li  title="rebel"><i class="fa fa-rebel"></i> </li>
        <li  title="recycle"><i class="fa fa-recycle"></i> </li>
        <li  title="reddit"><i class="fa fa-reddit"></i> </li>
        <li  title="reddit-square"><i class="fa fa-reddit-square"></i> </li>
        <li  title="send"><i class="fa fa-send"></i> </li>
        <li  title="send-o"><i class="fa fa-send-o"></i> </li>
        <li  title="share-alt"><i class="fa fa-share-alt"></i> </li>
        <li  title="share-alt-square"><i class="fa fa-share-alt-square"></i> </li>
        <li  title="slack"><i class="fa fa-slack"></i> </li>
        <li  title="sliders"><i class="fa fa-sliders"></i> </li>
        <li  title="soundcloud"><i class="fa fa-soundcloud"></i> </li>
        <li  title="space-shuttle"><i class="fa fa-space-shuttle"></i> </li>
        <li  title="spoon"><i class="fa fa-spoon"></i> </li>
        <li  title="spotify"><i class="fa fa-spotify"></i> </li>
        <li  title="steam"><i class="fa fa-steam"></i> </li>
        <li  title="steam-square"><i class="fa fa-steam-square"></i> </li>
        <li  title="stumbleupon"><i class="fa fa-stumbleupon"></i> </li>
        <li  title="stumbleupon-circle"><i class="fa fa-stumbleupon-circle"></i> </li>
        <li  title="support"><i class="fa fa-support"></i> </li>
        <li  title="taxi"><i class="fa fa-taxi"></i> </li>
        <li  title="tencent-weibo"><i class="fa fa-tencent-weibo"></i> </li>
        <li  title="tree"><i class="fa fa-tree"></i> </li>
        <li  title="university"><i class="fa fa-university"></i> </li>
        <li  title="vine"><i class="fa fa-vine"></i> </li>
        <li  title="wechat"><i class="fa fa-wechat"></i> </li>
        <li  title="weixin"><i class="fa fa-weixin"></i> </li>
        <li  title="wordpress"><i class="fa fa-wordpress"></i> </li>
        <li  title="yahoo"><i class="fa fa-yahoo"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>Web应用程序图标</h5>
        <ul class="list-inline">
        <li  title="adjust"><i class="fa fa-adjust"></i> </li>
        <li  title="anchor"><i class="fa fa-anchor"></i> </li>
        <li  title="archive"><i class="fa fa-archive"></i> </li>
        <li  title="arrows"><i class="fa fa-arrows"></i> </li>
        <li  title="arrows-h"><i class="fa fa-arrows-h"></i> </li>
        <li  title="arrows-v"><i class="fa fa-arrows-v"></i> </li>
        <li  title="asterisk"><i class="fa fa-asterisk"></i> </li>
        <li  title="ban"><i class="fa fa-ban"></i> </li>
        <li  title="bar-chart-o"><i class="fa fa-bar-chart-o"></i> </li>
        <li  title="barcode"><i class="fa fa-barcode"></i> </li>
        <li  title="bars"><i class="fa fa-bars"></i> </li>
        <li  title="beer"><i class="fa fa-beer"></i> </li>
        <li  title="bell"><i class="fa fa-bell"></i> </li>
        <li  title="bell-o"><i class="fa fa-bell-o"></i> </li>
        <li  title="bolt"><i class="fa fa-bolt"></i> </li>
        <li  title="book"><i class="fa fa-book"></i> </li>
        <li  title="bookmark"><i class="fa fa-bookmark"></i> </li>
        <li  title="bookmark-o"><i class="fa fa-bookmark-o"></i> </li>
        <li  title="briefcase"><i class="fa fa-briefcase"></i> </li>
        <li  title="bug"><i class="fa fa-bug"></i> </li>
        <li  title="building-o"><i class="fa fa-building-o"></i> </li>
        <li  title="bullhorn"><i class="fa fa-bullhorn"></i> </li>
        <li  title="bullseye"><i class="fa fa-bullseye"></i> </li>
        <li  title="calendar"><i class="fa fa-calendar"></i> </li>
        <li  title="calendar-o"><i class="fa fa-calendar-o"></i> </li>
        <li  title="camera"><i class="fa fa-camera"></i> </li>
        <li  title="camera-retro"><i class="fa fa-camera-retro"></i> </li>
        <li  title="caret-square-o-down"><i class="fa fa-caret-square-o-down"></i> </li>
        <li  title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
        <li  title="caret-square-o-right"><i class="fa fa-caret-square-o-right"></i> </li>
        <li  title="caret-square-o-up"><i class="fa fa-caret-square-o-up"></i> </li>
        <li  title="certificate"><i class="fa fa-certificate"></i> </li>
        <li  title="check"><i class="fa fa-check"></i> </li>
        <li  title="check-circle"><i class="fa fa-check-circle"></i> </li>
        <li  title="check-circle-o"><i class="fa fa-check-circle-o"></i> </li>
        <li  title="check-square"><i class="fa fa-check-square"></i> </li>
        <li  title="check-square-o"><i class="fa fa-check-square-o"></i> </li>
        <li  title="circle"><i class="fa fa-circle"></i> </li>
        <li  title="circle-o"><i class="fa fa-circle-o"></i> </li>
        <li  title="clock-o"><i class="fa fa-clock-o"></i> </li>
        <li  title="cloud"><i class="fa fa-cloud"></i> </li>
        <li  title="cloud-download"><i class="fa fa-cloud-download"></i> </li>
        <li  title="cloud-upload"><i class="fa fa-cloud-upload"></i> </li>
        <li  title="code"><i class="fa fa-code"></i> </li>
        <li  title="code-fork"><i class="fa fa-code-fork"></i> </li>
        <li  title="coffee"><i class="fa fa-coffee"></i> </li>
        <li  title="cog"><i class="fa fa-cog"></i> </li>
        <li  title="cogs"><i class="fa fa-cogs"></i> </li>
        <li  title="comment"><i class="fa fa-comment"></i> </li>
        <li  title="comment-o"><i class="fa fa-comment-o"></i> </li>
        <li  title="comments"><i class="fa fa-comments"></i> </li>
        <li  title="comments-o"><i class="fa fa-comments-o"></i> </li>
        <li  title="compass"><i class="fa fa-compass"></i> </li>
        <li  title="credit-card"><i class="fa fa-credit-card"></i> </li>
        <li  title="crop"><i class="fa fa-crop"></i> </li>
        <li  title="crosshairs"><i class="fa fa-crosshairs"></i> </li>
        <li  title="cutlery"><i class="fa fa-cutlery"></i> </li>
        <li  title="dashboard"><i class="fa fa-dashboard"></i> </li>
        <li  title="desktop"><i class="fa fa-desktop"></i> </li>
        <li  title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
        <li  title="download"><i class="fa fa-download"></i> </li>
        <li  title="edit"><i class="fa fa-edit"></i> </li>
        <li  title="ellipsis-h"><i class="fa fa-ellipsis-h"></i> </li>
        <li  title="ellipsis-v"><i class="fa fa-ellipsis-v"></i> </li>
        <li  title="envelope"><i class="fa fa-envelope"></i> </li>
        <li  title="envelope-o"><i class="fa fa-envelope-o"></i> </li>
        <li  title="eraser"><i class="fa fa-eraser"></i> </li>
        <li  title="exchange"><i class="fa fa-exchange"></i> </li>
        <li  title="exclamation"><i class="fa fa-exclamation"></i> </li>
        <li  title="exclamation-circle"><i class="fa fa-exclamation-circle"></i> </li>
        <li  title="exclamation-triangle"><i class="fa fa-exclamation-triangle"></i> </li>
        <li  title="external-link"><i class="fa fa-external-link"></i> </li>
        <li  title="external-link-square"><i class="fa fa-external-link-square"></i> </li>
        <li  title="eye"><i class="fa fa-eye"></i> </li>
        <li  title="eye-slash"><i class="fa fa-eye-slash"></i> </li>
        <li  title="female"><i class="fa fa-female"></i> </li>
        <li  title="fighter-jet"><i class="fa fa-fighter-jet"></i> </li>
        <li  title="film"><i class="fa fa-film"></i> </li>
        <li  title="filter"><i class="fa fa-filter"></i> </li>
        <li  title="fire"><i class="fa fa-fire"></i> </li>
        <li  title="fire-extinguisher"><i class="fa fa-fire-extinguisher"></i> </li>
        <li  title="flag"><i class="fa fa-flag"></i> </li>
        <li  title="flag-checkered"><i class="fa fa-flag-checkered"></i> </li>
        <li  title="flag-o"><i class="fa fa-flag-o"></i> </li>
        <li  title="flash"><i class="fa fa-flash"></i> </li>
        <li  title="flask"><i class="fa fa-flask"></i> </li>
        <li  title="folder"><i class="fa fa-folder"></i> </li>
        <li  title="folder-o"><i class="fa fa-folder-o"></i> </li>
        <li  title="folder-open"><i class="fa fa-folder-open"></i> </li>
        <li  title="folder-open-o"><i class="fa fa-folder-open-o"></i> </li>
        <li  title="frown-o"><i class="fa fa-frown-o"></i> </li>
        <li  title="gamepad"><i class="fa fa-gamepad"></i> </li>
        <li  title="gavel"><i class="fa fa-gavel"></i> </li>
        <li  title="gear"><i class="fa fa-gear"></i> </li>
        <li  title="gears"><i class="fa fa-gears"></i> </li>
        <li  title="gift"><i class="fa fa-gift"></i> </li>
        <li  title="glass"><i class="fa fa-glass"></i> </li>
        <li  title="globe"><i class="fa fa-globe"></i> </li>
        <li  title="group"><i class="fa fa-group"></i> </li>
        <li  title="hdd-o"><i class="fa fa-hdd-o"></i> </li>
        <li  title="headphones"><i class="fa fa-headphones"></i> </li>
        <li  title="heart"><i class="fa fa-heart"></i> </li>
        <li  title="heart-o"><i class="fa fa-heart-o"></i> </li>
        <li  title="home"><i class="fa fa-home"></i> </li>
        <li  title="inbox"><i class="fa fa-inbox"></i> </li>
        <li  title="info"><i class="fa fa-info"></i> </li>
        <li  title="info-circle"><i class="fa fa-info-circle"></i> </li>
        <li  title="key"><i class="fa fa-key"></i> </li>
        <li  title="keyboard-o"><i class="fa fa-keyboard-o"></i> </li>
        <li  title="laptop"><i class="fa fa-laptop"></i> </li>
        <li  title="leaf"><i class="fa fa-leaf"></i> </li>
        <li  title="legal"><i class="fa fa-legal"></i> </li>
        <li  title="lemon-o"><i class="fa fa-lemon-o"></i> </li>
        <li  title="level-down"><i class="fa fa-level-down"></i> </li>
        <li  title="level-up"><i class="fa fa-level-up"></i> </li>
        <li  title="lightbulb-o"><i class="fa fa-lightbulb-o"></i> </li>
        <li  title="location-arrow"><i class="fa fa-location-arrow"></i> </li>
        <li  title="lock"><i class="fa fa-lock"></i> </li>
        <li  title="magic"><i class="fa fa-magic"></i> </li>
        <li  title="magnet"><i class="fa fa-magnet"></i> </li>
        <li  title="mail-forward"><i class="fa fa-mail-forward"></i> </li>
        <li  title="mail-reply"><i class="fa fa-mail-reply"></i> </li>
        <li  title="mail-reply-all"><i class="fa fa-mail-reply-all"></i> </li>
        <li  title="male"><i class="fa fa-male"></i> </li>
        <li  title="map-marker"><i class="fa fa-map-marker"></i> </li>
        <li  title="meh-o"><i class="fa fa-meh-o"></i> </li>
        <li  title="microphone"><i class="fa fa-microphone"></i> </li>
        <li  title="microphone-slash"><i class="fa fa-microphone-slash"></i> </li>
        <li  title="minus"><i class="fa fa-minus"></i> </li>
        <li  title="minus-circle"><i class="fa fa-minus-circle"></i> </li>
        <li  title="minus-square"><i class="fa fa-minus-square"></i> </li>
        <li  title="minus-square-o"><i class="fa fa-minus-square-o"></i> </li>
        <li  title="mobile"><i class="fa fa-mobile"></i> </li>
        <li  title="mobile-phone"><i class="fa fa-mobile-phone"></i> </li>
        <li  title="money"><i class="fa fa-money"></i> </li>
        <li  title="moon-o"><i class="fa fa-moon-o"></i> </li>
        <li  title="music"><i class="fa fa-music"></i> </li>
        <li  title="pencil"><i class="fa fa-pencil"></i> </li>
        <li  title="pencil-square"><i class="fa fa-pencil-square"></i> </li>
        <li  title="pencil-square-o"><i class="fa fa-pencil-square-o"></i> </li>
        <li  title="phone"><i class="fa fa-phone"></i> </li>
        <li  title="phone-square"><i class="fa fa-phone-square"></i> </li>
        <li  title="picture-o"><i class="fa fa-picture-o"></i> </li>
        <li  title="plane"><i class="fa fa-plane"></i> </li>
        <li  title="plus"><i class="fa fa-plus"></i> </li>
        <li  title="plus-circle"><i class="fa fa-plus-circle"></i> </li>
        <li  title="plus-square"><i class="fa fa-plus-square"></i> </li>
        <li  title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>
        <li  title="power-off"><i class="fa fa-power-off"></i> </li>
        <li  title="print"><i class="fa fa-print"></i> </li>
        <li  title="puzzle-piece"><i class="fa fa-puzzle-piece"></i> </li>
        <li  title="qrcode"><i class="fa fa-qrcode"></i> </li>
        <li  title="question"><i class="fa fa-question"></i> </li>
        <li  title="question-circle"><i class="fa fa-question-circle"></i> </li>
        <li  title="quote-left"><i class="fa fa-quote-left"></i> </li>
        <li  title="quote-right"><i class="fa fa-quote-right"></i> </li>
        <li  title="random"><i class="fa fa-random"></i> </li>
        <li  title="refresh"><i class="fa fa-refresh"></i> </li>
        <li  title="reply"><i class="fa fa-reply"></i> </li>
        <li  title="reply-all"><i class="fa fa-reply-all"></i> </li>
        <li  title="retweet"><i class="fa fa-retweet"></i> </li>
        <li  title="road"><i class="fa fa-road"></i> </li>
        <li  title="rocket"><i class="fa fa-rocket"></i> </li>
        <li  title="rss"><i class="fa fa-rss"></i> </li>
        <li  title="rss-square"><i class="fa fa-rss-square"></i> </li>
        <li  title="search"><i class="fa fa-search"></i> </li>
        <li  title="search-minus"><i class="fa fa-search-minus"></i> </li>
        <li  title="search-plus"><i class="fa fa-search-plus"></i> </li>
        <li  title="share"><i class="fa fa-share"></i> </li>
        <li  title="share-square"><i class="fa fa-share-square"></i> </li>
        <li  title="share-square-o"><i class="fa fa-share-square-o"></i> </li>
        <li  title="shield"><i class="fa fa-shield"></i> </li>
        <li  title="shopping-cart"><i class="fa fa-shopping-cart"></i> </li>
        <li  title="sign-in"><i class="fa fa-sign-in"></i> </li>
        <li  title="sign-out"><i class="fa fa-sign-out"></i> </li>
        <li  title="signal"><i class="fa fa-signal"></i> </li>
        <li  title="sitemap"><i class="fa fa-sitemap"></i> </li>
        <li  title="smile-o"><i class="fa fa-smile-o"></i> </li>
        <li  title="sort"><i class="fa fa-sort"></i> </li>
        <li  title="sort-alpha-asc"><i class="fa fa-sort-alpha-asc"></i> </li>
        <li  title="sort-alpha-desc"><i class="fa fa-sort-alpha-desc"></i> </li>
        <li  title="sort-amount-asc"><i class="fa fa-sort-amount-asc"></i> </li>
        <li  title="sort-amount-desc"><i class="fa fa-sort-amount-desc"></i> </li>
        <li  title="sort-asc"><i class="fa fa-sort-asc"></i> </li>
        <li  title="sort-desc"><i class="fa fa-sort-desc"></i> </li>
        <li  title="sort-down"><i class="fa fa-sort-down"></i> </li>
        <li  title="sort-numeric-asc"><i class="fa fa-sort-numeric-asc"></i> </li>
        <li  title="sort-numeric-desc"><i class="fa fa-sort-numeric-desc"></i> </li>
        <li  title="sort-up"><i class="fa fa-sort-up"></i> </li>
        <li  title="spinner"><i class="fa fa-spinner"></i> </li>
        <li  title="square"><i class="fa fa-square"></i> </li>
        <li  title="square-o"><i class="fa fa-square-o"></i> </li>
        <li  title="star"><i class="fa fa-star"></i> </li>
        <li  title="star-half"><i class="fa fa-star-half"></i> </li>
        <li  title="star-half-empty"><i class="fa fa-star-half-empty"></i> </li>
        <li  title="star-half-full"><i class="fa fa-star-half-full"></i> </li>
        <li  title="star-half-o"><i class="fa fa-star-half-o"></i> </li>
        <li  title="star-o"><i class="fa fa-star-o"></i> </li>
        <li  title="subscript"><i class="fa fa-subscript"></i> </li>
        <li  title="suitcase"><i class="fa fa-suitcase"></i> </li>
        <li  title="sun-o"><i class="fa fa-sun-o"></i> </li>
        <li  title="superscript"><i class="fa fa-superscript"></i> </li>
        <li  title="tablet"><i class="fa fa-tablet"></i> </li>
        <li  title="tachometer"><i class="fa fa-tachometer"></i> </li>
        <li  title="tag"><i class="fa fa-tag"></i> </li>
        <li  title="tags"><i class="fa fa-tags"></i> </li>
        <li  title="tasks"><i class="fa fa-tasks"></i> </li>
        <li  title="terminal"><i class="fa fa-terminal"></i> </li>
        <li  title="thumb-tack"><i class="fa fa-thumb-tack"></i> </li>
        <li  title="thumbs-down"><i class="fa fa-thumbs-down"></i> </li>
        <li  title="thumbs-o-down"><i class="fa fa-thumbs-o-down"></i> </li>
        <li  title="thumbs-o-up"><i class="fa fa-thumbs-o-up"></i> </li>
        <li  title="thumbs-up"><i class="fa fa-thumbs-up"></i> </li>
        <li  title="ticket"><i class="fa fa-ticket"></i> </li>
        <li  title="times"><i class="fa fa-times"></i> </li>
        <li  title="times-circle"><i class="fa fa-times-circle"></i> </li>
        <li  title="times-circle-o"><i class="fa fa-times-circle-o"></i> </li>
        <li  title="tint"><i class="fa fa-tint"></i> </li>
        <li  title="toggle-down"><i class="fa fa-toggle-down"></i> </li>
        <li  title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
        <li  title="toggle-right"><i class="fa fa-toggle-right"></i> </li>
        <li  title="toggle-up"><i class="fa fa-toggle-up"></i> </li>
        <li  title="trash-o"><i class="fa fa-trash-o"></i> </li>
        <li  title="trophy"><i class="fa fa-trophy"></i> </li>
        <li  title="truck"><i class="fa fa-truck"></i> </li>
        <li  title="umbrella"><i class="fa fa-umbrella"></i> </li>
        <li  title="unlock"><i class="fa fa-unlock"></i> </li>
        <li  title="unlock-alt"><i class="fa fa-unlock-alt"></i> </li>
        <li  title="unsorted"><i class="fa fa-unsorted"></i> </li>
        <li  title="upload"><i class="fa fa-upload"></i> </li>
        <li  title="user"><i class="fa fa-user"></i> </li>
        <li  title="users"><i class="fa fa-users"></i> </li>
        <li  title="video-camera"><i class="fa fa-video-camera"></i> </li>
        <li  title="volume-down"><i class="fa fa-volume-down"></i> </li>
        <li  title="volume-off"><i class="fa fa-volume-off"></i> </li>
        <li  title="volume-up"><i class="fa fa-volume-up"></i> </li>
        <li  title="warning"><i class="fa fa-warning"></i> </li>
        <li  title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
        <li  title="wrench"><i class="fa fa-wrench"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>Form Control Icons</h5>
        <ul class="list-inline">
        <li  title="check-square"><i class="fa fa-check-square"></i> </li>
        <li  title="check-square-o"><i class="fa fa-check-square-o"></i> </li>
        <li  title="circle"><i class="fa fa-circle"></i> </li>
        <li  title="circle-o"><i class="fa fa-circle-o"></i> </li>
        <li  title="dot-circle-o"><i class="fa fa-dot-circle-o"></i> </li>
        <li  title="minus-square"><i class="fa fa-minus-square"></i> </li>
        <li  title="minus-square-o"><i class="fa fa-minus-square-o"></i> </li>
        <li  title="plus-square"><i class="fa fa-plus-square"></i> </li>
        <li  title="plus-square-o"><i class="fa fa-plus-square-o"></i> </li>
        <li  title="square"><i class="fa fa-square"></i> </li>
        <li  title="square-o"><i class="fa fa-square-o"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>货币图标</h5>
        <ul class="list-inline">
        <li  title="bitcoin"><i class="fa fa-bitcoin"></i> </li>
        <li  title="btc"><i class="fa fa-btc"></i> </li>
        <li  title="cny"><i class="fa fa-cny"></i> </li>
        <li  title="dollar"><i class="fa fa-dollar"></i> </li>
        <li  title="eur"><i class="fa fa-eur"></i> </li>
        <li  title="euro"><i class="fa fa-euro"></i> </li>
        <li  title="gbp"><i class="fa fa-gbp"></i> </li>
        <li  title="inr"><i class="fa fa-inr"></i> </li>
        <li  title="jpy"><i class="fa fa-jpy"></i> </li>
        <li  title="krw"><i class="fa fa-krw"></i> </li>
        <li  title="money"><i class="fa fa-money"></i> </li>
        <li  title="rmb"><i class="fa fa-rmb"></i> </li>
        <li  title="rouble"><i class="fa fa-rouble"></i> </li>
        <li  title="rub"><i class="fa fa-rub"></i> </li>
        <li  title="ruble"><i class="fa fa-ruble"></i> </li>
        <li  title="rupee"><i class="fa fa-rupee"></i> </li>
        <li  title="try"><i class="fa fa-try"></i> </li>
        <li  title="turkish-lira"><i class="fa fa-turkish-lira"></i> </li>
        <li  title="usd"><i class="fa fa-usd"></i> </li>
        <li  title="won"><i class="fa fa-won"></i> </li>
        <li  title="yen"><i class="fa fa-yen"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>文本编辑器图标</h5>
        <ul class="list-inline">
        <li  title="align-center"><i class="fa fa-align-center"></i> </li>
        <li  title="align-justify"><i class="fa fa-align-justify"></i> </li>
        <li  title="align-left"><i class="fa fa-align-left"></i> </li>
        <li  title="align-right"><i class="fa fa-align-right"></i> </li>
        <li  title="bold"><i class="fa fa-bold"></i> </li>
        <li  title="chain"><i class="fa fa-chain"></i> </li>
        <li  title="chain-broken"><i class="fa fa-chain-broken"></i> </li>
        <li  title="clipboard"><i class="fa fa-clipboard"></i> </li>
        <li  title="columns"><i class="fa fa-columns"></i> </li>
        <li  title="copy"><i class="fa fa-copy"></i> </li>
        <li  title="cut"><i class="fa fa-cut"></i> </li>
        <li  title="dedent"><i class="fa fa-dedent"></i> </li>
        <li  title="eraser"><i class="fa fa-eraser"></i> </li>
        <li  title="file"><i class="fa fa-file"></i> </li>
        <li  title="file-o"><i class="fa fa-file-o"></i> </li>
        <li  title="file-text"><i class="fa fa-file-text"></i> </li>
        <li  title="file-text-o"><i class="fa fa-file-text-o"></i> </li>
        <li  title="files-o"><i class="fa fa-files-o"></i> </li>
        <li  title="floppy-o"><i class="fa fa-floppy-o"></i> </li>
        <li  title="font"><i class="fa fa-font"></i> </li>
        <li  title="indent"><i class="fa fa-indent"></i> </li>
        <li  title="italic"><i class="fa fa-italic"></i> </li>
        <li  title="link"><i class="fa fa-link"></i> </li>
        <li  title="list"><i class="fa fa-list"></i> </li>
        <li  title="list-alt"><i class="fa fa-list-alt"></i> </li>
        <li  title="list-ol"><i class="fa fa-list-ol"></i> </li>
        <li  title="list-ul"><i class="fa fa-list-ul"></i> </li>
        <li  title="outdent"><i class="fa fa-outdent"></i> </li>
        <li  title="paperclip"><i class="fa fa-paperclip"></i> </li>
        <li  title="paste"><i class="fa fa-paste"></i> </li>
        <li  title="repeat"><i class="fa fa-repeat"></i> </li>
        <li  title="rotate-left"><i class="fa fa-rotate-left"></i> </li>
        <li  title="rotate-right"><i class="fa fa-rotate-right"></i> </li>
        <li  title="save"><i class="fa fa-save"></i> </li>
        <li  title="scissors"><i class="fa fa-scissors"></i> </li>
        <li  title="strikethrough"><i class="fa fa-strikethrough"></i> </li>
        <li  title="table"><i class="fa fa-table"></i> </li>
        <li  title="text-height"><i class="fa fa-text-height"></i> </li>
        <li  title="text-width"><i class="fa fa-text-width"></i> </li>
        <li  title="th"><i class="fa fa-th"></i> </li>
        <li  title="th-large"><i class="fa fa-th-large"></i> </li>
        <li  title="th-list"><i class="fa fa-th-list"></i> </li>
        <li  title="underline"><i class="fa fa-underline"></i> </li>
        <li  title="undo"><i class="fa fa-undo"></i> </li>
        <li  title="unlink"><i class="fa fa-unlink"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>方向图标</h5>
        <ul class="list-inline">
        <li  title="angle-double-down"><i class="fa fa-angle-double-down"></i> </li>
        <li  title="angle-double-left"><i class="fa fa-angle-double-left"></i> </li>
        <li  title="angle-double-right"><i class="fa fa-angle-double-right"></i> </li>
        <li  title="angle-double-up"><i class="fa fa-angle-double-up"></i> </li>
        <li  title="angle-down"><i class="fa fa-angle-down"></i> </li>
        <li  title="angle-left"><i class="fa fa-angle-left"></i> </li>
        <li  title="angle-right"><i class="fa fa-angle-right"></i> </li>
        <li  title="angle-up"><i class="fa fa-angle-up"></i> </li>
        <li  title="arrow-circle-down"><i class="fa fa-arrow-circle-down"></i> </li>
        <li  title="arrow-circle-left"><i class="fa fa-arrow-circle-left"></i> </li>
        <li  title="arrow-circle-o-down"><i class="fa fa-arrow-circle-o-down"></i> </li>
        <li  title="arrow-circle-o-left"><i class="fa fa-arrow-circle-o-left"></i> </li>
        <li  title="arrow-circle-o-right"><i class="fa fa-arrow-circle-o-right"></i> </li>
        <li  title="arrow-circle-o-up"><i class="fa fa-arrow-circle-o-up"></i> </li>
        <li  title="arrow-circle-right"><i class="fa fa-arrow-circle-right"></i> </li>
        <li  title="arrow-circle-up"><i class="fa fa-arrow-circle-up"></i> </li>
        <li  title="arrow-down"><i class="fa fa-arrow-down"></i> </li>
        <li  title="arrow-left"><i class="fa fa-arrow-left"></i> </li>
        <li  title="arrow-right"><i class="fa fa-arrow-right"></i> </li>
        <li  title="arrow-up"><i class="fa fa-arrow-up"></i> </li>
        <li  title="arrows"><i class="fa fa-arrows"></i> </li>
        <li  title="arrows-alt"><i class="fa fa-arrows-alt"></i> </li>
        <li  title="arrows-h"><i class="fa fa-arrows-h"></i> </li>
        <li  title="arrows-v"><i class="fa fa-arrows-v"></i> </li>
        <li  title="caret-down"><i class="fa fa-caret-down"></i> </li>
        <li  title="caret-left"><i class="fa fa-caret-left"></i> </li>
        <li  title="caret-right"><i class="fa fa-caret-right"></i> </li>
        <li  title="caret-square-o-down"><i class="fa fa-caret-square-o-down"></i> </li>
        <li  title="caret-square-o-left"><i class="fa fa-caret-square-o-left"></i> </li>
        <li  title="caret-square-o-right"><i class="fa fa-caret-square-o-right"></i> </li>
        <li  title="caret-square-o-up"><i class="fa fa-caret-square-o-up"></i> </li>
        <li  title="caret-up"><i class="fa fa-caret-up"></i> </li>
        <li  title="chevron-circle-down"><i class="fa fa-chevron-circle-down"></i> </li>
        <li  title="chevron-circle-left"><i class="fa fa-chevron-circle-left"></i> </li>
        <li  title="chevron-circle-right"><i class="fa fa-chevron-circle-right"></i> </li>
        <li  title="chevron-circle-up"><i class="fa fa-chevron-circle-up"></i> </li>
        <li  title="chevron-down"><i class="fa fa-chevron-down"></i> </li>
        <li  title="chevron-left"><i class="fa fa-chevron-left"></i> </li>
        <li  title="chevron-right"><i class="fa fa-chevron-right"></i> </li>
        <li  title="chevron-up"><i class="fa fa-chevron-up"></i> </li>
        <li  title="hand-o-down"><i class="fa fa-hand-o-down"></i> </li>
        <li  title="hand-o-left"><i class="fa fa-hand-o-left"></i> </li>
        <li  title="hand-o-right"><i class="fa fa-hand-o-right"></i> </li>
        <li  title="hand-o-up"><i class="fa fa-hand-o-up"></i> </li>
        <li  title="long-arrow-down"><i class="fa fa-long-arrow-down"></i> </li>
        <li  title="long-arrow-left"><i class="fa fa-long-arrow-left"></i> </li>
        <li  title="long-arrow-right"><i class="fa fa-long-arrow-right"></i> </li>
        <li  title="long-arrow-up"><i class="fa fa-long-arrow-up"></i> </li>
        <li  title="toggle-down"><i class="fa fa-toggle-down"></i> </li>
        <li  title="toggle-left"><i class="fa fa-toggle-left"></i> </li>
        <li  title="toggle-right"><i class="fa fa-toggle-right"></i> </li>
        <li  title="toggle-up"><i class="fa fa-toggle-up"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>视频播放器图标</h5>
        <ul class="list-inline">
        <li  title="arrows-alt"><i class="fa fa-arrows-alt"></i> </li>
        <li  title="backward"><i class="fa fa-backward"></i> </li>
        <li  title="compress"><i class="fa fa-compress"></i> </li>
        <li  title="eject"><i class="fa fa-eject"></i> </li>
        <li  title="expand"><i class="fa fa-expand"></i> </li>
        <li  title="fast-backward"><i class="fa fa-fast-backward"></i> </li>
        <li  title="fast-forward"><i class="fa fa-fast-forward"></i> </li>
        <li  title="forward"><i class="fa fa-forward"></i> </li>
        <li  title="pause"><i class="fa fa-pause"></i> </li>
        <li  title="play"><i class="fa fa-play"></i> </li>
        <li  title="play-circle"><i class="fa fa-play-circle"></i> </li>
        <li  title="play-circle-o"><i class="fa fa-play-circle-o"></i> </li>
        <li  title="step-backward"><i class="fa fa-step-backward"></i> </li>
        <li  title="step-forward"><i class="fa fa-step-forward"></i> </li>
        <li  title="stop"><i class="fa fa-stop"></i> </li>
        <li  title="youtube-play"><i class="fa fa-youtube-play"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>品牌图标</h5>
        <ul class="list-inline">
        <li  title="adn"><i class="fa fa-adn"></i> </li>
        <li  title="android"><i class="fa fa-android"></i> </li>
        <li  title="apple"><i class="fa fa-apple"></i> </li>
        <li  title="bitbucket"><i class="fa fa-bitbucket"></i> </li>
        <li  title="bitbucket-square"><i class="fa fa-bitbucket-square"></i> </li>
        <li  title="bitcoin"><i class="fa fa-bitcoin"></i> </li>
        <li  title="btc"><i class="fa fa-btc"></i> </li>
        <li  title="css3"><i class="fa fa-css3"></i> </li>
        <li  title="dribbble"><i class="fa fa-dribbble"></i> </li>
        <li  title="dropbox"><i class="fa fa-dropbox"></i> </li>
        <li  title="facebook"><i class="fa fa-facebook"></i> </li>
        <li  title="facebook-square"><i class="fa fa-facebook-square"></i> </li>
        <li  title="flickr"><i class="fa fa-flickr"></i> </li>
        <li  title="foursquare"><i class="fa fa-foursquare"></i> </li>
        <li  title="github"><i class="fa fa-github"></i> </li>
        <li  title="github-alt"><i class="fa fa-github-alt"></i> </li>
        <li  title="github-square"><i class="fa fa-github-square"></i> </li>
        <li  title="gittip"><i class="fa fa-gittip"></i> </li>
        <li  title="google-plus"><i class="fa fa-google-plus"></i> </li>
        <li  title="google-plus-square"><i class="fa fa-google-plus-square"></i> </li>
        <li  title="html5"><i class="fa fa-html5"></i> </li>
        <li  title="instagram"><i class="fa fa-instagram"></i> </li>
        <li  title="linkedin"><i class="fa fa-linkedin"></i> </li>
        <li  title="linkedin-square"><i class="fa fa-linkedin-square"></i> </li>
        <li  title="linux"><i class="fa fa-linux"></i> </li>
        <li  title="maxcdn"><i class="fa fa-maxcdn"></i> </li>
        <li  title="pagelines"><i class="fa fa-pagelines"></i> </li>
        <li  title="pinterest"><i class="fa fa-pinterest"></i> </li>
        <li  title="pinterest-square"><i class="fa fa-pinterest-square"></i> </li>
        <li  title="renren"><i class="fa fa-renren"></i> </li>
        <li  title="skype"><i class="fa fa-skype"></i> </li>
        <li  title="stack-exchange"><i class="fa fa-stack-exchange"></i> </li>
        <li  title="stack-overflow"><i class="fa fa-stack-overflow"></i> </li>
        <li  title="trello"><i class="fa fa-trello"></i> </li>
        <li  title="tumblr"><i class="fa fa-tumblr"></i> </li>
        <li  title="tumblr-square"><i class="fa fa-tumblr-square"></i> </li>
        <li  title="twitter"><i class="fa fa-twitter"></i> </li>
        <li  title="twitter-square"><i class="fa fa-twitter-square"></i> </li>
        <li  title="vimeo-square"><i class="fa fa-vimeo-square"></i> </li>
        <li  title="vk"><i class="fa fa-vk"></i> </li>
        <li  title="weibo"><i class="fa fa-weibo"></i> </li>
        <li  title="windows"><i class="fa fa-windows"></i> </li>
        <li  title="xing"><i class="fa fa-xing"></i> </li>
        <li  title="xing-square"><i class="fa fa-xing-square"></i> </li>
        <li  title="youtube"><i class="fa fa-youtube"></i> </li>
        <li  title="youtube-play"><i class="fa fa-youtube-play"></i> </li>
        <li  title="youtube-square"><i class="fa fa-youtube-square"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div>
        <h5>医疗图标</h5>
        <ul class="list-inline">
        <li  title="ambulance"><i class="fa fa-ambulance"></i> </li>
        <li  title="h-square"><i class="fa fa-h-square"></i> </li>
        <li  title="hospital-o"><i class="fa fa-hospital-o"></i> </li>
        <li  title="medkit"><i class="fa fa-medkit"></i> </li>
        <li  title="plus-square"><i class="fa fa-plus-square"></i> </li>
        <li  title="stethoscope"><i class="fa fa-stethoscope"></i> </li>
        <li  title="user-md"><i class="fa fa-user-md"></i> </li>
        <li  title="wheelchair"><i class="fa fa-wheelchair"></i> </li>
        </ul>
        <div class="clearfix"></div>
    </div>
</div>
</div>
    <script>
        $(function () {
//            document.onselectstart = new Function('event.returnValue=false;');
            var parentinputname = '{$Request.param.fodder}';
            $('.list-inline li').on('click', function () {
                var className = $(this).find('i').get(0).className;
                if (className) {
                    var font = className.replace('fa fa-','');
                    parent.$f.changeField(parentinputname,font);
                    parent.$f.closeModal(parentinputname);
                }
            });
            //清空选择
            $('#qingkong').on('click', function () {
                parent.$f.changeField(parentinputname,'');
                parent.$f.closeModal(parentinputname);

            });

            //搜索图标
            $("#search").on('input',function () {
                var keyword = $(this).val();
                if(keyword){
                    $(".list-inline li").hide();
                    $("li[title*='"+keyword+"']").show();

                }else{
                    $("li[title*='"+keyword+"']").show();
                }
//                console.log($("li[title*='"+keyword+"']"));
            });
        });
    </script>
</div>

</body>
</html>
