<style>
  #VIEW-icon-index .icon-body {
    text-align: center;
    padding-top: 35px;
    padding-bottom: 35px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  #VIEW-icon-index .icon-body:hover {
    background: #f9fbff;
    color: #5a8bff;
  }

  #VIEW-icon-index .icon-body:hover .copy {
    opacity: 1;
    transform: translateY(0px);
  }

  #VIEW-icon-index .icon-body .layui-icon {
    font-size: 30px;
  }

  #VIEW-icon-index .icon-body .copy {
    background: #fff;
    width: 100%;
    line-height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 20px #9db3e6;
    opacity: 0;
    user-select: none;
    transform: translateY(30px);
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
</style>
<div class="layui-fluid" id="VIEW-icon-index" lay-title="图标">
  <div class="layui-row layui-col-space10">
    <script type="text/html" template>
      {{# layui.each(icons,function(k,v){ }}
        <div class="layui-col-lg1">
            <div class="layui-card" title="{{k}}">
                <div class="layui-card-body icon-body">
                    <span class="layui-icon layui-icon-{{k}}"></span>
                    <p class="layui-elip">{{k}}</p>
                    <p class="nepadmin-font-12">&amp;#x{{v}};</p>
                    <span class="copy nepadmin-font-12 layui-bg-blue" data-clipboard-text="layui-icon-{{k}}">复制代码</span>
                </div>
            </div>
        </div>
        {{# }) }}
      </script>
  </div>
</div>
<script>
  layui.use(['clipboard'], function (clipboard) {

    var copy = new clipboard('.copy');
    copy.on('success', function (e) {
      layer.msg('代码已复制到剪贴板', { icon: 1 });
      e.clearSelection();
    });
    copy.on('error', function (e) {
      layer.msg('代码复制失败，请手动操作吧', { icon: 2 });
    });

  })
  icons = {
    'check-circle': "\e77d",
    'CI': "\e77e",
    'Dollar': "\e77f",
    'compass': "\e780",
    'close-circle': "\e781",
    'frown': "\e782",
    'info-circle': "\e783",
    'left-circle': "\e784",
    'down-circle': "\e785",
    'EURO': "\e786",
    'copyright': "\e787",
    'minus-circle': "\e788",
    'meh': "\e789",
    'plus-circle': "\e78a",
    'play-circle': "\e78b",
    'question-circle': "\e78c",
    'Pound': "\e78d",
    'right-circle': "\e78e",
    'smile': "\e78f",
    'trademark': "\e790",
    'time-circle': "\e791",
    'timeout': "\e792",
    'earth': "\e793",
    'YUAN': "\e794",
    'up-circle': "\e795",
    'warning-circle': "\e796",
    'sync': "\e797",
    'transaction': "\e798",
    'undo': "\e799",
    'redo': "\e79a",
    'reload': "\e79b",
    'reloadtime': "\e79c",
    'message': "\e79d",
    'dashboard': "\e79e",
    'issuesclose': "\e79f",
    'poweroff': "\e7a0",
    'logout': "\e7a1",
    'login': "\e7a2",
    'piechart': "\e7a3",
    'setting': "\e7a4",
    'eye': "\e7a5",
    'location': "\e7a6",
    'edit-square': "\e7a7",
    'export': "\e7a8",
    'save': "\e7a9",
    'Import': "\e7aa",
    'appstore': "\e7ab",
    'close-square': "\e7ac",
    'down-square': "\e7ad",
    'layout': "\e7ae",
    'left-square': "\e7af",
    'play-square': "\e7b0",
    'control': "\e7b1",
    'codelibrary': "\e7b2",
    'detail': "\e7b3",
    'minus-square': "\e7b4",
    'plus-square': "\e7b5",
    'right-square': "\e7b6",
    'project': "\e7b7",
    'wallet': "\e7b8",
    'up-square': "\e7b9",
    'calculator': "\e7ba",
    'interation': "\e7bb",
    'check-square': "\e7bc",
    'border': "\e7bd",
    'border-outer': "\e7be",
    'border-top': "\e7bf",
    'border-bottom': "\e7c0",
    'border-left': "\e7c1",
    'border-right': "\e7c2",
    'border-inner': "\e7c3",
    'border-verticle': "\e7c4",
    'border-horizontal': "\e7c5",
    'radius-bottomleft': "\e7c6",
    'radius-bottomright': "\e7c7",
    'radius-upleft': "\e7c8",
    'radius-upright': "\e7c9",
    'radius-setting': "\e7ca",
    'adduser': "\e7cb",
    'deleteteam': "\e7cc",
    'deleteuser': "\e7cd",
    'addteam': "\e7ce",
    'user': "\e7cf",
    'team': "\e7d0",
    'areachart': "\e7d1",
    'linechart': "\e7d2",
    'barchart': "\e7d3",
    'pointmap': "\e7d4",
    'container': "\e7d5",
    'database': "\e7d6",
    'sever': "\e7d7",
    'mobile': "\e7d8",
    'tablet': "\e7d9",
    'redenvelope': "\e7da",
    'book': "\e7db",
    'filedone': "\e7dc",
    'reconciliation': "\e7dd",
    'file-exception': "\e7de",
    'filesync': "\e7df",
    'filesearch': "\e7e0",
    'solution': "\e7e1",
    'fileprotect': "\e7e2",
    'file-add': "\e7e3",
    'file-excel': "\e7e4",
    'file-exclamation': "\e7e5",
    'file-pdf': "\e7e6",
    'file-image': "\e7e7",
    'file-markdown': "\e7e8",
    'file-unknown': "\e7e9",
    'file-ppt': "\e7ea",
    'file-word': "\e7eb",
    'file': "\e7ec",
    'file-zip': "\e7ed",
    'file-text': "\e7ee",
    'file-copy': "\e7ef",
    'snippets': "\e7f0",
    'audit': "\e7f1",
    'diff': "\e7f2",
    'Batchfolding': "\e7f3",
    'securityscan': "\e7f4",
    'propertysafety': "\e7f5",
    'safetycertificate': "\e7f6",
    'insurance': "\e7f7",
    'alert': "\e7f8",
    'delete': "\e7f9",
    'hourglass': "\e7fa",
    'bulb': "\e7fb",
    'experiment': "\e7fc",
    'bell': "\e7fd",
    'trophy': "\e7fe",
    'rest': "\e7ff",
    'USB': "\e800",
    'skin': "\e801",
    'home': "\e802",
    'bank': "\e803",
    'filter': "\e804",
    'funnelplot': "\e805",
    'like': "\e806",
    'unlike': "\e807",
    'unlock': "\e808",
    'lock': "\e809",
    'customerservice': "\e80a",
    'flag': "\e80b",
    'moneycollect': "\e80c",
    'medicinebox': "\e80d",
    'shop': "\e80e",
    'rocket': "\e80f",
    'shopping': "\e810",
    'folder': "\e811",
    'folder-open': "\e812",
    'folder-add': "\e813",
    'deploymentunit': "\e814",
    'accountbook': "\e815",
    'contacts': "\e816",
    'carryout': "\e817",
    'calendar-check': "\e818",
    'calendar': "\e819",
    'scan': "\e81a",
    'select': "\e81b",
    'boxplot': "\e81c",
    'build': "\e81d",
    'sliders': "\e81e",
    'laptop': "\e81f",
    'barcode': "\e820",
    'camera': "\e821",
    'cluster': "\e822",
    'gateway': "\e823",
    'car': "\e824",
    'printer': "\e825",
    'read': "\e826",
    'cloud-server': "\e827",
    'cloud-upload': "\e828",
    'cloud': "\e829",
    'cloud-download': "\e82a",
    'cloud-sync': "\e82b",
    'video': "\e82c",
    'notification': "\e82d",
    'sound': "\e82e",
    'radarchart': "\e82f",
    'qrcode': "\e830",
    'fund': "\e831",
    'image': "\e832",
    'mail': "\e833",
    'table': "\e834",
    'idcard': "\e835",
    'creditcard': "\e836",
    'heart': "\e837",
    'block': "\e838",
    'error': "\e839",
    'star': "\e83a",
    'gold': "\e83b",
    'heatmap': "\e83c",
    'wifi': "\e83d",
    'attachment': "\e83e",
    'edit': "\e83f",
    'key': "\e840",
    'api': "\e841",
    'disconnect': "\e842",
    'highlight': "\e843",
    'monitor': "\e844",
    'link': "\e845",
    'man': "\e846",
    'percentage': "\e847",
    'search': "\e848",
    'pushpin': "\e849",
    'phone': "\e84a",
    'shake': "\e84b",
    'tag': "\e84c",
    'wrench': "\e84d",
    'woman': "\e84e",
    'tags': "\e84f",
    'scissor': "\e850",
    'mr': "\e851",
    'share': "\e852",
    'branches': "\e853",
    'fork': "\e854",
    'shrink': "\e855",
    'arrawsalt': "\e856",
    'verticalright': "\e857",
    'verticalleft': "\e858",
    'right': "\e859",
    'left': "\e85a",
    'up': "\e85b",
    'down': "\e85c",
    'fullscreen': "\e85d",
    'fullscreen-exit': "\e85e",
    'doubleleft': "\e85f",
    'doubleright': "\e860",
    'arrowright': "\e861",
    'arrowup': "\e862",
    'arrowleft': "\e863",
    'arrowdown': "\e864",
    'upload': "\e865",
    'colum-height': "\e866",
    'vertical-align-botto': "\e867",
    'vertical-align-middl': "\e868",
    'totop': "\e869",
    'vertical-align-top': "\e86a",
    'download': "\e86b",
    'sort-descending': "\e86c",
    'sort-ascending': "\e86d",
    'fall': "\e86e",
    'swap': "\e86f",
    'stock': "\e870",
    'rise': "\e871",
    'indent': "\e872",
    'outdent': "\e873",
    'menu': "\e874",
    'unorderedlist': "\e875",
    'orderedlist': "\e876",
    'align-right': "\e877",
    'align-center': "\e878",
    'align-left': "\e879",
    'pic-center': "\e87a",
    'pic-right': "\e87b",
    'pic-left': "\e87c",
    'bold': "\e87d",
    'font-colors': "\e87e",
    'exclaimination': "\e87f",
    'font-size': "\e880",
    'infomation': "\e881",
    'line-height': "\e882",
    'strikethrough': "\e883",
    'underline': "\e884",
    'number': "\e885",
    'italic': "\e886",
    'code': "\e887",
    'column-width': "\e888",
    'check': "\e889",
    'ellipsis': "\e88a",
    'dash': "\e88b",
    'close': "\e88c",
    'enter': "\e88d",
    'line': "\e88e",
    'minus': "\e88f",
    'question': "\e890",
    'plus': "\e891",
    'rollback': "\e892",
    'small-dash': "\e893",
    'pause': "\e894",
    'bg-colors': "\e895",
    'crown': "\e896",
    'drag': "\e897",
    'desktop': "\e898",
    'gift': "\e899",
    'stop': "\e89a",
    'fire': "\e89b",
    'thunderbolt': "\e89c",
    'check-circle-fill': "\e89d",
    'left-circle-fill': "\e89e",
    'down-circle-fill': "\e89f",
    'minus-circle-fill': "\e8a0",
    'close-circle-fill': "\e8a1",
    'info-circle-fill': "\e8a2",
    'up-circle-fill': "\e8a3",
    'right-circle-fill': "\e8a4",
    'plus-circle-fill': "\e8a5",
    'question-circle-fill': "\e8a6",
    'EURO-circle-fill': "\e8a7",
    'frown-fill': "\e8a8",
    'copyright-circle-fil': "\e8a9",
    'CI-circle-fill': "\e8aa",
    'compass-fill': "\e8ab",
    'Dollar-circle-fill': "\e8ac",
    'poweroff-circle-fill': "\e8ad",
    'meh-fill': "\e8ae",
    'play-circle-fill': "\e8af",
    'Pound-circle-fill': "\e8b0",
    'smile-fill': "\e8b1",
    'stop-fill': "\e8b2",
    'warning-circle-fill': "\e8b3",
    'time-circle-fill': "\e8b4",
    'trademark-circle-fil': "\e8b5",
    'YUAN-circle-fill': "\e8b6",
    'heart-fill': "\e8b7",
    'piechart-circle-fil': "\e8b8",
    'dashboard-fill': "\e8b9",
    'message-fill': "\e8ba",
    'check-square-fill': "\e8bb",
    'down-square-fill': "\e8bc",
    'minus-square-fill': "\e8bd",
    'close-square-fill': "\e8be",
    'codelibrary-fill': "\e8bf",
    'left-square-fill': "\e8c0",
    'play-square-fill': "\e8c1",
    'up-square-fill': "\e8c2",
    'right-square-fill': "\e8c3",
    'plus-square-fill': "\e8c4",
    'accountbook-fill': "\e8c5",
    'carryout-fill': "\e8c6",
    'calendar-fill': "\e8c7",
    'calculator-fill': "\e8c8",
    'interation-fill': "\e8c9",
    'project-fill': "\e8ca",
    'detail-fill': "\e8cb",
    'save-fill': "\e8cc",
    'wallet-fill': "\e8cd",
    'control-fill': "\e8ce",
    'layout-fill': "\e8cf",
    'appstore-fill': "\e8d0",
    'mobile-fill': "\e8d1",
    'tablet-fill': "\e8d2",
    'book-fill': "\e8d3",
    'redenvelope-fill': "\e8d4",
    'safetycertificate-f': "\e8d5",
    'propertysafety-fill': "\e8d6",
    'insurance-fill': "\e8d7",
    'securityscan-fill': "\e8d8",
    'file-exclamation-fil': "\e8d9",
    'file-add-fill': "\e8da",
    'file-fill': "\e8db",
    'file-excel-fill': "\e8dc",
    'file-markdown-fill': "\e8dd",
    'file-text-fill': "\e8de",
    'file-ppt-fill': "\e8df",
    'file-unknown-fill': "\e8e0",
    'file-word-fill': "\e8e1",
    'file-zip-fill': "\e8e2",
    'file-pdf-fill': "\e8e3",
    'file-image-fill': "\e8e4",
    'diff-fill': "\e8e5",
    'file-copy-fill': "\e8e6",
    'snippets-fill': "\e8e7",
    'batchfolding-fill': "\e8e8",
    'reconciliation-fill': "\e8e9",
    'folder-add-fill': "\e8ea",
    'folder-fill': "\e8eb",
    'folder-open-fill': "\e8ec",
    'database-fill': "\e8ed",
    'container-fill': "\e8ee",
    'sever-fill': "\e8ef",
    'calendar-check-fill': "\e8f0",
    'image-fill': "\e8f1",
    'idcard-fill': "\e8f2",
    'creditcard-fill': "\e8f3",
    'fund-fill': "\e8f4",
    'read-fill': "\e8f5",
    'contacts-fill': "\e8f6",
    'delete-fill': "\e8f7",
    'notification-fill': "\e8f8",
    'flag-fill': "\e8f9",
    'moneycollect-fill': "\e8fa",
    'medicinebox-fill': "\e8fb",
    'rest-fill': "\e8fc",
    'shopping-fill': "\e8fd",
    'skin-fill': "\e8fe",
    'video-fill': "\e8ff",
    'sound-fill': "\e900",
    'bulb-fill': "\e901",
    'bell-fill': "\e902",
    'filter-fill': "\e903",
    'fire-fill': "\e904",
    'funnelplot-fill': "\e905",
    'gift-fill': "\e906",
    'hourglass-fill': "\e907",
    'home-fill': "\e908",
    'trophy-fill': "\e909",
    'location-fill': "\e90a",
    'cloud-fill': "\e90b",
    'customerservice-fill': "\e90c",
    'experiment-fill': "\e90d",
    'eye-fill': "\e90e",
    'like-fill': "\e90f",
    'lock-fill': "\e910",
    'unlike-fill': "\e911",
    'star-fill': "\e912",
    'unlock-fill': "\e913",
    'alert-fill': "\e914",
    'api-fill': "\e915",
    'highlight-fill': "\e916",
    'phone-fill': "\e917",
    'edit-fill': "\e918",
    'pushpin-fill': "\e919",
    'rocket-fill': "\e91a",
    'thunderbolt-fill': "\e91b",
    'tag-fill': "\e91c",
    'wrench-fill': "\e91d",
    'tags-fill': "\e91e",
    'bank-fill': "\e91f",
    'camera-fill': "\e920",
    'error-fill': "\e921",
    'crown-fill': "\e922",
    'mail-fill': "\e923",
    'car-fill': "\e924",
    'printer-fill': "\e925",
    'shop-fill': "\e926",
    'setting-fill': "\e927",
    'USB-fill': "\e928",
    'golden-fill': "\e929",
    'build-fill': "\e92a",
    'boxplot-fill': "\e92b",
    'sliders-fill': "\e92c",
    'alibaba': "\e92d",
    'alibabacloud': "\e92e",
    'antdesign': "\e92f",
    'ant-cloud': "\e930",
    'behance': "\e931",
    'googleplus': "\e932",
    'medium': "\e933",
    'google': "\e934",
    'IE': "\e935",
    'amazon': "\e936",
    'slack': "\e937",
    'alipay': "\e938",
    'taobao': "\e939",
    'zhihu': "\e93a",
    'HTML': "\e93b",
    'linkedin': "\e93c",
    'yahoo': "\e93d",
    'facebook': "\e93e",
    'skype': "\e93f",
    'CodeSandbox': "\e940",
    'chrome': "\e941",
    'codepen': "\e942",
    'aliwangwang': "\e943",
    'apple': "\e944",
    'android': "\e945",
    'sketch': "\e946",
    'Gitlab': "\e947",
    'dribbble': "\e948",
    'instagram': "\e949",
    'reddit': "\e94a",
    'windows': "\e94b",
    'yuque': "\e94c",
    'Youtube': "\e94d",
    'Gitlab-fill': "\e94e",
    'dropbox': "\e94f",
    'dingtalk': "\e950",
    'android-fill': "\e951",
    'apple-fill': "\e952",
    'HTML-fill': "\e953",
    'windows-fill': "\e954",
    'QQ': "\e955",
    'twitter': "\e956",
    'skype-fill': "\e957",
    'weibo': "\e958",
    'yuque-fill': "\e959",
    'Youtube-fill': "\e95a",
    'yahoo-fill': "\e95b",
    'wechat-fill': "\e95c",
    'chrome-fill': "\e95d",
    'alipay-circle-fill': "\e95e",
    'aliwangwang-fill': "\e95f",
    'behance-circle-fill': "\e960",
    'amazon-circle-fill': "\e961",
    'codepen-circle-fill': "\e962",
    'CodeSandbox-circle-f': "\e963",
    'dropbox-circle-fill': "\e964",
    'github-fill': "\e965",
    'dribbble-circle-fill': "\e966",
    'googleplus-circle-f': "\e967",
    'medium-circle-fill': "\e968",
    'QQ-circle-fill': "\e969",
    'IE-circle-fill': "\e96a",
    'google-circle-fill': "\e96b",
    'dingtalk-circle-fill': "\e96c",
    'sketch-circle-fill': "\e96d",
    'slack-circle-fill': "\e96e",
    'twitter-circle-fill': "\e96f",
    'taobao-circle-fill': "\e970",
    'weibo-circle-fill': "\e971",
    'zhihu-circle-fill': "\e972",
    'reddit-circle-fill': "\e973",
    'alipay-square-fill': "\e974",
    'dingtalk-square-fill': "\e975",
    'CodeSandbox-square-f': "\e976",
    'behance-square-fill': "\e977",
    'amazon-square-fill': "\e978",
    'codepen-square-fill': "\e979",
    'dribbble-square-fill': "\e97a",
    'dropbox-square-fill': "\e97b",
    'facebook-fill': "\e97c",
    'googleplus-square-f': "\e97d",
    'google-square-fill': "\e97e",
    'instagram-fill': "\e97f",
    'IE-square-fill': "\e980",
    'medium-square-fill': "\e981",
    'linkedin-fill': "\e982",
    'QQ-square-fill': "\e983",
    'reddit-square-fill': "\e984",
    'twitter-square-fill': "\e985",
    'sketch-square-fill': "\e986",
    'slack-square-fill': "\e987",
    'taobao-square-fill': "\e988",
    'weibo-square-fill': "\e989",
    'zhihu-square-fill': "\e98a",
    'zoomout': "\e98b",
    'apartment': "\e98c",
    'audio': "\e98d",
    'audio-fill': "\e98e",
    'robot': "\e98f",
    'zoomin': "\e990"
  }

</script>