574 lines
16 KiB
HTML
574 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="demo-icons">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
|
|
<link rel="stylesheet" href="assets/css/nucleo-icons.css">
|
|
<link rel="stylesheet" href="assets/css/demo.css">
|
|
|
|
<link rel="shortcut icon" href="demo/favicon.ico">
|
|
<title>Paper Kit 2 PRO Web Font</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Paper Kit 2 Icons</h1>
|
|
<p>Built with <a href="https://nucleoapp.com/?ref=1712">nucleoapp.com</a></p>
|
|
</header>
|
|
|
|
<div id="icons-wrapper">
|
|
<section>
|
|
<ul>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-air-baloon"></i>
|
|
<p>nc-air-baloon</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-album-2"></i>
|
|
<p>nc-album-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-alert-circle-i"></i>
|
|
<p>nc-alert-circle-i</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-align-center"></i>
|
|
<p>nc-align-center</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-align-left-2"></i>
|
|
<p>nc-align-left-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-ambulance"></i>
|
|
<p>nc-ambulance</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-app"></i>
|
|
<p>nc-app</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-atom"></i>
|
|
<p>nc-atom</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-badge"></i>
|
|
<p>nc-badge</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bag-16"></i>
|
|
<p>nc-bag-16</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bank"></i>
|
|
<p>nc-bank</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-basket"></i>
|
|
<p>nc-basket</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bell-55"></i>
|
|
<p>nc-bell-55</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bold"></i>
|
|
<p>nc-bold</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-book-bookmark"></i>
|
|
<p>nc-book-bookmark</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bookmark-2"></i>
|
|
<p>nc-bookmark-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-box-2"></i>
|
|
<p>nc-box-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-box"></i>
|
|
<p>nc-box</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-briefcase-24"></i>
|
|
<p>nc-briefcase-24</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bulb-63"></i>
|
|
<p>nc-bulb-63</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bullet-list-67"></i>
|
|
<p>nc-bullet-list-67</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-bus-front-12"></i>
|
|
<p>nc-bus-front-12</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-button-pause"></i>
|
|
<p>nc-button-pause</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-button-play"></i>
|
|
<p>nc-button-play</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-button-power"></i>
|
|
<p>nc-button-power</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-calendar-60"></i>
|
|
<p>nc-calendar-60</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-camera-compact"></i>
|
|
<p>nc-camera-compact</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-caps-small"></i>
|
|
<p>nc-caps-small</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-cart-simple"></i>
|
|
<p>nc-cart-simple</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-chart-bar-32"></i>
|
|
<p>nc-chart-bar-32</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-chart-pie-36"></i>
|
|
<p>nc-chart-pie-36</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-chat-33"></i>
|
|
<p>nc-chat-33</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-check-2"></i>
|
|
<p>nc-check-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-circle-10"></i>
|
|
<p>nc-circle-10</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-cloud-download-93"></i>
|
|
<p>nc-cloud-download-93</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-cloud-upload-94"></i>
|
|
<p>nc-cloud-upload-94</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-compass-05"></i>
|
|
<p>nc-compass-05</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-controller-modern"></i>
|
|
<p>nc-controller-modern</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-credit-card"></i>
|
|
<p>nc-credit-card</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-delivery-fast"></i>
|
|
<p>nc-delivery-fast</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-diamond"></i>
|
|
<p>nc-diamond</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-email-85"></i>
|
|
<p>nc-email-85</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-favourite-28"></i>
|
|
<p>nc-favourite-28</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-glasses-2"></i>
|
|
<p>nc-glasses-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-globe-2"></i>
|
|
<p>nc-globe-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-globe"></i>
|
|
<p>nc-globe</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-hat-3"></i>
|
|
<p>nc-hat-3</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-headphones"></i>
|
|
<p>nc-headphones</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-html5"></i>
|
|
<p>nc-html5</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-image"></i>
|
|
<p>nc-image</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-istanbul"></i>
|
|
<p>nc-istanbul</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-key-25"></i>
|
|
<p>nc-key-25</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-laptop"></i>
|
|
<p>nc-laptop</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-layout-11"></i>
|
|
<p>nc-layout-11</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-lock-circle-open"></i>
|
|
<p>nc-lock-circle-open</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-map-big"></i>
|
|
<p>nc-map-big</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-minimal-down"></i>
|
|
<p>nc-minimal-down</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-minimal-left"></i>
|
|
<p>nc-minimal-left</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-minimal-right"></i>
|
|
<p>nc-minimal-right</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-minimal-up"></i>
|
|
<p>nc-minimal-up</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-mobile"></i>
|
|
<p>nc-mobile</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-money-coins"></i>
|
|
<p>nc-money-coins</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-note-03"></i>
|
|
<p>nc-note-03</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-palette"></i>
|
|
<p>nc-palette</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-paper"></i>
|
|
<p>nc-paper</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-pin-3"></i>
|
|
<p>nc-pin-3</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-planet"></i>
|
|
<p>nc-planet</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-refresh-69"></i>
|
|
<p>nc-refresh-69</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-ruler-pencil"></i>
|
|
<p>nc-ruler-pencil</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-satisfied"></i>
|
|
<p>nc-satisfied</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-scissors"></i>
|
|
<p>nc-scissors</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-send"></i>
|
|
<p>nc-send</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-settings-gear-65"></i>
|
|
<p>nc-settings-gear-65</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-settings"></i>
|
|
<p>nc-settings</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-share-66"></i>
|
|
<p>nc-share-66</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-shop"></i>
|
|
<p>nc-shop</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-simple-add"></i>
|
|
<p>nc-simple-add</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-simple-delete"></i>
|
|
<p>nc-simple-delete</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-simple-remove"></i>
|
|
<p>nc-simple-remove</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-single-02"></i>
|
|
<p>nc-single-02</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-single-copy-04"></i>
|
|
<p>nc-single-copy-04</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-sound-wave"></i>
|
|
<p>nc-sound-wave</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-spaceship"></i>
|
|
<p>nc-spaceship</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-sun-fog-29"></i>
|
|
<p>nc-sun-fog-29</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-support-17"></i>
|
|
<p>nc-support-17</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tablet-2"></i>
|
|
<p>nc-tablet-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tag-content"></i>
|
|
<p>nc-tag-content</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tap-01"></i>
|
|
<p>nc-tap-01</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tie-bow"></i>
|
|
<p>nc-tie-bow</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tile-56"></i>
|
|
<p>nc-tile-56</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-time-alarm"></i>
|
|
<p>nc-time-alarm</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-touch-id"></i>
|
|
<p>nc-touch-id</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-trophy"></i>
|
|
<p>nc-trophy</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-tv-2"></i>
|
|
<p>nc-tv-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-umbrella-13"></i>
|
|
<p>nc-umbrella-13</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-user-run"></i>
|
|
<p>nc-user-run</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-vector"></i>
|
|
<p>nc-vector</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-watch-time"></i>
|
|
<p>nc-watch-time</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-world-2"></i>
|
|
<p>nc-world-2</p>
|
|
</li>
|
|
|
|
<li>
|
|
<i class="nc-icon nc-zoom-split"></i>
|
|
<p>nc-zoom-split</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.charCodeAt(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>
|