Your IP : 3.137.161.247
<!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="shortcut icon" href="demo/favicon.ico">
<title>Feather Web Font</title>
</head>
<body>
<header>
<h1>Feather 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="fe fe-activity"></i>
<p>fe-activity</p>
</li>
<li>
<i class="fe fe-airplay"></i>
<p>fe-airplay</p>
</li>
<li>
<i class="fe fe-alert-circle"></i>
<p>fe-alert-circle</p>
</li>
<li>
<i class="fe fe-alert-octagon"></i>
<p>fe-alert-octagon</p>
</li>
<li>
<i class="fe fe-alert-triangle"></i>
<p>fe-alert-triangle</p>
</li>
<li>
<i class="fe fe-align-center"></i>
<p>fe-align-center</p>
</li>
<li>
<i class="fe fe-align-justify"></i>
<p>fe-align-justify</p>
</li>
<li>
<i class="fe fe-align-left"></i>
<p>fe-align-left</p>
</li>
<li>
<i class="fe fe-align-right"></i>
<p>fe-align-right</p>
</li>
<li>
<i class="fe fe-anchor"></i>
<p>fe-anchor</p>
</li>
<li>
<i class="fe fe-aperture"></i>
<p>fe-aperture</p>
</li>
<li>
<i class="fe fe-archive"></i>
<p>fe-archive</p>
</li>
<li>
<i class="fe fe-arrow-down-circle"></i>
<p>fe-arrow-down-circle</p>
</li>
<li>
<i class="fe fe-arrow-down-left"></i>
<p>fe-arrow-down-left</p>
</li>
<li>
<i class="fe fe-arrow-down-right"></i>
<p>fe-arrow-down-right</p>
</li>
<li>
<i class="fe fe-arrow-down"></i>
<p>fe-arrow-down</p>
</li>
<li>
<i class="fe fe-arrow-left-circle"></i>
<p>fe-arrow-left-circle</p>
</li>
<li>
<i class="fe fe-arrow-left"></i>
<p>fe-arrow-left</p>
</li>
<li>
<i class="fe fe-arrow-right-circle"></i>
<p>fe-arrow-right-circle</p>
</li>
<li>
<i class="fe fe-arrow-right"></i>
<p>fe-arrow-right</p>
</li>
<li>
<i class="fe fe-arrow-up-circle"></i>
<p>fe-arrow-up-circle</p>
</li>
<li>
<i class="fe fe-arrow-up-left"></i>
<p>fe-arrow-up-left</p>
</li>
<li>
<i class="fe fe-arrow-up-right"></i>
<p>fe-arrow-up-right</p>
</li>
<li>
<i class="fe fe-arrow-up"></i>
<p>fe-arrow-up</p>
</li>
<li>
<i class="fe fe-at-sign"></i>
<p>fe-at-sign</p>
</li>
<li>
<i class="fe fe-award"></i>
<p>fe-award</p>
</li>
<li>
<i class="fe fe-bar-chart-2"></i>
<p>fe-bar-chart-2</p>
</li>
<li>
<i class="fe fe-bar-chart"></i>
<p>fe-bar-chart</p>
</li>
<li>
<i class="fe fe-battery-charging"></i>
<p>fe-battery-charging</p>
</li>
<li>
<i class="fe fe-battery"></i>
<p>fe-battery</p>
</li>
<li>
<i class="fe fe-bell-off"></i>
<p>fe-bell-off</p>
</li>
<li>
<i class="fe fe-bell"></i>
<p>fe-bell</p>
</li>
<li>
<i class="fe fe-bluetooth"></i>
<p>fe-bluetooth</p>
</li>
<li>
<i class="fe fe-bold"></i>
<p>fe-bold</p>
</li>
<li>
<i class="fe fe-book-open"></i>
<p>fe-book-open</p>
</li>
<li>
<i class="fe fe-book"></i>
<p>fe-book</p>
</li>
<li>
<i class="fe fe-bookmark"></i>
<p>fe-bookmark</p>
</li>
<li>
<i class="fe fe-box"></i>
<p>fe-box</p>
</li>
<li>
<i class="fe fe-briefcase"></i>
<p>fe-briefcase</p>
</li>
<li>
<i class="fe fe-calendar"></i>
<p>fe-calendar</p>
</li>
<li>
<i class="fe fe-camera-off"></i>
<p>fe-camera-off</p>
</li>
<li>
<i class="fe fe-camera"></i>
<p>fe-camera</p>
</li>
<li>
<i class="fe fe-cast"></i>
<p>fe-cast</p>
</li>
<li>
<i class="fe fe-check-circle"></i>
<p>fe-check-circle</p>
</li>
<li>
<i class="fe fe-check-square"></i>
<p>fe-check-square</p>
</li>
<li>
<i class="fe fe-check"></i>
<p>fe-check</p>
</li>
<li>
<i class="fe fe-chevron-down"></i>
<p>fe-chevron-down</p>
</li>
<li>
<i class="fe fe-chevron-left"></i>
<p>fe-chevron-left</p>
</li>
<li>
<i class="fe fe-chevron-right"></i>
<p>fe-chevron-right</p>
</li>
<li>
<i class="fe fe-chevron-up"></i>
<p>fe-chevron-up</p>
</li>
<li>
<i class="fe fe-chevrons-down"></i>
<p>fe-chevrons-down</p>
</li>
<li>
<i class="fe fe-chevrons-left"></i>
<p>fe-chevrons-left</p>
</li>
<li>
<i class="fe fe-chevrons-right"></i>
<p>fe-chevrons-right</p>
</li>
<li>
<i class="fe fe-chevrons-up"></i>
<p>fe-chevrons-up</p>
</li>
<li>
<i class="fe fe-chrome"></i>
<p>fe-chrome</p>
</li>
<li>
<i class="fe fe-circle"></i>
<p>fe-circle</p>
</li>
<li>
<i class="fe fe-clipboard"></i>
<p>fe-clipboard</p>
</li>
<li>
<i class="fe fe-clock"></i>
<p>fe-clock</p>
</li>
<li>
<i class="fe fe-cloud-drizzle"></i>
<p>fe-cloud-drizzle</p>
</li>
<li>
<i class="fe fe-cloud-lightning"></i>
<p>fe-cloud-lightning</p>
</li>
<li>
<i class="fe fe-cloud-off"></i>
<p>fe-cloud-off</p>
</li>
<li>
<i class="fe fe-cloud-rain"></i>
<p>fe-cloud-rain</p>
</li>
<li>
<i class="fe fe-cloud-snow"></i>
<p>fe-cloud-snow</p>
</li>
<li>
<i class="fe fe-cloud"></i>
<p>fe-cloud</p>
</li>
<li>
<i class="fe fe-code"></i>
<p>fe-code</p>
</li>
<li>
<i class="fe fe-codepen"></i>
<p>fe-codepen</p>
</li>
<li>
<i class="fe fe-codesandbox"></i>
<p>fe-codesandbox</p>
</li>
<li>
<i class="fe fe-coffee"></i>
<p>fe-coffee</p>
</li>
<li>
<i class="fe fe-columns"></i>
<p>fe-columns</p>
</li>
<li>
<i class="fe fe-command"></i>
<p>fe-command</p>
</li>
<li>
<i class="fe fe-compass"></i>
<p>fe-compass</p>
</li>
<li>
<i class="fe fe-copy"></i>
<p>fe-copy</p>
</li>
<li>
<i class="fe fe-corner-down-left"></i>
<p>fe-corner-down-left</p>
</li>
<li>
<i class="fe fe-corner-down-right"></i>
<p>fe-corner-down-right</p>
</li>
<li>
<i class="fe fe-corner-left-down"></i>
<p>fe-corner-left-down</p>
</li>
<li>
<i class="fe fe-corner-left-up"></i>
<p>fe-corner-left-up</p>
</li>
<li>
<i class="fe fe-corner-right-down"></i>
<p>fe-corner-right-down</p>
</li>
<li>
<i class="fe fe-corner-right-up"></i>
<p>fe-corner-right-up</p>
</li>
<li>
<i class="fe fe-corner-up-left"></i>
<p>fe-corner-up-left</p>
</li>
<li>
<i class="fe fe-corner-up-right"></i>
<p>fe-corner-up-right</p>
</li>
<li>
<i class="fe fe-cpu"></i>
<p>fe-cpu</p>
</li>
<li>
<i class="fe fe-credit-card"></i>
<p>fe-credit-card</p>
</li>
<li>
<i class="fe fe-crop"></i>
<p>fe-crop</p>
</li>
<li>
<i class="fe fe-crosshair"></i>
<p>fe-crosshair</p>
</li>
<li>
<i class="fe fe-database"></i>
<p>fe-database</p>
</li>
<li>
<i class="fe fe-delete"></i>
<p>fe-delete</p>
</li>
<li>
<i class="fe fe-disc"></i>
<p>fe-disc</p>
</li>
<li>
<i class="fe fe-dollar-sign"></i>
<p>fe-dollar-sign</p>
</li>
<li>
<i class="fe fe-download-cloud"></i>
<p>fe-download-cloud</p>
</li>
<li>
<i class="fe fe-download"></i>
<p>fe-download</p>
</li>
<li>
<i class="fe fe-droplet"></i>
<p>fe-droplet</p>
</li>
<li>
<i class="fe fe-edit-2"></i>
<p>fe-edit-2</p>
</li>
<li>
<i class="fe fe-edit-3"></i>
<p>fe-edit-3</p>
</li>
<li>
<i class="fe fe-edit"></i>
<p>fe-edit</p>
</li>
<li>
<i class="fe fe-external-link"></i>
<p>fe-external-link</p>
</li>
<li>
<i class="fe fe-eye-off"></i>
<p>fe-eye-off</p>
</li>
<li>
<i class="fe fe-eye"></i>
<p>fe-eye</p>
</li>
<li>
<i class="fe fe-facebook"></i>
<p>fe-facebook</p>
</li>
<li>
<i class="fe fe-fast-forward"></i>
<p>fe-fast-forward</p>
</li>
<li>
<i class="fe fe-feather"></i>
<p>fe-feather</p>
</li>
<li>
<i class="fe fe-figma"></i>
<p>fe-figma</p>
</li>
<li>
<i class="fe fe-file-minus"></i>
<p>fe-file-minus</p>
</li>
<li>
<i class="fe fe-file-plus"></i>
<p>fe-file-plus</p>
</li>
<li>
<i class="fe fe-file-text"></i>
<p>fe-file-text</p>
</li>
<li>
<i class="fe fe-file"></i>
<p>fe-file</p>
</li>
<li>
<i class="fe fe-film"></i>
<p>fe-film</p>
</li>
<li>
<i class="fe fe-filter"></i>
<p>fe-filter</p>
</li>
<li>
<i class="fe fe-flag"></i>
<p>fe-flag</p>
</li>
<li>
<i class="fe fe-folder-minus"></i>
<p>fe-folder-minus</p>
</li>
<li>
<i class="fe fe-folder-plus"></i>
<p>fe-folder-plus</p>
</li>
<li>
<i class="fe fe-folder"></i>
<p>fe-folder</p>
</li>
<li>
<i class="fe fe-frown"></i>
<p>fe-frown</p>
</li>
<li>
<i class="fe fe-gift"></i>
<p>fe-gift</p>
</li>
<li>
<i class="fe fe-git-branch"></i>
<p>fe-git-branch</p>
</li>
<li>
<i class="fe fe-git-commit"></i>
<p>fe-git-commit</p>
</li>
<li>
<i class="fe fe-git-merge"></i>
<p>fe-git-merge</p>
</li>
<li>
<i class="fe fe-git-pull-request"></i>
<p>fe-git-pull-request</p>
</li>
<li>
<i class="fe fe-github"></i>
<p>fe-github</p>
</li>
<li>
<i class="fe fe-gitlab"></i>
<p>fe-gitlab</p>
</li>
<li>
<i class="fe fe-globe"></i>
<p>fe-globe</p>
</li>
<li>
<i class="fe fe-grid"></i>
<p>fe-grid</p>
</li>
<li>
<i class="fe fe-hard-drive"></i>
<p>fe-hard-drive</p>
</li>
<li>
<i class="fe fe-hash"></i>
<p>fe-hash</p>
</li>
<li>
<i class="fe fe-headphones"></i>
<p>fe-headphones</p>
</li>
<li>
<i class="fe fe-heart"></i>
<p>fe-heart</p>
</li>
<li>
<i class="fe fe-help-circle"></i>
<p>fe-help-circle</p>
</li>
<li>
<i class="fe fe-hexagon"></i>
<p>fe-hexagon</p>
</li>
<li>
<i class="fe fe-home"></i>
<p>fe-home</p>
</li>
<li>
<i class="fe fe-image"></i>
<p>fe-image</p>
</li>
<li>
<i class="fe fe-inbox"></i>
<p>fe-inbox</p>
</li>
<li>
<i class="fe fe-info"></i>
<p>fe-info</p>
</li>
<li>
<i class="fe fe-instagram"></i>
<p>fe-instagram</p>
</li>
<li>
<i class="fe fe-italic"></i>
<p>fe-italic</p>
</li>
<li>
<i class="fe fe-key"></i>
<p>fe-key</p>
</li>
<li>
<i class="fe fe-layers"></i>
<p>fe-layers</p>
</li>
<li>
<i class="fe fe-layout"></i>
<p>fe-layout</p>
</li>
<li>
<i class="fe fe-life-buoy"></i>
<p>fe-life-buoy</p>
</li>
<li>
<i class="fe fe-link-2"></i>
<p>fe-link-2</p>
</li>
<li>
<i class="fe fe-link"></i>
<p>fe-link</p>
</li>
<li>
<i class="fe fe-linkedin"></i>
<p>fe-linkedin</p>
</li>
<li>
<i class="fe fe-list"></i>
<p>fe-list</p>
</li>
<li>
<i class="fe fe-loader"></i>
<p>fe-loader</p>
</li>
<li>
<i class="fe fe-lock"></i>
<p>fe-lock</p>
</li>
<li>
<i class="fe fe-log-in"></i>
<p>fe-log-in</p>
</li>
<li>
<i class="fe fe-log-out"></i>
<p>fe-log-out</p>
</li>
<li>
<i class="fe fe-mail"></i>
<p>fe-mail</p>
</li>
<li>
<i class="fe fe-map-pin"></i>
<p>fe-map-pin</p>
</li>
<li>
<i class="fe fe-map"></i>
<p>fe-map</p>
</li>
<li>
<i class="fe fe-maximize-2"></i>
<p>fe-maximize-2</p>
</li>
<li>
<i class="fe fe-maximize"></i>
<p>fe-maximize</p>
</li>
<li>
<i class="fe fe-meh"></i>
<p>fe-meh</p>
</li>
<li>
<i class="fe fe-menu"></i>
<p>fe-menu</p>
</li>
<li>
<i class="fe fe-message-circle"></i>
<p>fe-message-circle</p>
</li>
<li>
<i class="fe fe-message-square"></i>
<p>fe-message-square</p>
</li>
<li>
<i class="fe fe-mic-off"></i>
<p>fe-mic-off</p>
</li>
<li>
<i class="fe fe-mic"></i>
<p>fe-mic</p>
</li>
<li>
<i class="fe fe-minimize-2"></i>
<p>fe-minimize-2</p>
</li>
<li>
<i class="fe fe-minimize"></i>
<p>fe-minimize</p>
</li>
<li>
<i class="fe fe-minus-circle"></i>
<p>fe-minus-circle</p>
</li>
<li>
<i class="fe fe-minus-square"></i>
<p>fe-minus-square</p>
</li>
<li>
<i class="fe fe-minus"></i>
<p>fe-minus</p>
</li>
<li>
<i class="fe fe-monitor"></i>
<p>fe-monitor</p>
</li>
<li>
<i class="fe fe-moon"></i>
<p>fe-moon</p>
</li>
<li>
<i class="fe fe-more-horizontal"></i>
<p>fe-more-horizontal</p>
</li>
<li>
<i class="fe fe-more-vertical"></i>
<p>fe-more-vertical</p>
</li>
<li>
<i class="fe fe-mouse-pointer"></i>
<p>fe-mouse-pointer</p>
</li>
<li>
<i class="fe fe-move"></i>
<p>fe-move</p>
</li>
<li>
<i class="fe fe-music"></i>
<p>fe-music</p>
</li>
<li>
<i class="fe fe-navigation-2"></i>
<p>fe-navigation-2</p>
</li>
<li>
<i class="fe fe-navigation"></i>
<p>fe-navigation</p>
</li>
<li>
<i class="fe fe-octagon"></i>
<p>fe-octagon</p>
</li>
<li>
<i class="fe fe-package"></i>
<p>fe-package</p>
</li>
<li>
<i class="fe fe-paperclip"></i>
<p>fe-paperclip</p>
</li>
<li>
<i class="fe fe-pause-circle"></i>
<p>fe-pause-circle</p>
</li>
<li>
<i class="fe fe-pause"></i>
<p>fe-pause</p>
</li>
<li>
<i class="fe fe-pen-tool"></i>
<p>fe-pen-tool</p>
</li>
<li>
<i class="fe fe-percent"></i>
<p>fe-percent</p>
</li>
<li>
<i class="fe fe-phone-call"></i>
<p>fe-phone-call</p>
</li>
<li>
<i class="fe fe-phone-forwarded"></i>
<p>fe-phone-forwarded</p>
</li>
<li>
<i class="fe fe-phone-incoming"></i>
<p>fe-phone-incoming</p>
</li>
<li>
<i class="fe fe-phone-missed"></i>
<p>fe-phone-missed</p>
</li>
<li>
<i class="fe fe-phone-off"></i>
<p>fe-phone-off</p>
</li>
<li>
<i class="fe fe-phone-outgoing"></i>
<p>fe-phone-outgoing</p>
</li>
<li>
<i class="fe fe-phone"></i>
<p>fe-phone</p>
</li>
<li>
<i class="fe fe-pie-chart"></i>
<p>fe-pie-chart</p>
</li>
<li>
<i class="fe fe-play-circle"></i>
<p>fe-play-circle</p>
</li>
<li>
<i class="fe fe-play"></i>
<p>fe-play</p>
</li>
<li>
<i class="fe fe-plus-circle"></i>
<p>fe-plus-circle</p>
</li>
<li>
<i class="fe fe-plus-square"></i>
<p>fe-plus-square</p>
</li>
<li>
<i class="fe fe-plus"></i>
<p>fe-plus</p>
</li>
<li>
<i class="fe fe-pocket"></i>
<p>fe-pocket</p>
</li>
<li>
<i class="fe fe-power"></i>
<p>fe-power</p>
</li>
<li>
<i class="fe fe-printer"></i>
<p>fe-printer</p>
</li>
<li>
<i class="fe fe-radio"></i>
<p>fe-radio</p>
</li>
<li>
<i class="fe fe-refresh-ccw"></i>
<p>fe-refresh-ccw</p>
</li>
<li>
<i class="fe fe-refresh-cw"></i>
<p>fe-refresh-cw</p>
</li>
<li>
<i class="fe fe-repeat"></i>
<p>fe-repeat</p>
</li>
<li>
<i class="fe fe-rewind"></i>
<p>fe-rewind</p>
</li>
<li>
<i class="fe fe-rotate-ccw"></i>
<p>fe-rotate-ccw</p>
</li>
<li>
<i class="fe fe-rotate-cw"></i>
<p>fe-rotate-cw</p>
</li>
<li>
<i class="fe fe-rss"></i>
<p>fe-rss</p>
</li>
<li>
<i class="fe fe-save"></i>
<p>fe-save</p>
</li>
<li>
<i class="fe fe-scissors"></i>
<p>fe-scissors</p>
</li>
<li>
<i class="fe fe-search"></i>
<p>fe-search</p>
</li>
<li>
<i class="fe fe-send"></i>
<p>fe-send</p>
</li>
<li>
<i class="fe fe-server"></i>
<p>fe-server</p>
</li>
<li>
<i class="fe fe-settings"></i>
<p>fe-settings</p>
</li>
<li>
<i class="fe fe-share-2"></i>
<p>fe-share-2</p>
</li>
<li>
<i class="fe fe-share"></i>
<p>fe-share</p>
</li>
<li>
<i class="fe fe-shield-off"></i>
<p>fe-shield-off</p>
</li>
<li>
<i class="fe fe-shield"></i>
<p>fe-shield</p>
</li>
<li>
<i class="fe fe-shopping-bag"></i>
<p>fe-shopping-bag</p>
</li>
<li>
<i class="fe fe-shopping-cart"></i>
<p>fe-shopping-cart</p>
</li>
<li>
<i class="fe fe-shuffle"></i>
<p>fe-shuffle</p>
</li>
<li>
<i class="fe fe-sidebar"></i>
<p>fe-sidebar</p>
</li>
<li>
<i class="fe fe-skip-back"></i>
<p>fe-skip-back</p>
</li>
<li>
<i class="fe fe-skip-forward"></i>
<p>fe-skip-forward</p>
</li>
<li>
<i class="fe fe-slack"></i>
<p>fe-slack</p>
</li>
<li>
<i class="fe fe-slash"></i>
<p>fe-slash</p>
</li>
<li>
<i class="fe fe-sliders"></i>
<p>fe-sliders</p>
</li>
<li>
<i class="fe fe-smartphone"></i>
<p>fe-smartphone</p>
</li>
<li>
<i class="fe fe-smile"></i>
<p>fe-smile</p>
</li>
<li>
<i class="fe fe-speaker"></i>
<p>fe-speaker</p>
</li>
<li>
<i class="fe fe-square"></i>
<p>fe-square</p>
</li>
<li>
<i class="fe fe-star"></i>
<p>fe-star</p>
</li>
<li>
<i class="fe fe-stop-circle"></i>
<p>fe-stop-circle</p>
</li>
<li>
<i class="fe fe-sun"></i>
<p>fe-sun</p>
</li>
<li>
<i class="fe fe-sunrise"></i>
<p>fe-sunrise</p>
</li>
<li>
<i class="fe fe-sunset"></i>
<p>fe-sunset</p>
</li>
<li>
<i class="fe fe-tablet"></i>
<p>fe-tablet</p>
</li>
<li>
<i class="fe fe-tag"></i>
<p>fe-tag</p>
</li>
<li>
<i class="fe fe-target"></i>
<p>fe-target</p>
</li>
<li>
<i class="fe fe-terminal"></i>
<p>fe-terminal</p>
</li>
<li>
<i class="fe fe-thermometer"></i>
<p>fe-thermometer</p>
</li>
<li>
<i class="fe fe-thumbs-down"></i>
<p>fe-thumbs-down</p>
</li>
<li>
<i class="fe fe-thumbs-up"></i>
<p>fe-thumbs-up</p>
</li>
<li>
<i class="fe fe-toggle-left"></i>
<p>fe-toggle-left</p>
</li>
<li>
<i class="fe fe-toggle-right"></i>
<p>fe-toggle-right</p>
</li>
<li>
<i class="fe fe-trash-2"></i>
<p>fe-trash-2</p>
</li>
<li>
<i class="fe fe-trash"></i>
<p>fe-trash</p>
</li>
<li>
<i class="fe fe-trello"></i>
<p>fe-trello</p>
</li>
<li>
<i class="fe fe-trending-down"></i>
<p>fe-trending-down</p>
</li>
<li>
<i class="fe fe-trending-up"></i>
<p>fe-trending-up</p>
</li>
<li>
<i class="fe fe-triangle"></i>
<p>fe-triangle</p>
</li>
<li>
<i class="fe fe-truck"></i>
<p>fe-truck</p>
</li>
<li>
<i class="fe fe-tv"></i>
<p>fe-tv</p>
</li>
<li>
<i class="fe fe-twitter"></i>
<p>fe-twitter</p>
</li>
<li>
<i class="fe fe-type"></i>
<p>fe-type</p>
</li>
<li>
<i class="fe fe-umbrella"></i>
<p>fe-umbrella</p>
</li>
<li>
<i class="fe fe-underline"></i>
<p>fe-underline</p>
</li>
<li>
<i class="fe fe-unlock"></i>
<p>fe-unlock</p>
</li>
<li>
<i class="fe fe-upload-cloud"></i>
<p>fe-upload-cloud</p>
</li>
<li>
<i class="fe fe-upload"></i>
<p>fe-upload</p>
</li>
<li>
<i class="fe fe-user-check"></i>
<p>fe-user-check</p>
</li>
<li>
<i class="fe fe-user-minus"></i>
<p>fe-user-minus</p>
</li>
<li>
<i class="fe fe-user-plus"></i>
<p>fe-user-plus</p>
</li>
<li>
<i class="fe fe-user-x"></i>
<p>fe-user-x</p>
</li>
<li>
<i class="fe fe-user"></i>
<p>fe-user</p>
</li>
<li>
<i class="fe fe-users"></i>
<p>fe-users</p>
</li>
<li>
<i class="fe fe-video-off"></i>
<p>fe-video-off</p>
</li>
<li>
<i class="fe fe-video"></i>
<p>fe-video</p>
</li>
<li>
<i class="fe fe-voicemail"></i>
<p>fe-voicemail</p>
</li>
<li>
<i class="fe fe-volume-1"></i>
<p>fe-volume-1</p>
</li>
<li>
<i class="fe fe-volume-2"></i>
<p>fe-volume-2</p>
</li>
<li>
<i class="fe fe-volume-x"></i>
<p>fe-volume-x</p>
</li>
<li>
<i class="fe fe-volume"></i>
<p>fe-volume</p>
</li>
<li>
<i class="fe fe-watch"></i>
<p>fe-watch</p>
</li>
<li>
<i class="fe fe-wifi-off"></i>
<p>fe-wifi-off</p>
</li>
<li>
<i class="fe fe-wifi"></i>
<p>fe-wifi</p>
</li>
<li>
<i class="fe fe-wind"></i>
<p>fe-wind</p>
</li>
<li>
<i class="fe fe-x-circle"></i>
<p>fe-x-circle</p>
</li>
<li>
<i class="fe fe-x-octagon"></i>
<p>fe-x-octagon</p>
</li>
<li>
<i class="fe fe-x-square"></i>
<p>fe-x-square</p>
</li>
<li>
<i class="fe fe-x"></i>
<p>fe-x</p>
</li>
<li>
<i class="fe fe-youtube"></i>
<p>fe-youtube</p>
</li>
<li>
<i class="fe fe-zap-off"></i>
<p>fe-zap-off</p>
</li>
<li>
<i class="fe fe-zap"></i>
<p>fe-zap</p>
</li>
<li>
<i class="fe fe-zoom-in"></i>
<p>fe-zoom-in</p>
</li>
<li>
<i class="fe fe-zoom-out"></i>
<p>fe-zoom-out</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>