aid-elements-cmcc

Version:

AI Design Elements

1 lines • 16.4 kB

HTML

<html><head><meta charset="utf-8"><title>AI Design Icons</title><link href="css/aidesignicons-regular.css" rel="stylesheet"><style>body{font-family:"Helvetica Neue",Arial,sans-serif;text-align:center;background:#f7f7f7}.glyph{padding:0;height:100%}.glyph>li{display:inline-block;margin:.4em .3em;width:8em;background:#fff;border-radius:.5em;position:relative}.glyph>li .aid{display:block;margin-top:.1em}.glyph>li>i:hover{color:#669cff;cursor:pointer}.glyph>li>i>span{position:absolute;top:0;left:0;text-align:center;width:100%;color:transparent;line-height:1em}.glyph-name{font-size:.8em;color:#666;display:block;height:2.5em;margin-top:4px}.glyph-codepoint{color:#999;font-family:monospace;display:block;margin-top:4px}.glyph>li>span:hover{color:#669cff;cursor:pointer}.version{font-size:.2em}h1{margin:20px 0}.form-control{display:block;width:100%;width:400px;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#999;background-color:#fff;background-image:none;border:0 solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control-feedback{position:absolute;top:6px;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none;font-size:24px;color:#999}.has-feedback{position:relative}.form-group{display:inline-block;margin-bottom:0;vertical-align:middle;margin-top:20px}div.copied{position:fixed;top:30px;left:50%;width:200px;text-align:center;display:none;padding:10px 15px;border-radius:4px;margin-left:-100px;color:#fff;box-shadow:0 0 10px #3ddb92;background:-webkit-linear-gradient(left top,#5adbd3,#3ddb92);background:-o-linear-gradient(bottom right,#5adbd3,#3ddb92);background:-moz-linear-gradient(bottom right,#5adbd3,#3ddb92);background:linear-gradient(to bottom right,#5adbd3,#3ddb92);background:-ms-linear-gradient(to bottom right,#5adbd3,#3ddb92)}footer{margin-top:30px;padding:20px;border-top:1px solid #ddd;text-align:center;color:#fff;font-size:13px;background:-webkit-linear-gradient(left top,#669cff,#9a84ff);background:-o-linear-gradient(bottom right,#669cff,#9a84ff);background:-moz-linear-gradient(bottom right,#669cff,#9a84ff);background:linear-gradient(to bottom right,#669cff,#9a84ff)}</style></head><body><h1>AI Design Icons 1.1.5</h1><div class="form-group has-feedback"><input class="form-control" id="search-input" placeholder="Search by name" type="input"> </div><ul class="glyph"><li data-name="account-card-details" data-tag="account-card-details"> account-card-details F106</li><li data-name="alert-circle" data-tag="alert-circle"> alert-circle F12D</li><li data-name="book-open-page-variant" data-tag="book-open-page-variant"> book-open-page-variant F1E6</li><li data-name="briefcase" data-tag="briefcase"> briefcase F20D</li><li data-name="check-circle-outline" data-tag="check-circle-outline"> check-circle-outline F279</li><li data-name="check-circle" data-tag="check-circle"> check-circle F27A</li><li data-name="check" data-tag="check"> check F27B</li><li data-name="checkbox-blank-circle-outline" data-tag="checkbox-blank-circle-outline"> checkbox-blank-circle-outline F27C</li><li data-name="checkbox-blank-outline" data-tag="checkbox-blank-outline"> checkbox-blank-outline F27E</li><li data-name="checkbox-marked" data-tag="checkbox-marked"> checkbox-marked F283</li><li data-name="chevron-down" data-tag="chevron-down"> chevron-down F292</li><li data-name="chevron-left" data-tag="chevron-left"> chevron-left F293</li><li data-name="chevron-right" data-tag="chevron-right"> chevron-right F294</li><li data-name="city" data-tag="city"> city F29B</li><li data-name="clipboard-check" data-tag="clipboard-check"> clipboard-check F2A1</li><li data-name="clock" data-tag="clock"> clock F2AE</li><li data-name="close-circle-outline" data-tag="close-circle-outline"> close-circle-outline F2AF</li><li data-name="close-circle" data-tag="close-circle"> close-circle F2B0</li><li data-name="close" data-tag="close"> close F2B5</li><li data-name="database" data-tag="database"> database F323</li><li data-name="file-image-box" data-tag="file-image-box"> file-image-box F3B2</li><li data-name="file-tree" data-tag="file-tree"> file-tree F3C2</li><li data-name="filter-outline" data-tag="filter-outline"> filter-outline F3CC</li><li data-name="gender-female" data-tag="gender-female"> gender-female F460</li><li data-name="help-circle" data-tag="help-circle"> help-circle F4AF</li><li data-name="home" data-tag="home"> home F4BB</li><li data-name="leaf" data-tag="leaf"> leaf F521</li><li data-name="library-plus" data-tag="library-plus"> library-plus F52A</li><li data-name="loading" data-tag="loading"> loading F538</li><li data-name="magnify" data-tag="magnify"> magnify F54E</li><li data-name="minus" data-tag="minus"> minus F58A</li><li data-name="plus" data-tag="plus"> plus F666</li><li data-name="rotate-90" data-tag="rotate-90"> rotate-90 F6C7</li><li data-name="school" data-tag="school"> school F6DD</li><li data-name="star" data-tag="star"> star F771</li><li data-name="volume" data-tag="volume"> volume F84E</li><li data-name="currency-rmb" data-tag="currency-rmb"> currency-rmb F8AD</li><li data-name="avatar" data-tag="avatar"> avatar F8AF</li><li data-name="check_radio_on" data-tag="check_radio_on"> check_radio_on F8B0</li><li data-name="checkbox-checked" data-tag="checkbox-checked"> checkbox-checked F8B1</li><li data-name="checkbox-half-checked" data-tag="checkbox-half-checked"> checkbox-half-checked F8B2</li><li data-name="checkbox-default" data-tag="checkbox-default"> checkbox-default F8B3</li></ul><div class="copied">Copied to Clipboard<textarea cols="30" id="copy-form" name="" rows="0" style="opacity:0;height:0"></textarea></div></body><script>function copyText(e){var t=document.querySelector(".copied");t.setAttribute("style","display:block");var r=document.querySelector("#copy-form");r.value=e,r.select(),document.execCommand("copy"),setTimeout(function(){r.value="",t.setAttribute("style","display:none")},1500)}var searchInput=document.querySelector("#search-input"),arrI=document.querySelectorAll(".glyph>li");searchInput.onkeyup=function(){var e=this.value;if(""!==e)for(var t=0,r=arrI.length;t<r;t++){-1!=arrI[t].getAttribute("data-name").search(e)?arrI[t].setAttribute("style","display:inline-block"):arrI[t].setAttribute("style","display:none")}else for(var t=0,r=arrI.length;t<r;t++)arrI[t].setAttribute("style","display:inline-block")};for(var i=0,j=arrI.length;i<j;i++){var icon=arrI[i].querySelector("i"),iconCode=arrI[i].querySelector(".glyph-codepoint"),iconName=arrI[i].querySelector(".glyph-name");icon.onmouseup=function(){copyText(this.querySelector("span").innerHTML)},iconCode.onmouseup=function(){copyText(this.innerHTML)},iconName.onmouseup=function(){copyText("aid-"+this.innerHTML)}}</script></html>