/
var
/
www
/
barefootlaw.org
/
wp-content
/
themes
/
archub
/
assets
/
vendors
/
liquid-icon
/
lqd-essentials
/
Upload File
HOME
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="demo/css/reset.css"> <!-- CSS reset --> <link rel="stylesheet" href="demo/css/style.css"> <link rel="stylesheet" href="./lqd-essentials.min.css"> <link rel="shortcut icon" href="demo/favicon.ico"> <title>lqd-essentials Web Font</title> </head> <body> <header> <h1>lqd-essentials Web Font</h1> <p>Built with <a href="https://nucleoapp.com">nucleoapp.com</a></p> </header> <div id="icons-wrapper"> <section> <ul> <li> <i class="lqd-icn-ess icon-speech-bubble"></i> <p>icon-speech-bubble</p> </li> <li> <i class="lqd-icn-ess icon-ld-search"></i> <p>icon-ld-search</p> </li> <li> <i class="lqd-icn-ess icon-num-10"></i> <p>icon-num-10</p> </li> <li> <i class="lqd-icn-ess icon-num-9"></i> <p>icon-num-9</p> </li> <li> <i class="lqd-icn-ess icon-num-8"></i> <p>icon-num-8</p> </li> <li> <i class="lqd-icn-ess icon-num-7"></i> <p>icon-num-7</p> </li> <li> <i class="lqd-icn-ess icon-num-6"></i> <p>icon-num-6</p> </li> <li> <i class="lqd-icn-ess icon-num-5"></i> <p>icon-num-5</p> </li> <li> <i class="lqd-icn-ess icon-num-4"></i> <p>icon-num-4</p> </li> <li> <i class="lqd-icn-ess icon-num-3"></i> <p>icon-num-3</p> </li> <li> <i class="lqd-icn-ess icon-num-2"></i> <p>icon-num-2</p> </li> <li> <i class="lqd-icn-ess icon-num-1"></i> <p>icon-num-1</p> </li> <li> <i class="lqd-icn-ess icon-lqd-check"></i> <p>icon-lqd-check</p> </li> <li> <i class="lqd-icn-ess icon-lqd-compass"></i> <p>icon-lqd-compass</p> </li> <li> <i class="lqd-icn-ess icon-lqd-atom"></i> <p>icon-lqd-atom</p> </li> <li> <i class="lqd-icn-ess icon-lqd-laptop"></i> <p>icon-lqd-laptop</p> </li> <li> <i class="lqd-icn-ess icon-lqd-stack"></i> <p>icon-lqd-stack</p> </li> <li> <i class="lqd-icn-ess icon-lqd-pen-2"></i> <p>icon-lqd-pen-2</p> </li> <li> <i class="lqd-icn-ess icon-lqd-user"></i> <p>icon-lqd-user</p> </li> <li> <i class="lqd-icn-ess icon-lqd-envelope"></i> <p>icon-lqd-envelope</p> </li> <li> <i class="lqd-icn-ess icon-lqd-pen"></i> <p>icon-lqd-pen</p> </li> <li> <i class="lqd-icn-ess icon-lqd-dollar"></i> <p>icon-lqd-dollar</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-play"></i> <p>icon-ion-ios-play</p> </li> <li> <i class="lqd-icn-ess icon-ld-cart"></i> <p>icon-ld-cart</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-add"></i> <p>icon-ion-ios-add</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-checkmark"></i> <p>icon-ion-ios-checkmark</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-remove"></i> <p>icon-ion-ios-remove</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-close"></i> <p>icon-ion-ios-close</p> </li> <li> <i class="lqd-icn-ess icon-ion-caret-up"></i> <p>icon-ion-caret-up</p> </li> <li> <i class="lqd-icn-ess icon-ion-caret-back"></i> <p>icon-ion-caret-back</p> </li> <li> <i class="lqd-icn-ess icon-ion-caret-forward"></i> <p>icon-ion-caret-forward</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-back"></i> <p>icon-ion-ios-arrow-back</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-up"></i> <p>icon-ion-ios-arrow-up</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-forward"></i> <p>icon-ion-ios-arrow-forward</p> </li> <li> <i class="lqd-icn-ess icon-ion-caret-down"></i> <p>icon-ion-caret-down</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-down"></i> <p>icon-ion-ios-arrow-down</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-down"></i> <p>icon-md-arrow-down</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-forward"></i> <p>icon-md-arrow-forward</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-up"></i> <p>icon-md-arrow-up</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-back"></i> <p>icon-md-arrow-back</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-round-back"></i> <p>icon-ion-ios-arrow-round-back</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-round-down"></i> <p>icon-ion-ios-arrow-round-down</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-up"></i> <p>icon-md-arrow-round-up</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-down"></i> <p>icon-md-arrow-round-down</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-back"></i> <p>icon-md-arrow-round-back</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-round-forward"></i> <p>icon-ion-ios-arrow-round-forward</p> </li> <li> <i class="lqd-icn-ess icon-ion-ios-arrow-round-up"></i> <p>icon-ion-ios-arrow-round-up</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-forward"></i> <p>icon-md-arrow-round-forward</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-up-2"></i> <p>icon-md-arrow-round-up-2</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-down-2"></i> <p>icon-md-arrow-round-down-2</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-back-2"></i> <p>icon-md-arrow-round-back-2</p> </li> <li> <i class="lqd-icn-ess icon-md-arrow-round-forward-2"></i> <p>icon-md-arrow-round-forward-2</p> </li> <li> <i class="lqd-icn-ess icon-lqd-eye"></i> <p>icon-lqd-eye</p> </li> <li> <i class="lqd-icn-ess icon-lqd-sync"></i> <p>icon-lqd-sync</p> </li> <li> <i class="lqd-icn-ess icon-lqd-bars"></i> <p>icon-lqd-bars</p> </li> <li> <i class="lqd-icn-ess icon-lqd-dots"></i> <p>icon-lqd-dots</p> </li> <li> <i class="lqd-icn-ess icon-lqd-dots-alt"></i> <p>icon-lqd-dots-alt</p> </li> <li> <i class="lqd-icn-ess icon-ld-search-2"></i> <p>icon-ld-search-2</p> </li> <li> <i class="lqd-icn-ess icon-lqd-user-2"></i> <p>icon-lqd-user-2</p> </li> <li> <i class="lqd-icn-ess icon-lqd-volume-low"></i> <p>icon-lqd-volume-low</p> </li> <li> <i class="lqd-icn-ess icon-lqd-volume-high"></i> <p>icon-lqd-volume-high</p> </li> <li> <i class="lqd-icn-ess icon-compare"></i> <p>icon-compare</p> </li> <li> <i class="lqd-icn-ess icon-lqd-presentation"></i> <p>icon-lqd-presentation</p> </li> <li> <i class="lqd-icn-ess icon-lqd-cogs"></i> <p>icon-lqd-cogs</p> </li> <li> <i class="lqd-icn-ess icon-lqd-tools"></i> <p>icon-lqd-tools</p> </li> <li> <i class="lqd-icn-ess icon-lqd-mobile"></i> <p>icon-lqd-mobile</p> </li> <li> <i class="lqd-icn-ess icon-lqd-target"></i> <p>icon-lqd-target</p> </li> <li> <i class="lqd-icn-ess icon-lqd-path"></i> <p>icon-lqd-path</p> </li> <li> <i class="lqd-icn-ess icon-lqd-feather"></i> <p>icon-lqd-feather</p> </li> <li> <i class="lqd-icn-ess icon-lqd-smile"></i> <p>icon-lqd-smile</p> </li> <li> <i class="lqd-icn-ess icon-lqd-circle"></i> <p>icon-lqd-circle</p> </li> <!-- list of icons here with the proper class--> </ul> </section> </div> <script> function SelectText(element) { var doc = document , text = element , range, selection; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } window.onload = function() { var iconsWrapper = document.getElementById('icons-wrapper'), listItems = iconsWrapper.getElementsByTagName('li'); for (var i = 0; i < listItems.length; i++) { listItems[i].onclick = function fun(event) { var selectedTagName = event.target.tagName.toLowerCase(); if( selectedTagName == 'p' || selectedTagName == 'em' ) { SelectText(event.target); } else if( selectedTagName == 'input' ) { event.target.setSelectionRange(0, event.target.value.length); } } var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""), beforeContent = beforeContentChar.codePointAt(0).toString(16); var beforeContentElement = document.createElement("em"); beforeContentElement.textContent = "\\"+beforeContent; listItems[i].appendChild(beforeContentElement); //create input element to copy/paste chart var charCharac = document.createElement('input'); charCharac.setAttribute('type', 'text'); charCharac.setAttribute('maxlength', '1'); charCharac.setAttribute('readonly', 'true'); charCharac.setAttribute('value', beforeContentChar); listItems[i].appendChild(charCharac); } } </script> </body> </html>