victorAnumudu
429 lines
14 KiB
HTML
429 lines
14 KiB
HTML
<!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>
|