svoydom/public/assets/fonts/feather-font/examples/index.html

1671 lines
46 KiB
HTML
Raw Normal View History

2023-05-17 09:57:20 +03:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IconFont</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
<div class="main markdown">
<h1>Feather</h1>
<hr>
<h2 id="font-class-">Quote as Font-class</h2>
<hr>
<p>Font-class is one kind of derived usage of Unicode, which solved the problems of intuitive writing and semantic ambiguity</p>
<p>Compared with Unicode, its characteristics as following:</p>
<ul>
<li>Good compatibility, it supports IE 8+ and all usual browsers.</li>
<li>When you want to change one icon, you just need to alter the quote of Unicode in class, because it define icons by “class”.</li>
<li>But its one kind of font essentially, it can not support multi-color icon as well.</li>
</ul>
<p>Usage:</p>
<h3 id="-fontclass-">Step 1: Include the css of iconfont</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<h3 id="-">Step 2: Copy the individual code of icon into pages</h3>
<pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">feather</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<ul class="icon_lists clear">
<li>
<i class="icon feather icon-alert-octagon"></i>
<div class="name">alert-octagon</div>
<div class="fontclass">.icon-alert-octagon</div>
</li>
<li>
<i class="icon feather icon-alert-circle"></i>
<div class="name">alert-circle</div>
<div class="fontclass">.icon-alert-circle</div>
</li>
<li>
<i class="icon feather icon-activity"></i>
<div class="name">activity</div>
<div class="fontclass">.icon-activity</div>
</li>
<li>
<i class="icon feather icon-alert-triangle"></i>
<div class="name">alert-triangle</div>
<div class="fontclass">.icon-alert-triangle</div>
</li>
<li>
<i class="icon feather icon-align-center"></i>
<div class="name">align-center</div>
<div class="fontclass">.icon-align-center</div>
</li>
<li>
<i class="icon feather icon-airplay"></i>
<div class="name">airplay</div>
<div class="fontclass">.icon-airplay</div>
</li>
<li>
<i class="icon feather icon-align-justify"></i>
<div class="name">align-justify</div>
<div class="fontclass">.icon-align-justify</div>
</li>
<li>
<i class="icon feather icon-align-left"></i>
<div class="name">align-left</div>
<div class="fontclass">.icon-align-left</div>
</li>
<li>
<i class="icon feather icon-align-right"></i>
<div class="name">align-right</div>
<div class="fontclass">.icon-align-right</div>
</li>
<li>
<i class="icon feather icon-arrow-down-left"></i>
<div class="name">arrow-down-left</div>
<div class="fontclass">.icon-arrow-down-left</div>
</li>
<li>
<i class="icon feather icon-arrow-down-right"></i>
<div class="name">arrow-down-right</div>
<div class="fontclass">.icon-arrow-down-right</div>
</li>
<li>
<i class="icon feather icon-anchor"></i>
<div class="name">anchor</div>
<div class="fontclass">.icon-anchor</div>
</li>
<li>
<i class="icon feather icon-aperture"></i>
<div class="name">aperture</div>
<div class="fontclass">.icon-aperture</div>
</li>
<li>
<i class="icon feather icon-arrow-left"></i>
<div class="name">arrow-left</div>
<div class="fontclass">.icon-arrow-left</div>
</li>
<li>
<i class="icon feather icon-arrow-right"></i>
<div class="name">arrow-right</div>
<div class="fontclass">.icon-arrow-right</div>
</li>
<li>
<i class="icon feather icon-arrow-down"></i>
<div class="name">arrow-down</div>
<div class="fontclass">.icon-arrow-down</div>
</li>
<li>
<i class="icon feather icon-arrow-up-left"></i>
<div class="name">arrow-up-left</div>
<div class="fontclass">.icon-arrow-up-left</div>
</li>
<li>
<i class="icon feather icon-arrow-up-right"></i>
<div class="name">arrow-up-right</div>
<div class="fontclass">.icon-arrow-up-right</div>
</li>
<li>
<i class="icon feather icon-arrow-up"></i>
<div class="name">arrow-up</div>
<div class="fontclass">.icon-arrow-up</div>
</li>
<li>
<i class="icon feather icon-award"></i>
<div class="name">award</div>
<div class="fontclass">.icon-award</div>
</li>
<li>
<i class="icon feather icon-bar-chart"></i>
<div class="name">bar-chart</div>
<div class="fontclass">.icon-bar-chart</div>
</li>
<li>
<i class="icon feather icon-at-sign"></i>
<div class="name">at-sign</div>
<div class="fontclass">.icon-at-sign</div>
</li>
<li>
<i class="icon feather icon-bar-chart-2"></i>
<div class="name">bar-chart-2</div>
<div class="fontclass">.icon-bar-chart-</div>
</li>
<li>
<i class="icon feather icon-battery-charging"></i>
<div class="name">battery-charging</div>
<div class="fontclass">.icon-battery-charging</div>
</li>
<li>
<i class="icon feather icon-bell-off"></i>
<div class="name">bell-off</div>
<div class="fontclass">.icon-bell-off</div>
</li>
<li>
<i class="icon feather icon-battery"></i>
<div class="name">battery</div>
<div class="fontclass">.icon-battery</div>
</li>
<li>
<i class="icon feather icon-bluetooth"></i>
<div class="name">bluetooth</div>
<div class="fontclass">.icon-bluetooth</div>
</li>
<li>
<i class="icon feather icon-bell"></i>
<div class="name">bell</div>
<div class="fontclass">.icon-bell</div>
</li>
<li>
<i class="icon feather icon-book"></i>
<div class="name">book</div>
<div class="fontclass">.icon-book</div>
</li>
<li>
<i class="icon feather icon-briefcase"></i>
<div class="name">briefcase</div>
<div class="fontclass">.icon-briefcase</div>
</li>
<li>
<i class="icon feather icon-camera-off"></i>
<div class="name">camera-off</div>
<div class="fontclass">.icon-camera-off</div>
</li>
<li>
<i class="icon feather icon-calendar"></i>
<div class="name">calendar</div>
<div class="fontclass">.icon-calendar</div>
</li>
<li>
<i class="icon feather icon-bookmark"></i>
<div class="name">bookmark</div>
<div class="fontclass">.icon-bookmark</div>
</li>
<li>
<i class="icon feather icon-box"></i>
<div class="name">box</div>
<div class="fontclass">.icon-box</div>
</li>
<li>
<i class="icon feather icon-camera"></i>
<div class="name">camera</div>
<div class="fontclass">.icon-camera</div>
</li>
<li>
<i class="icon feather icon-check-circle"></i>
<div class="name">check-circle</div>
<div class="fontclass">.icon-check-circle</div>
</li>
<li>
<i class="icon feather icon-check"></i>
<div class="name">check</div>
<div class="fontclass">.icon-check</div>
</li>
<li>
<i class="icon feather icon-check-square"></i>
<div class="name">check-square</div>
<div class="fontclass">.icon-check-square</div>
</li>
<li>
<i class="icon feather icon-cast"></i>
<div class="name">cast</div>
<div class="fontclass">.icon-cast</div>
</li>
<li>
<i class="icon feather icon-chevron-down"></i>
<div class="name">chevron-down</div>
<div class="fontclass">.icon-chevron-down</div>
</li>
<li>
<i class="icon feather icon-chevron-left"></i>
<div class="name">chevron-left</div>
<div class="fontclass">.icon-chevron-left</div>
</li>
<li>
<i class="icon feather icon-chevron-right"></i>
<div class="name">chevron-right</div>
<div class="fontclass">.icon-chevron-right</div>
</li>
<li>
<i class="icon feather icon-chevron-up"></i>
<div class="name">chevron-up</div>
<div class="fontclass">.icon-chevron-up</div>
</li>
<li>
<i class="icon feather icon-chevrons-down"></i>
<div class="name">chevrons-down</div>
<div class="fontclass">.icon-chevrons-down</div>
</li>
<li>
<i class="icon feather icon-chevrons-right"></i>
<div class="name">chevrons-right</div>
<div class="fontclass">.icon-chevrons-right</div>
</li>
<li>
<i class="icon feather icon-chevrons-up"></i>
<div class="name">chevrons-up</div>
<div class="fontclass">.icon-chevrons-up</div>
</li>
<li>
<i class="icon feather icon-chevrons-left"></i>
<div class="name">chevrons-left</div>
<div class="fontclass">.icon-chevrons-left</div>
</li>
<li>
<i class="icon feather icon-circle"></i>
<div class="name">circle</div>
<div class="fontclass">.icon-circle</div>
</li>
<li>
<i class="icon feather icon-clipboard"></i>
<div class="name">clipboard</div>
<div class="fontclass">.icon-clipboard</div>
</li>
<li>
<i class="icon feather icon-chrome"></i>
<div class="name">chrome</div>
<div class="fontclass">.icon-chrome</div>
</li>
<li>
<i class="icon feather icon-clock"></i>
<div class="name">clock</div>
<div class="fontclass">.icon-clock</div>
</li>
<li>
<i class="icon feather icon-cloud-lightning"></i>
<div class="name">cloud-lightning</div>
<div class="fontclass">.icon-cloud-lightning</div>
</li>
<li>
<i class="icon feather icon-cloud-drizzle"></i>
<div class="name">cloud-drizzle</div>
<div class="fontclass">.icon-cloud-drizzle</div>
</li>
<li>
<i class="icon feather icon-cloud-rain"></i>
<div class="name">cloud-rain</div>
<div class="fontclass">.icon-cloud-rain</div>
</li>
<li>
<i class="icon feather icon-cloud-off"></i>
<div class="name">cloud-off</div>
<div class="fontclass">.icon-cloud-off</div>
</li>
<li>
<i class="icon feather icon-codepen"></i>
<div class="name">codepen</div>
<div class="fontclass">.icon-codepen</div>
</li>
<li>
<i class="icon feather icon-cloud-snow"></i>
<div class="name">cloud-snow</div>
<div class="fontclass">.icon-cloud-snow</div>
</li>
<li>
<i class="icon feather icon-compass"></i>
<div class="name">compass</div>
<div class="fontclass">.icon-compass</div>
</li>
<li>
<i class="icon feather icon-copy"></i>
<div class="name">copy</div>
<div class="fontclass">.icon-copy</div>
</li>
<li>
<i class="icon feather icon-corner-down-right"></i>
<div class="name">corner-down-right</div>
<div class="fontclass">.icon-corner-down-right</div>
</li>
<li>
<i class="icon feather icon-corner-down-left"></i>
<div class="name">corner-down-left</div>
<div class="fontclass">.icon-corner-down-left</div>
</li>
<li>
<i class="icon feather icon-corner-left-down"></i>
<div class="name">corner-left-down</div>
<div class="fontclass">.icon-corner-left-down</div>
</li>
<li>
<i class="icon feather icon-corner-left-up"></i>
<div class="name">corner-left-up</div>
<div class="fontclass">.icon-corner-left-up</div>
</li>
<li>
<i class="icon feather icon-corner-up-left"></i>
<div class="name">corner-up-left</div>
<div class="fontclass">.icon-corner-up-left</div>
</li>
<li>
<i class="icon feather icon-corner-up-right"></i>
<div class="name">corner-up-right</div>
<div class="fontclass">.icon-corner-up-right</div>
</li>
<li>
<i class="icon feather icon-corner-right-down"></i>
<div class="name">corner-right-down</div>
<div class="fontclass">.icon-corner-right-down</div>
</li>
<li>
<i class="icon feather icon-corner-right-up"></i>
<div class="name">corner-right-up</div>
<div class="fontclass">.icon-corner-right-up</div>
</li>
<li>
<i class="icon feather icon-cpu"></i>
<div class="name">cpu</div>
<div class="fontclass">.icon-cpu</div>
</li>
<li>
<i class="icon feather icon-credit-card"></i>
<div class="name">credit-card</div>
<div class="fontclass">.icon-credit-card</div>
</li>
<li>
<i class="icon feather icon-crosshair"></i>
<div class="name">crosshair</div>
<div class="fontclass">.icon-crosshair</div>
</li>
<li>
<i class="icon feather icon-disc"></i>
<div class="name">disc</div>
<div class="fontclass">.icon-disc</div>
</li>
<li>
<i class="icon feather icon-delete"></i>
<div class="name">delete</div>
<div class="fontclass">.icon-delete</div>
</li>
<li>
<i class="icon feather icon-download-cloud"></i>
<div class="name">download-cloud</div>
<div class="fontclass">.icon-download-cloud</div>
</li>
<li>
<i class="icon feather icon-download"></i>
<div class="name">download</div>
<div class="fontclass">.icon-download</div>
</li>
<li>
<i class="icon feather icon-droplet"></i>
<div class="name">droplet</div>
<div class="fontclass">.icon-droplet</div>
</li>
<li>
<i class="icon feather icon-edit-2"></i>
<div class="name">edit-2</div>
<div class="fontclass">.icon-edit-</div>
</li>
<li>
<i class="icon feather icon-edit"></i>
<div class="name">edit</div>
<div class="fontclass">.icon-edit</div>
</li>
<li>
<i class="icon feather icon-edit-1"></i>
<div class="name">edit-3</div>
<div class="fontclass">.icon-edit-1</div>
</li>
<li>
<i class="icon feather icon-external-link"></i>
<div class="name">external-link</div>
<div class="fontclass">.icon-external-link</div>
</li>
<li>
<i class="icon feather icon-eye"></i>
<div class="name">eye</div>
<div class="fontclass">.icon-eye</div>
</li>
<li>
<i class="icon feather icon-feather"></i>
<div class="name">feather</div>
<div class="fontclass">.icon-feather</div>
</li>
<li>
<i class="icon feather icon-facebook"></i>
<div class="name">facebook</div>
<div class="fontclass">.icon-facebook</div>
</li>
<li>
<i class="icon feather icon-file-minus"></i>
<div class="name">file-minus</div>
<div class="fontclass">.icon-file-minus</div>
</li>
<li>
<i class="icon feather icon-eye-off"></i>
<div class="name">eye-off</div>
<div class="fontclass">.icon-eye-off</div>
</li>
<li>
<i class="icon feather icon-fast-forward"></i>
<div class="name">fast-forward</div>
<div class="fontclass">.icon-fast-forward</div>
</li>
<li>
<i class="icon feather icon-file-text"></i>
<div class="name">file-text</div>
<div class="fontclass">.icon-file-text</div>
</li>
<li>
<i class="icon feather icon-film"></i>
<div class="name">film</div>
<div class="fontclass">.icon-film</div>
</li>
<li>
<i class="icon feather icon-file"></i>
<div class="name">file</div>
<div class="fontclass">.icon-file</div>
</li>
<li>
<i class="icon feather icon-file-plus"></i>
<div class="name">file-plus</div>
<div class="fontclass">.icon-file-plus</div>
</li>
<li>
<i class="icon feather icon-folder"></i>
<div class="name">folder</div>
<div class="fontclass">.icon-folder</div>
</li>
<li>
<i class="icon feather icon-filter"></i>
<div class="name">filter</div>
<div class="fontclass">.icon-filter</div>
</li>
<li>
<i class="icon feather icon-flag"></i>
<div class="name">flag</div>
<div class="fontclass">.icon-flag</div>
</li>
<li>
<i class="icon feather icon-globe"></i>
<div class="name">globe</div>
<div class="fontclass">.icon-globe</div>
</li>
<li>
<i class="icon feather icon-grid"></i>
<div class="name">grid</div>
<div class="fontclass">.icon-grid</div>
</li>
<li>
<i class="icon feather icon-heart"></i>
<div class="name">heart</div>
<div class="fontclass">.icon-heart</div>
</li>
<li>
<i class="icon feather icon-home"></i>
<div class="name">home</div>
<div class="fontclass">.icon-home</div>
</li>
<li>
<i class="icon feather icon-github"></i>
<div class="name">github</div>
<div class="fontclass">.icon-github</div>
</li>
<li>
<i class="icon feather icon-image"></i>
<div class="name">image</div>
<div class="fontclass">.icon-image</div>
</li>
<li>
<i class="icon feather icon-inbox"></i>
<div class="name">inbox</div>
<div class="fontclass">.icon-inbox</div>
</li>
<li>
<i class="icon feather icon-layers"></i>
<div class="name">layers</div>
<div class="fontclass">.icon-layers</div>
</li>
<li>
<i class="icon feather icon-info"></i>
<div class="name">info</div>
<div class="fontclass">.icon-info</div>
</li>
<li>
<i class="icon feather icon-instagram"></i>
<div class="name">instagram</div>
<div class="fontclass">.icon-instagram</div>
</li>
<li>
<i class="icon feather icon-layout"></i>
<div class="name">layout</div>
<div class="fontclass">.icon-layout</div>
</li>
<li>
<i class="icon feather icon-link-2"></i>
<div class="name">link-2</div>
<div class="fontclass">.icon-link-</div>
</li>
<li>
<i class="icon feather icon-life-buoy"></i>
<div class="name">life-buoy</div>
<div class="fontclass">.icon-life-buoy</div>
</li>
<li>
<i class="icon feather icon-link"></i>
<div class="name">link</div>
<div class="fontclass">.icon-link</div>
</li>
<li>
<i class="icon feather icon-log-in"></i>
<div class="name">log-in</div>
<div class="fontclass">.icon-log-in</div>
</li>
<li>
<i class="icon feather icon-list"></i>
<div class="name">list</div>
<div class="fontclass">.icon-list</div>
</li>
<li>
<i class="icon feather icon-lock"></i>
<div class="name">lock</div>
<div class="fontclass">.icon-lock</div>
</li>
<li>
<i class="icon feather icon-log-out"></i>
<div class="name">log-out</div>
<div class="fontclass">.icon-log-out</div>
</li>
<li>
<i class="icon feather icon-loader"></i>
<div class="name">loader</div>
<div class="fontclass">.icon-loader</div>
</li>
<li>
<i class="icon feather icon-mail"></i>
<div class="name">mail</div>
<div class="fontclass">.icon-mail</div>
</li>
<li>
<i class="icon feather icon-maximize-2"></i>
<div class="name">maximize-2</div>
<div class="fontclass">.icon-maximize-2</div>
</li>
<li>
<i class="icon feather icon-map"></i>
<div class="name">map</div>
<div class="fontclass">.icon-map</div>
</li>
<li>
<i class="icon feather icon-maximize"></i>
<div class="name">maximize</div>
<div class="fontclass">.icon-maximize</div>
</li>
<li>
<i class="icon feather icon-map-pin"></i>
<div class="name">map-pin</div>
<div class="fontclass">.icon-map-pin</div>
</li>
<li>
<i class="icon feather icon-menu"></i>
<div class="name">menu</div>
<div class="fontclass">.icon-menu</div>
</li>
<li>
<i class="icon feather icon-message-circle"></i>
<div class="name">message-circle</div>
<div class="fontclass">.icon-message-circle</div>
</li>
<li>
<i class="icon feather icon-message-square"></i>
<div class="name">message-square</div>
<div class="fontclass">.icon-message-square</div>
</li>
<li>
<i class="icon feather icon-minimize-2"></i>
<div class="name">minimize-2</div>
<div class="fontclass">.icon-minimize-</div>
</li>
<li>
<i class="icon feather icon-minimize"></i>
<div class="name">minimize</div>
<div class="fontclass">.icon-minimize</div>
</li>
<li>
<i class="icon feather icon-mic-off"></i>
<div class="name">mic-off</div>
<div class="fontclass">.icon-mic-off</div>
</li>
<li>
<i class="icon feather icon-minus-circle"></i>
<div class="name">minus-circle</div>
<div class="fontclass">.icon-minus-circle</div>
</li>
<li>
<i class="icon feather icon-mic"></i>
<div class="name">mic</div>
<div class="fontclass">.icon-mic</div>
</li>
<li>
<i class="icon feather icon-minus-square"></i>
<div class="name">minus-square</div>
<div class="fontclass">.icon-minus-square</div>
</li>
<li>
<i class="icon feather icon-minus"></i>
<div class="name">minus</div>
<div class="fontclass">.icon-minus</div>
</li>
<li>
<i class="icon feather icon-moon"></i>
<div class="name">moon</div>
<div class="fontclass">.icon-moon</div>
</li>
<li>
<i class="icon feather icon-monitor"></i>
<div class="name">monitor</div>
<div class="fontclass">.icon-monitor</div>
</li>
<li>
<i class="icon feather icon-more-vertical"></i>
<div class="name">more-vertical</div>
<div class="fontclass">.icon-more-vertical</div>
</li>
<li>
<i class="icon feather icon-more-horizontal"></i>
<div class="name">more-horizontal</div>
<div class="fontclass">.icon-more-horizontal</div>
</li>
<li>
<i class="icon feather icon-move"></i>
<div class="name">move</div>
<div class="fontclass">.icon-move</div>
</li>
<li>
<i class="icon feather icon-music"></i>
<div class="name">music</div>
<div class="fontclass">.icon-music</div>
</li>
<li>
<i class="icon feather icon-navigation-2"></i>
<div class="name">navigation-2</div>
<div class="fontclass">.icon-navigation-</div>
</li>
<li>
<i class="icon feather icon-navigation"></i>
<div class="name">navigation</div>
<div class="fontclass">.icon-navigation</div>
</li>
<li>
<i class="icon feather icon-octagon"></i>
<div class="name">octagon</div>
<div class="fontclass">.icon-octagon</div>
</li>
<li>
<i class="icon feather icon-package"></i>
<div class="name">package</div>
<div class="fontclass">.icon-package</div>
</li>
<li>
<i class="icon feather icon-pause-circle"></i>
<div class="name">pause-circle</div>
<div class="fontclass">.icon-pause-circle</div>
</li>
<li>
<i class="icon feather icon-pause"></i>
<div class="name">pause</div>
<div class="fontclass">.icon-pause</div>
</li>
<li>
<i class="icon feather icon-percent"></i>
<div class="name">percent</div>
<div class="fontclass">.icon-percent</div>
</li>
<li>
<i class="icon feather icon-phone-call"></i>
<div class="name">phone-call</div>
<div class="fontclass">.icon-phone-call</div>
</li>
<li>
<i class="icon feather icon-phone-forwarded"></i>
<div class="name">phone-forwarded</div>
<div class="fontclass">.icon-phone-forwarded</div>
</li>
<li>
<i class="icon feather icon-phone-missed"></i>
<div class="name">phone-missed</div>
<div class="fontclass">.icon-phone-missed</div>
</li>
<li>
<i class="icon feather icon-phone-off"></i>
<div class="name">phone-off</div>
<div class="fontclass">.icon-phone-off</div>
</li>
<li>
<i class="icon feather icon-phone-incoming"></i>
<div class="name">phone-incoming</div>
<div class="fontclass">.icon-phone-incoming</div>
</li>
<li>
<i class="icon feather icon-phone"></i>
<div class="name">phone</div>
<div class="fontclass">.icon-phone</div>
</li>
<li>
<i class="icon feather icon-phone-outgoing"></i>
<div class="name">phone-outgoing</div>
<div class="fontclass">.icon-phone-outgoing</div>
</li>
<li>
<i class="icon feather icon-pie-chart"></i>
<div class="name">pie-chart</div>
<div class="fontclass">.icon-pie-chart</div>
</li>
<li>
<i class="icon feather icon-play-circle"></i>
<div class="name">play-circle</div>
<div class="fontclass">.icon-play-circle</div>
</li>
<li>
<i class="icon feather icon-play"></i>
<div class="name">play</div>
<div class="fontclass">.icon-play</div>
</li>
<li>
<i class="icon feather icon-plus-square"></i>
<div class="name">plus-square</div>
<div class="fontclass">.icon-plus-square</div>
</li>
<li>
<i class="icon feather icon-plus-circle"></i>
<div class="name">plus-circle</div>
<div class="fontclass">.icon-plus-circle</div>
</li>
<li>
<i class="icon feather icon-plus"></i>
<div class="name">plus</div>
<div class="fontclass">.icon-plus</div>
</li>
<li>
<i class="icon feather icon-pocket"></i>
<div class="name">pocket</div>
<div class="fontclass">.icon-pocket</div>
</li>
<li>
<i class="icon feather icon-printer"></i>
<div class="name">printer</div>
<div class="fontclass">.icon-printer</div>
</li>
<li>
<i class="icon feather icon-power"></i>
<div class="name">power</div>
<div class="fontclass">.icon-power</div>
</li>
<li>
<i class="icon feather icon-radio"></i>
<div class="name">radio</div>
<div class="fontclass">.icon-radio</div>
</li>
<li>
<i class="icon feather icon-repeat"></i>
<div class="name">repeat</div>
<div class="fontclass">.icon-repeat</div>
</li>
<li>
<i class="icon feather icon-refresh-ccw"></i>
<div class="name">refresh-ccw</div>
<div class="fontclass">.icon-refresh-ccw</div>
</li>
<li>
<i class="icon feather icon-rewind"></i>
<div class="name">rewind</div>
<div class="fontclass">.icon-rewind</div>
</li>
<li>
<i class="icon feather icon-rotate-ccw"></i>
<div class="name">rotate-ccw</div>
<div class="fontclass">.icon-rotate-ccw</div>
</li>
<li>
<i class="icon feather icon-refresh-cw"></i>
<div class="name">refresh-cw</div>
<div class="fontclass">.icon-refresh-cw</div>
</li>
<li>
<i class="icon feather icon-rotate-cw"></i>
<div class="name">rotate-cw</div>
<div class="fontclass">.icon-rotate-cw</div>
</li>
<li>
<i class="icon feather icon-save"></i>
<div class="name">save</div>
<div class="fontclass">.icon-save</div>
</li>
<li>
<i class="icon feather icon-search"></i>
<div class="name">search</div>
<div class="fontclass">.icon-search</div>
</li>
<li>
<i class="icon feather icon-server"></i>
<div class="name">server</div>
<div class="fontclass">.icon-server</div>
</li>
<li>
<i class="icon feather icon-scissors"></i>
<div class="name">scissors</div>
<div class="fontclass">.icon-scissors</div>
</li>
<li>
<i class="icon feather icon-share-2"></i>
<div class="name">share-2</div>
<div class="fontclass">.icon-share-</div>
</li>
<li>
<i class="icon feather icon-share"></i>
<div class="name">share</div>
<div class="fontclass">.icon-share</div>
</li>
<li>
<i class="icon feather icon-shield"></i>
<div class="name">shield</div>
<div class="fontclass">.icon-shield</div>
</li>
<li>
<i class="icon feather icon-settings"></i>
<div class="name">settings</div>
<div class="fontclass">.icon-settings</div>
</li>
<li>
<i class="icon feather icon-skip-back"></i>
<div class="name">skip-back</div>
<div class="fontclass">.icon-skip-back</div>
</li>
<li>
<i class="icon feather icon-shuffle"></i>
<div class="name">shuffle</div>
<div class="fontclass">.icon-shuffle</div>
</li>
<li>
<i class="icon feather icon-sidebar"></i>
<div class="name">sidebar</div>
<div class="fontclass">.icon-sidebar</div>
</li>
<li>
<i class="icon feather icon-skip-forward"></i>
<div class="name">skip-forward</div>
<div class="fontclass">.icon-skip-forward</div>
</li>
<li>
<i class="icon feather icon-slack"></i>
<div class="name">slack</div>
<div class="fontclass">.icon-slack</div>
</li>
<li>
<i class="icon feather icon-slash"></i>
<div class="name">slash</div>
<div class="fontclass">.icon-slash</div>
</li>
<li>
<i class="icon feather icon-smartphone"></i>
<div class="name">smartphone</div>
<div class="fontclass">.icon-smartphone</div>
</li>
<li>
<i class="icon feather icon-square"></i>
<div class="name">square</div>
<div class="fontclass">.icon-square</div>
</li>
<li>
<i class="icon feather icon-speaker"></i>
<div class="name">speaker</div>
<div class="fontclass">.icon-speaker</div>
</li>
<li>
<i class="icon feather icon-star"></i>
<div class="name">star</div>
<div class="fontclass">.icon-star</div>
</li>
<li>
<i class="icon feather icon-stop-circle"></i>
<div class="name">stop-circle</div>
<div class="fontclass">.icon-stop-circle</div>
</li>
<li>
<i class="icon feather icon-sun"></i>
<div class="name">sun</div>
<div class="fontclass">.icon-sun</div>
</li>
<li>
<i class="icon feather icon-sunrise"></i>
<div class="name">sunrise</div>
<div class="fontclass">.icon-sunrise</div>
</li>
<li>
<i class="icon feather icon-tablet"></i>
<div class="name">tablet</div>
<div class="fontclass">.icon-tablet</div>
</li>
<li>
<i class="icon feather icon-tag"></i>
<div class="name">tag</div>
<div class="fontclass">.icon-tag</div>
</li>
<li>
<i class="icon feather icon-sunset"></i>
<div class="name">sunset</div>
<div class="fontclass">.icon-sunset</div>
</li>
<li>
<i class="icon feather icon-target"></i>
<div class="name">target</div>
<div class="fontclass">.icon-target</div>
</li>
<li>
<i class="icon feather icon-thermometer"></i>
<div class="name">thermometer</div>
<div class="fontclass">.icon-thermometer</div>
</li>
<li>
<i class="icon feather icon-thumbs-up"></i>
<div class="name">thumbs-up</div>
<div class="fontclass">.icon-thumbs-up</div>
</li>
<li>
<i class="icon feather icon-thumbs-down"></i>
<div class="name">thumbs-down</div>
<div class="fontclass">.icon-thumbs-down</div>
</li>
<li>
<i class="icon feather icon-toggle-left"></i>
<div class="name">toggle-left</div>
<div class="fontclass">.icon-toggle-left</div>
</li>
<li>
<i class="icon feather icon-toggle-right"></i>
<div class="name">toggle-right</div>
<div class="fontclass">.icon-toggle-right</div>
</li>
<li>
<i class="icon feather icon-trash-2"></i>
<div class="name">trash-2</div>
<div class="fontclass">.icon-trash-</div>
</li>
<li>
<i class="icon feather icon-trash"></i>
<div class="name">trash</div>
<div class="fontclass">.icon-trash</div>
</li>
<li>
<i class="icon feather icon-trending-up"></i>
<div class="name">trending-up</div>
<div class="fontclass">.icon-trending-up</div>
</li>
<li>
<i class="icon feather icon-trending-down"></i>
<div class="name">trending-down</div>
<div class="fontclass">.icon-trending-down</div>
</li>
<li>
<i class="icon feather icon-triangle"></i>
<div class="name">triangle</div>
<div class="fontclass">.icon-triangle</div>
</li>
<li>
<i class="icon feather icon-type"></i>
<div class="name">type</div>
<div class="fontclass">.icon-type</div>
</li>
<li>
<i class="icon feather icon-twitter"></i>
<div class="name">twitter</div>
<div class="fontclass">.icon-twitter</div>
</li>
<li>
<i class="icon feather icon-upload"></i>
<div class="name">upload</div>
<div class="fontclass">.icon-upload</div>
</li>
<li>
<i class="icon feather icon-umbrella"></i>
<div class="name">umbrella</div>
<div class="fontclass">.icon-umbrella</div>
</li>
<li>
<i class="icon feather icon-upload-cloud"></i>
<div class="name">upload-cloud</div>
<div class="fontclass">.icon-upload-cloud</div>
</li>
<li>
<i class="icon feather icon-unlock"></i>
<div class="name">unlock</div>
<div class="fontclass">.icon-unlock</div>
</li>
<li>
<i class="icon feather icon-user-check"></i>
<div class="name">user-check</div>
<div class="fontclass">.icon-user-check</div>
</li>
<li>
<i class="icon feather icon-user-minus"></i>
<div class="name">user-minus</div>
<div class="fontclass">.icon-user-minus</div>
</li>
<li>
<i class="icon feather icon-user-plus"></i>
<div class="name">user-plus</div>
<div class="fontclass">.icon-user-plus</div>
</li>
<li>
<i class="icon feather icon-user-x"></i>
<div class="name">user-x</div>
<div class="fontclass">.icon-user-x</div>
</li>
<li>
<i class="icon feather icon-user"></i>
<div class="name">user</div>
<div class="fontclass">.icon-user</div>
</li>
<li>
<i class="icon feather icon-users"></i>
<div class="name">users</div>
<div class="fontclass">.icon-users</div>
</li>
<li>
<i class="icon feather icon-video-off"></i>
<div class="name">video-off</div>
<div class="fontclass">.icon-video-off</div>
</li>
<li>
<i class="icon feather icon-video"></i>
<div class="name">video</div>
<div class="fontclass">.icon-video</div>
</li>
<li>
<i class="icon feather icon-voicemail"></i>
<div class="name">voicemail</div>
<div class="fontclass">.icon-voicemail</div>
</li>
<li>
<i class="icon feather icon-volume-x"></i>
<div class="name">volume-x</div>
<div class="fontclass">.icon-volume-x</div>
</li>
<li>
<i class="icon feather icon-volume-2"></i>
<div class="name">volume-1</div>
<div class="fontclass">.icon-volume-</div>
</li>
<li>
<i class="icon feather icon-volume-1"></i>
<div class="name">volume-2</div>
<div class="fontclass">.icon-volume-1</div>
</li>
<li>
<i class="icon feather icon-volume"></i>
<div class="name">volume</div>
<div class="fontclass">.icon-volume</div>
</li>
<li>
<i class="icon feather icon-watch"></i>
<div class="name">watch</div>
<div class="fontclass">.icon-watch</div>
</li>
<li>
<i class="icon feather icon-wifi"></i>
<div class="name">wifi</div>
<div class="fontclass">.icon-wifi</div>
</li>
<li>
<i class="icon feather icon-x-square"></i>
<div class="name">x-square</div>
<div class="fontclass">.icon-x-square</div>
</li>
<li>
<i class="icon feather icon-wind"></i>
<div class="name">wind</div>
<div class="fontclass">.icon-wind</div>
</li>
<li>
<i class="icon feather icon-x"></i>
<div class="name">x</div>
<div class="fontclass">.icon-x</div>
</li>
<li>
<i class="icon feather icon-x-circle"></i>
<div class="name">x-circle</div>
<div class="fontclass">.icon-x-circle</div>
</li>
<li>
<i class="icon feather icon-zap"></i>
<div class="name">zap</div>
<div class="fontclass">.icon-zap</div>
</li>
<li>
<i class="icon feather icon-zoom-in"></i>
<div class="name">zoom-in</div>
<div class="fontclass">.icon-zoom-in</div>
</li>
<li>
<i class="icon feather icon-zoom-out"></i>
<div class="name">zoom-out</div>
<div class="fontclass">.icon-zoom-out</div>
</li>
<li>
<i class="icon feather icon-command"></i>
<div class="name">command</div>
<div class="fontclass">.icon-command</div>
</li>
<li>
<i class="icon feather icon-cloud"></i>
<div class="name">cloud</div>
<div class="fontclass">.icon-cloud</div>
</li>
<li>
<i class="icon feather icon-hash"></i>
<div class="name">hash</div>
<div class="fontclass">.icon-hash</div>
</li>
<li>
<i class="icon feather icon-headphones"></i>
<div class="name">headphones</div>
<div class="fontclass">.icon-headphones</div>
</li>
<li>
<i class="icon feather icon-underline"></i>
<div class="name">underline</div>
<div class="fontclass">.icon-underline</div>
</li>
<li>
<i class="icon feather icon-italic"></i>
<div class="name">italic</div>
<div class="fontclass">.icon-italic</div>
</li>
<li>
<i class="icon feather icon-bold"></i>
<div class="name">bold</div>
<div class="fontclass">.icon-bold</div>
</li>
<li>
<i class="icon feather icon-crop"></i>
<div class="name">crop</div>
<div class="fontclass">.icon-crop</div>
</li>
<li>
<i class="icon feather icon-help-circle"></i>
<div class="name">help-circle</div>
<div class="fontclass">.icon-help-circle</div>
</li>
<li>
<i class="icon feather icon-paperclip"></i>
<div class="name">paperclip</div>
<div class="fontclass">.icon-paperclip</div>
</li>
<li>
<i class="icon feather icon-shopping-cart"></i>
<div class="name">shopping-cart</div>
<div class="fontclass">.icon-shopping-cart</div>
</li>
<li>
<i class="icon feather icon-tv"></i>
<div class="name">tv</div>
<div class="fontclass">.icon-tv</div>
</li>
<li>
<i class="icon feather icon-wifi-off"></i>
<div class="name">wifi-off</div>
<div class="fontclass">.icon-wifi-off</div>
</li>
<li>
<i class="icon feather icon-gitlab"></i>
<div class="name">gitlab</div>
<div class="fontclass">.icon-gitlab</div>
</li>
<li>
<i class="icon feather icon-sliders"></i>
<div class="name">sliders</div>
<div class="fontclass">.icon-sliders</div>
</li>
<li>
<i class="icon feather icon-star-on"></i>
<div class="name">star-on</div>
<div class="fontclass">.icon-star-on</div>
</li>
<li>
<i class="icon feather icon-heart-on"></i>
<div class="name">heart-on</div>
<div class="fontclass">.icon-heart-on</div>
</li>
<li>
<i class="icon feather icon-archive"></i>
<div class="name">archive</div>
<div class="fontclass">.icon-archive</div>
</li>
<li>
<i class="icon feather icon-arrow-down-circle"></i>
<div class="name">arrow-down-circle</div>
<div class="fontclass">.icon-arrow-down-circle</div>
</li>
<li>
<i class="icon feather icon-arrow-up-circle"></i>
<div class="name">arrow-up-circle</div>
<div class="fontclass">.icon-arrow-up-circle</div>
</li>
<li>
<i class="icon feather icon-arrow-left-circle"></i>
<div class="name">arrow-left-circle</div>
<div class="fontclass">.icon-arrow-left-circle</div>
</li>
<li>
<i class="icon feather icon-arrow-right-circle"></i>
<div class="name">arrow-right-circle</div>
<div class="fontclass">.icon-arrow-right-circle</div>
</li>
<li>
<i class="icon feather icon-bar-chart-line-"></i>
<div class="name">bar-chart-line-2</div>
<div class="fontclass">.icon-bar-chart-line-</div>
</li>
<li>
<i class="icon feather icon-bar-chart-line"></i>
<div class="name">bar-chart-line</div>
<div class="fontclass">.icon-bar-chart-line</div>
</li>
<li>
<i class="icon feather icon-book-open"></i>
<div class="name">book-open</div>
<div class="fontclass">.icon-book-open</div>
</li>
<li>
<i class="icon feather icon-code"></i>
<div class="name">code</div>
<div class="fontclass">.icon-code</div>
</li>
<li>
<i class="icon feather icon-database"></i>
<div class="name">database</div>
<div class="fontclass">.icon-database</div>
</li>
<li>
<i class="icon feather icon-dollar-sign"></i>
<div class="name">dollar-sign</div>
<div class="fontclass">.icon-dollar-sign</div>
</li>
<li>
<i class="icon feather icon-folder-plus"></i>
<div class="name">folder-plus</div>
<div class="fontclass">.icon-folder-plus</div>
</li>
<li>
<i class="icon feather icon-gift"></i>
<div class="name">gift</div>
<div class="fontclass">.icon-gift</div>
</li>
<li>
<i class="icon feather icon-folder-minus"></i>
<div class="name">folder-minus</div>
<div class="fontclass">.icon-folder-minus</div>
</li>
<li>
<i class="icon feather icon-git-commit"></i>
<div class="name">git-commit</div>
<div class="fontclass">.icon-git-commit</div>
</li>
<li>
<i class="icon feather icon-git-branch"></i>
<div class="name">git-branch</div>
<div class="fontclass">.icon-git-branch</div>
</li>
<li>
<i class="icon feather icon-git-pull-request"></i>
<div class="name">git-pull-request</div>
<div class="fontclass">.icon-git-pull-request</div>
</li>
<li>
<i class="icon feather icon-git-merge"></i>
<div class="name">git-merge</div>
<div class="fontclass">.icon-git-merge</div>
</li>
<li>
<i class="icon feather icon-linkedin"></i>
<div class="name">linkedin</div>
<div class="fontclass">.icon-linkedin</div>
</li>
<li>
<i class="icon feather icon-hard-drive"></i>
<div class="name">hard-drive</div>
<div class="fontclass">.icon-hard-drive</div>
</li>
<li>
<i class="icon feather icon-more-vertical-"></i>
<div class="name">more-vertical-2</div>
<div class="fontclass">.icon-more-vertical-</div>
</li>
<li>
<i class="icon feather icon-more-horizontal-"></i>
<div class="name">more-horizontal-2</div>
<div class="fontclass">.icon-more-horizontal-</div>
</li>
<li>
<i class="icon feather icon-rss"></i>
<div class="name">rss</div>
<div class="fontclass">.icon-rss</div>
</li>
<li>
<i class="icon feather icon-send"></i>
<div class="name">send</div>
<div class="fontclass">.icon-send</div>
</li>
<li>
<i class="icon feather icon-shield-off"></i>
<div class="name">shield-off</div>
<div class="fontclass">.icon-shield-off</div>
</li>
<li>
<i class="icon feather icon-shopping-bag"></i>
<div class="name">shopping-bag</div>
<div class="fontclass">.icon-shopping-bag</div>
</li>
<li>
<i class="icon feather icon-terminal"></i>
<div class="name">terminal</div>
<div class="fontclass">.icon-terminal</div>
</li>
<li>
<i class="icon feather icon-truck"></i>
<div class="name">truck</div>
<div class="fontclass">.icon-truck</div>
</li>
<li>
<i class="icon feather icon-zap-off"></i>
<div class="name">zap-off</div>
<div class="fontclass">.icon-zap-off</div>
</li>
<li>
<i class="icon feather icon-youtube"></i>
<div class="name">youtube</div>
<div class="fontclass">.icon-youtube</div>
</li>
</ul>
</div>
</body>
</html>