typicons.font/src/font/demo.html

2501 lines
66 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typicons</title>
<style>
body {
margin: 0;
padding: 1em;
font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
color: #333;
background-color: #fff;
}
header {
position: fixed;
left: 1em;
right: 1em;
top: 0;
background: #fff;
z-index: 1;
}
header .container {
border-bottom: 1px solid #ddd;
}
header h1 {
font: inherit;
font-weight: bold;
margin-top: 1em;
}
header p {
color: #666;
max-width: 500px;
}
.container {
max-width: 784px;
margin: auto;
position: relative;
}
#icons {
font-size: 24px;
display: flex;
margin: 92px -8px 0;
flex-flow: row wrap;
}
.icon {
width: 200px;
max-width: 50%;
box-sizing: border-box;
display: flex;
padding: 8px;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-size: 12px;
font-family: Monaco, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 1px;
color: #666;
}
@media (max-width: 512px) {
#icons {
margin-top: 112px;
}
}
@charset "UTF-8";
@font-face {
font-family: "typicons";
src: url("typicons.eot?d8dd0dcd722b6c1a92302669f7f132b5?#iefix") format("embedded-opentype"),
url("typicons.woff2?d8dd0dcd722b6c1a92302669f7f132b5") format("woff2"),
url("typicons.woff?d8dd0dcd722b6c1a92302669f7f132b5") format("woff"),
url("typicons.ttf?d8dd0dcd722b6c1a92302669f7f132b5") format("truetype"),
url("typicons.svg?d8dd0dcd722b6c1a92302669f7f132b5#typicons") format("svg");
}
.typcn:before {
font-family: typicons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.typcn-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.typcn-2x {
font-size: 2em;
}
.typcn-3x {
font-size: 3em;
}
.typcn-4x {
font-size: 4em;
}
.typcn-5x {
font-size: 5em;
}
.typcn-adjust-brightness:before {
content: "\e000";
}
.typcn-adjust-contrast:before {
content: "\e001";
}
.typcn-anchor-outline:before {
content: "\e002";
}
.typcn-anchor:before {
content: "\e003";
}
.typcn-archive:before {
content: "\e004";
}
.typcn-arrow-back-outline:before {
content: "\e005";
}
.typcn-arrow-back:before {
content: "\e006";
}
.typcn-arrow-down-outline:before {
content: "\e007";
}
.typcn-arrow-down-thick:before {
content: "\e008";
}
.typcn-arrow-down:before {
content: "\e009";
}
.typcn-arrow-forward-outline:before {
content: "\e00a";
}
.typcn-arrow-forward:before {
content: "\e00b";
}
.typcn-arrow-left-outline:before {
content: "\e00c";
}
.typcn-arrow-left-thick:before {
content: "\e00d";
}
.typcn-arrow-left:before {
content: "\e00e";
}
.typcn-arrow-loop-outline:before {
content: "\e00f";
}
.typcn-arrow-loop:before {
content: "\e010";
}
.typcn-arrow-maximise-outline:before {
content: "\e011";
}
.typcn-arrow-maximise:before {
content: "\e012";
}
.typcn-arrow-minimise-outline:before {
content: "\e013";
}
.typcn-arrow-minimise:before {
content: "\e014";
}
.typcn-arrow-move-outline:before {
content: "\e015";
}
.typcn-arrow-move:before {
content: "\e016";
}
.typcn-arrow-repeat-outline:before {
content: "\e017";
}
.typcn-arrow-repeat:before {
content: "\e018";
}
.typcn-arrow-right-outline:before {
content: "\e019";
}
.typcn-arrow-right-thick:before {
content: "\e01a";
}
.typcn-arrow-right:before {
content: "\e01b";
}
.typcn-arrow-shuffle:before {
content: "\e01c";
}
.typcn-arrow-sorted-down:before {
content: "\e01d";
}
.typcn-arrow-sorted-up:before {
content: "\e01e";
}
.typcn-arrow-sync-outline:before {
content: "\e01f";
}
.typcn-arrow-sync:before {
content: "\e020";
}
.typcn-arrow-unsorted:before {
content: "\e021";
}
.typcn-arrow-up-outline:before {
content: "\e022";
}
.typcn-arrow-up-thick:before {
content: "\e023";
}
.typcn-arrow-up:before {
content: "\e024";
}
.typcn-at:before {
content: "\e025";
}
.typcn-attachment-outline:before {
content: "\e026";
}
.typcn-attachment:before {
content: "\e027";
}
.typcn-backspace-outline:before {
content: "\e028";
}
.typcn-backspace:before {
content: "\e029";
}
.typcn-battery-charge:before {
content: "\e02a";
}
.typcn-battery-full:before {
content: "\e02b";
}
.typcn-battery-high:before {
content: "\e02c";
}
.typcn-battery-low:before {
content: "\e02d";
}
.typcn-battery-mid:before {
content: "\e02e";
}
.typcn-beaker:before {
content: "\e02f";
}
.typcn-beer:before {
content: "\e030";
}
.typcn-bell:before {
content: "\e031";
}
.typcn-book:before {
content: "\e032";
}
.typcn-bookmark:before {
content: "\e033";
}
.typcn-briefcase:before {
content: "\e034";
}
.typcn-brush:before {
content: "\e035";
}
.typcn-business-card:before {
content: "\e036";
}
.typcn-calculator:before {
content: "\e037";
}
.typcn-calendar-outline:before {
content: "\e038";
}
.typcn-calendar:before {
content: "\e039";
}
.typcn-camera-outline:before {
content: "\e03a";
}
.typcn-camera:before {
content: "\e03b";
}
.typcn-cancel-outline:before {
content: "\e03c";
}
.typcn-cancel:before {
content: "\e03d";
}
.typcn-chart-area-outline:before {
content: "\e03e";
}
.typcn-chart-area:before {
content: "\e03f";
}
.typcn-chart-bar-outline:before {
content: "\e040";
}
.typcn-chart-bar:before {
content: "\e041";
}
.typcn-chart-line-outline:before {
content: "\e042";
}
.typcn-chart-line:before {
content: "\e043";
}
.typcn-chart-pie-outline:before {
content: "\e044";
}
.typcn-chart-pie:before {
content: "\e045";
}
.typcn-chevron-left-outline:before {
content: "\e046";
}
.typcn-chevron-left:before {
content: "\e047";
}
.typcn-chevron-right-outline:before {
content: "\e048";
}
.typcn-chevron-right:before {
content: "\e049";
}
.typcn-clipboard:before {
content: "\e04a";
}
.typcn-cloud-storage:before {
content: "\e04b";
}
.typcn-cloud-storage-outline:before {
content: "\e054";
}
.typcn-code-outline:before {
content: "\e04c";
}
.typcn-code:before {
content: "\e04d";
}
.typcn-coffee:before {
content: "\e04e";
}
.typcn-cog-outline:before {
content: "\e04f";
}
.typcn-cog:before {
content: "\e050";
}
.typcn-compass:before {
content: "\e051";
}
.typcn-contacts:before {
content: "\e052";
}
.typcn-credit-card:before {
content: "\e053";
}
.typcn-css3:before {
content: "\e055";
}
.typcn-database:before {
content: "\e056";
}
.typcn-delete-outline:before {
content: "\e057";
}
.typcn-delete:before {
content: "\e058";
}
.typcn-device-desktop:before {
content: "\e059";
}
.typcn-device-laptop:before {
content: "\e05a";
}
.typcn-device-phone:before {
content: "\e05b";
}
.typcn-device-tablet:before {
content: "\e05c";
}
.typcn-directions:before {
content: "\e05d";
}
.typcn-divide-outline:before {
content: "\e05e";
}
.typcn-divide:before {
content: "\e05f";
}
.typcn-document-add:before {
content: "\e060";
}
.typcn-document-delete:before {
content: "\e061";
}
.typcn-document-text:before {
content: "\e062";
}
.typcn-document:before {
content: "\e063";
}
.typcn-download-outline:before {
content: "\e064";
}
.typcn-download:before {
content: "\e065";
}
.typcn-dropbox:before {
content: "\e066";
}
.typcn-edit:before {
content: "\e067";
}
.typcn-eject-outline:before {
content: "\e068";
}
.typcn-eject:before {
content: "\e069";
}
.typcn-equals-outline:before {
content: "\e06a";
}
.typcn-equals:before {
content: "\e06b";
}
.typcn-export-outline:before {
content: "\e06c";
}
.typcn-export:before {
content: "\e06d";
}
.typcn-eye-outline:before {
content: "\e06e";
}
.typcn-eye:before {
content: "\e06f";
}
.typcn-feather:before {
content: "\e070";
}
.typcn-film:before {
content: "\e071";
}
.typcn-filter:before {
content: "\e072";
}
.typcn-flag-outline:before {
content: "\e073";
}
.typcn-flag:before {
content: "\e074";
}
.typcn-flash-outline:before {
content: "\e075";
}
.typcn-flash:before {
content: "\e076";
}
.typcn-flow-children:before {
content: "\e077";
}
.typcn-flow-merge:before {
content: "\e078";
}
.typcn-flow-parallel:before {
content: "\e079";
}
.typcn-flow-switch:before {
content: "\e07a";
}
.typcn-folder-add:before {
content: "\e07b";
}
.typcn-folder-delete:before {
content: "\e07c";
}
.typcn-folder-open:before {
content: "\e07d";
}
.typcn-folder:before {
content: "\e07e";
}
.typcn-gift:before {
content: "\e07f";
}
.typcn-globe-outline:before {
content: "\e080";
}
.typcn-globe:before {
content: "\e081";
}
.typcn-group-outline:before {
content: "\e082";
}
.typcn-group:before {
content: "\e083";
}
.typcn-headphones:before {
content: "\e084";
}
.typcn-heart-full-outline:before {
content: "\e085";
}
.typcn-heart-half-outline:before {
content: "\e086";
}
.typcn-heart-outline:before {
content: "\e087";
}
.typcn-heart:before {
content: "\e088";
}
.typcn-home-outline:before {
content: "\e089";
}
.typcn-home:before {
content: "\e08a";
}
.typcn-html5:before {
content: "\e08b";
}
.typcn-image-outline:before {
content: "\e08c";
}
.typcn-image:before {
content: "\e08d";
}
.typcn-infinity-outline:before {
content: "\e08e";
}
.typcn-infinity:before {
content: "\e08f";
}
.typcn-info-large-outline:before {
content: "\e090";
}
.typcn-info-large:before {
content: "\e091";
}
.typcn-info-outline:before {
content: "\e092";
}
.typcn-info:before {
content: "\e093";
}
.typcn-input-checked-outline:before {
content: "\e094";
}
.typcn-input-checked:before {
content: "\e095";
}
.typcn-key-outline:before {
content: "\e096";
}
.typcn-key:before {
content: "\e097";
}
.typcn-keyboard:before {
content: "\e098";
}
.typcn-leaf:before {
content: "\e099";
}
.typcn-lightbulb:before {
content: "\e09a";
}
.typcn-link-outline:before {
content: "\e09b";
}
.typcn-link:before {
content: "\e09c";
}
.typcn-location-arrow-outline:before {
content: "\e09d";
}
.typcn-location-arrow:before {
content: "\e09e";
}
.typcn-location-outline:before {
content: "\e09f";
}
.typcn-location:before {
content: "\e0a0";
}
.typcn-lock-closed-outline:before {
content: "\e0a1";
}
.typcn-lock-closed:before {
content: "\e0a2";
}
.typcn-lock-open-outline:before {
content: "\e0a3";
}
.typcn-lock-open:before {
content: "\e0a4";
}
.typcn-mail:before {
content: "\e0a5";
}
.typcn-map:before {
content: "\e0a6";
}
.typcn-media-eject-outline:before {
content: "\e0a7";
}
.typcn-media-eject:before {
content: "\e0a8";
}
.typcn-media-fast-forward-outline:before {
content: "\e0a9";
}
.typcn-media-fast-forward:before {
content: "\e0aa";
}
.typcn-media-pause-outline:before {
content: "\e0ab";
}
.typcn-media-pause:before {
content: "\e0ac";
}
.typcn-media-play-outline:before {
content: "\e0ad";
}
.typcn-media-play-reverse-outline:before {
content: "\e0ae";
}
.typcn-media-play-reverse:before {
content: "\e0af";
}
.typcn-media-play:before {
content: "\e0b0";
}
.typcn-media-record-outline:before {
content: "\e0b1";
}
.typcn-media-record:before {
content: "\e0b2";
}
.typcn-media-rewind-outline:before {
content: "\e0b3";
}
.typcn-media-rewind:before {
content: "\e0b4";
}
.typcn-media-stop-outline:before {
content: "\e0b5";
}
.typcn-media-stop:before {
content: "\e0b6";
}
.typcn-message-typing:before {
content: "\e0b7";
}
.typcn-message:before {
content: "\e0b8";
}
.typcn-messages:before {
content: "\e0b9";
}
.typcn-microphone-outline:before {
content: "\e0ba";
}
.typcn-microphone:before {
content: "\e0bb";
}
.typcn-minus-outline:before {
content: "\e0bc";
}
.typcn-minus:before {
content: "\e0bd";
}
.typcn-mortar-board:before {
content: "\e0be";
}
.typcn-news:before {
content: "\e0bf";
}
.typcn-notes-outline:before {
content: "\e0c0";
}
.typcn-notes:before {
content: "\e0c1";
}
.typcn-pen:before {
content: "\e0c2";
}
.typcn-pencil:before {
content: "\e0c3";
}
.typcn-phone-outline:before {
content: "\e0c4";
}
.typcn-phone:before {
content: "\e0c5";
}
.typcn-pi-outline:before {
content: "\e0c6";
}
.typcn-pi:before {
content: "\e0c7";
}
.typcn-pin-outline:before {
content: "\e0c8";
}
.typcn-pin:before {
content: "\e0c9";
}
.typcn-pipette:before {
content: "\e0ca";
}
.typcn-plane-outline:before {
content: "\e0cb";
}
.typcn-plane:before {
content: "\e0cc";
}
.typcn-plug:before {
content: "\e0cd";
}
.typcn-plus-outline:before {
content: "\e0ce";
}
.typcn-plus:before {
content: "\e0cf";
}
.typcn-point-of-interest-outline:before {
content: "\e0d0";
}
.typcn-point-of-interest:before {
content: "\e0d1";
}
.typcn-power-outline:before {
content: "\e0d2";
}
.typcn-power:before {
content: "\e0d3";
}
.typcn-printer:before {
content: "\e0d4";
}
.typcn-puzzle-outline:before {
content: "\e0d5";
}
.typcn-puzzle:before {
content: "\e0d6";
}
.typcn-radar-outline:before {
content: "\e0d7";
}
.typcn-radar:before {
content: "\e0d8";
}
.typcn-refresh-outline:before {
content: "\e0d9";
}
.typcn-refresh:before {
content: "\e0da";
}
.typcn-rss-outline:before {
content: "\e0db";
}
.typcn-rss:before {
content: "\e0dc";
}
.typcn-scissors-outline:before {
content: "\e0dd";
}
.typcn-scissors:before {
content: "\e0de";
}
.typcn-shopping-bag:before {
content: "\e0df";
}
.typcn-shopping-cart:before {
content: "\e0e0";
}
.typcn-social-at-circular:before {
content: "\e0e1";
}
.typcn-social-dribbble-circular:before {
content: "\e0e2";
}
.typcn-social-dribbble:before {
content: "\e0e3";
}
.typcn-social-facebook-circular:before {
content: "\e0e4";
}
.typcn-social-facebook:before {
content: "\e0e5";
}
.typcn-social-flickr-circular:before {
content: "\e0e6";
}
.typcn-social-flickr:before {
content: "\e0e7";
}
.typcn-social-github-circular:before {
content: "\e0e8";
}
.typcn-social-github:before {
content: "\e0e9";
}
.typcn-social-google-plus-circular:before {
content: "\e0ea";
}
.typcn-social-google-plus:before {
content: "\e0eb";
}
.typcn-social-instagram-circular:before {
content: "\e0ec";
}
.typcn-social-instagram:before {
content: "\e0ed";
}
.typcn-social-last-fm-circular:before {
content: "\e0ee";
}
.typcn-social-last-fm:before {
content: "\e0ef";
}
.typcn-social-linkedin-circular:before {
content: "\e0f0";
}
.typcn-social-linkedin:before {
content: "\e0f1";
}
.typcn-social-pinterest-circular:before {
content: "\e0f2";
}
.typcn-social-pinterest:before {
content: "\e0f3";
}
.typcn-social-skype-outline:before {
content: "\e0f4";
}
.typcn-social-skype:before {
content: "\e0f5";
}
.typcn-social-tumbler-circular:before {
content: "\e0f6";
}
.typcn-social-tumbler:before {
content: "\e0f7";
}
.typcn-social-twitter-circular:before {
content: "\e0f8";
}
.typcn-social-twitter:before {
content: "\e0f9";
}
.typcn-social-vimeo-circular:before {
content: "\e0fa";
}
.typcn-social-vimeo:before {
content: "\e0fb";
}
.typcn-social-youtube-circular:before {
content: "\e0fc";
}
.typcn-social-youtube:before {
content: "\e0fd";
}
.typcn-sort-alphabetically-outline:before {
content: "\e0fe";
}
.typcn-sort-alphabetically:before {
content: "\e0ff";
}
.typcn-sort-numerically-outline:before {
content: "\e100";
}
.typcn-sort-numerically:before {
content: "\e101";
}
.typcn-spanner-outline:before {
content: "\e102";
}
.typcn-spanner:before {
content: "\e103";
}
.typcn-spiral:before {
content: "\e104";
}
.typcn-star-full-outline:before {
content: "\e105";
}
.typcn-star-half-outline:before {
content: "\e106";
}
.typcn-star-half:before {
content: "\e107";
}
.typcn-star-outline:before {
content: "\e108";
}
.typcn-star:before {
content: "\e109";
}
.typcn-starburst-outline:before {
content: "\e10a";
}
.typcn-starburst:before {
content: "\e10b";
}
.typcn-stopwatch:before {
content: "\e10c";
}
.typcn-support:before {
content: "\e10d";
}
.typcn-tabs-outline:before {
content: "\e10e";
}
.typcn-tag:before {
content: "\e10f";
}
.typcn-tags:before {
content: "\e110";
}
.typcn-th-large-outline:before {
content: "\e111";
}
.typcn-th-large:before {
content: "\e112";
}
.typcn-th-list-outline:before {
content: "\e113";
}
.typcn-th-list:before {
content: "\e114";
}
.typcn-th-menu-outline:before {
content: "\e115";
}
.typcn-th-menu:before {
content: "\e116";
}
.typcn-th-small-outline:before {
content: "\e117";
}
.typcn-th-small:before {
content: "\e118";
}
.typcn-thermometer:before {
content: "\e119";
}
.typcn-thumbs-down:before {
content: "\e11a";
}
.typcn-thumbs-ok:before {
content: "\e11b";
}
.typcn-thumbs-up:before {
content: "\e11c";
}
.typcn-tick-outline:before {
content: "\e11d";
}
.typcn-tick:before {
content: "\e11e";
}
.typcn-ticket:before {
content: "\e11f";
}
.typcn-time:before {
content: "\e120";
}
.typcn-times-outline:before {
content: "\e121";
}
.typcn-times:before {
content: "\e122";
}
.typcn-trash:before {
content: "\e123";
}
.typcn-tree:before {
content: "\e124";
}
.typcn-upload-outline:before {
content: "\e125";
}
.typcn-upload:before {
content: "\e126";
}
.typcn-user-add-outline:before {
content: "\e127";
}
.typcn-user-add:before {
content: "\e128";
}
.typcn-user-delete-outline:before {
content: "\e129";
}
.typcn-user-delete:before {
content: "\e12a";
}
.typcn-user-outline:before {
content: "\e12b";
}
.typcn-user:before {
content: "\e12c";
}
.typcn-vendor-android:before {
content: "\e12d";
}
.typcn-vendor-apple:before {
content: "\e12e";
}
.typcn-vendor-microsoft:before {
content: "\e12f";
}
.typcn-video-outline:before {
content: "\e130";
}
.typcn-video:before {
content: "\e131";
}
.typcn-volume-down:before {
content: "\e132";
}
.typcn-volume-mute:before {
content: "\e133";
}
.typcn-volume-up:before {
content: "\e134";
}
.typcn-volume:before {
content: "\e135";
}
.typcn-warning-outline:before {
content: "\e136";
}
.typcn-warning:before {
content: "\e137";
}
.typcn-watch:before {
content: "\e138";
}
.typcn-waves-outline:before {
content: "\e139";
}
.typcn-waves:before {
content: "\e13a";
}
.typcn-weather-cloudy:before {
content: "\e13b";
}
.typcn-weather-downpour:before {
content: "\e13c";
}
.typcn-weather-night:before {
content: "\e13d";
}
.typcn-weather-partly-sunny:before {
content: "\e13e";
}
.typcn-weather-shower:before {
content: "\e13f";
}
.typcn-weather-snow:before {
content: "\e140";
}
.typcn-weather-stormy:before {
content: "\e141";
}
.typcn-weather-sunny:before {
content: "\e142";
}
.typcn-weather-windy-cloudy:before {
content: "\e143";
}
.typcn-weather-windy:before {
content: "\e144";
}
.typcn-wi-fi-outline:before {
content: "\e145";
}
.typcn-wi-fi:before {
content: "\e146";
}
.typcn-wine:before {
content: "\e147";
}
.typcn-world-outline:before {
content: "\e148";
}
.typcn-world:before {
content: "\e149";
}
.typcn-zoom-in-outline:before {
content: "\e14a";
}
.typcn-zoom-in:before {
content: "\e14b";
}
.typcn-zoom-out-outline:before {
content: "\e14c";
}
.typcn-zoom-out:before {
content: "\e14d";
}
.typcn-zoom-outline:before {
content: "\e14e";
}
.typcn-zoom:before {
content: "\e14f";
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Typicons &middot; v2.1.0</h1>
<p>Typicons are free-to-use vector icons embedded in a webfont for easy use in your user interfaces, whether it be on the web or in a native application.</p>
</div>
</header>
<div class="container">
<div id="icons">
<div class="icon">
<span class="typcn typcn-adjust-brightness"></span>
<span class='label'>adjust-brightness</span>
</div>
<div class="icon">
<span class="typcn typcn-adjust-contrast"></span>
<span class='label'>adjust-contrast</span>
</div>
<div class="icon">
<span class="typcn typcn-anchor-outline"></span>
<span class='label'>anchor-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-anchor"></span>
<span class='label'>anchor</span>
</div>
<div class="icon">
<span class="typcn typcn-archive"></span>
<span class='label'>archive</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-back-outline"></span>
<span class='label'>arrow-back-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-back"></span>
<span class='label'>arrow-back</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-down-outline"></span>
<span class='label'>arrow-down-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-down-thick"></span>
<span class='label'>arrow-down-thick</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-down"></span>
<span class='label'>arrow-down</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-forward-outline"></span>
<span class='label'>arrow-forward-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-forward"></span>
<span class='label'>arrow-forward</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-left-outline"></span>
<span class='label'>arrow-left-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-left-thick"></span>
<span class='label'>arrow-left-thick</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-left"></span>
<span class='label'>arrow-left</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-loop-outline"></span>
<span class='label'>arrow-loop-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-loop"></span>
<span class='label'>arrow-loop</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-maximise-outline"></span>
<span class='label'>arrow-maximise-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-maximise"></span>
<span class='label'>arrow-maximise</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-minimise-outline"></span>
<span class='label'>arrow-minimise-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-minimise"></span>
<span class='label'>arrow-minimise</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-move-outline"></span>
<span class='label'>arrow-move-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-move"></span>
<span class='label'>arrow-move</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-repeat-outline"></span>
<span class='label'>arrow-repeat-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-repeat"></span>
<span class='label'>arrow-repeat</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-right-outline"></span>
<span class='label'>arrow-right-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-right-thick"></span>
<span class='label'>arrow-right-thick</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-right"></span>
<span class='label'>arrow-right</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-shuffle"></span>
<span class='label'>arrow-shuffle</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-sorted-down"></span>
<span class='label'>arrow-sorted-down</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-sorted-up"></span>
<span class='label'>arrow-sorted-up</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-sync-outline"></span>
<span class='label'>arrow-sync-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-sync"></span>
<span class='label'>arrow-sync</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-unsorted"></span>
<span class='label'>arrow-unsorted</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-up-outline"></span>
<span class='label'>arrow-up-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-up-thick"></span>
<span class='label'>arrow-up-thick</span>
</div>
<div class="icon">
<span class="typcn typcn-arrow-up"></span>
<span class='label'>arrow-up</span>
</div>
<div class="icon">
<span class="typcn typcn-at"></span>
<span class='label'>at</span>
</div>
<div class="icon">
<span class="typcn typcn-attachment-outline"></span>
<span class='label'>attachment-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-attachment"></span>
<span class='label'>attachment</span>
</div>
<div class="icon">
<span class="typcn typcn-backspace-outline"></span>
<span class='label'>backspace-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-backspace"></span>
<span class='label'>backspace</span>
</div>
<div class="icon">
<span class="typcn typcn-battery-charge"></span>
<span class='label'>battery-charge</span>
</div>
<div class="icon">
<span class="typcn typcn-battery-full"></span>
<span class='label'>battery-full</span>
</div>
<div class="icon">
<span class="typcn typcn-battery-high"></span>
<span class='label'>battery-high</span>
</div>
<div class="icon">
<span class="typcn typcn-battery-low"></span>
<span class='label'>battery-low</span>
</div>
<div class="icon">
<span class="typcn typcn-battery-mid"></span>
<span class='label'>battery-mid</span>
</div>
<div class="icon">
<span class="typcn typcn-beaker"></span>
<span class='label'>beaker</span>
</div>
<div class="icon">
<span class="typcn typcn-beer"></span>
<span class='label'>beer</span>
</div>
<div class="icon">
<span class="typcn typcn-bell"></span>
<span class='label'>bell</span>
</div>
<div class="icon">
<span class="typcn typcn-book"></span>
<span class='label'>book</span>
</div>
<div class="icon">
<span class="typcn typcn-bookmark"></span>
<span class='label'>bookmark</span>
</div>
<div class="icon">
<span class="typcn typcn-briefcase"></span>
<span class='label'>briefcase</span>
</div>
<div class="icon">
<span class="typcn typcn-brush"></span>
<span class='label'>brush</span>
</div>
<div class="icon">
<span class="typcn typcn-business-card"></span>
<span class='label'>business-card</span>
</div>
<div class="icon">
<span class="typcn typcn-calculator"></span>
<span class='label'>calculator</span>
</div>
<div class="icon">
<span class="typcn typcn-calendar-outline"></span>
<span class='label'>calendar-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-calendar"></span>
<span class='label'>calendar</span>
</div>
<div class="icon">
<span class="typcn typcn-camera-outline"></span>
<span class='label'>camera-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-camera"></span>
<span class='label'>camera</span>
</div>
<div class="icon">
<span class="typcn typcn-cancel-outline"></span>
<span class='label'>cancel-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-cancel"></span>
<span class='label'>cancel</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-area-outline"></span>
<span class='label'>chart-area-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-area"></span>
<span class='label'>chart-area</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-bar-outline"></span>
<span class='label'>chart-bar-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-bar"></span>
<span class='label'>chart-bar</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-line-outline"></span>
<span class='label'>chart-line-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-line"></span>
<span class='label'>chart-line</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-pie-outline"></span>
<span class='label'>chart-pie-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chart-pie"></span>
<span class='label'>chart-pie</span>
</div>
<div class="icon">
<span class="typcn typcn-chevron-left-outline"></span>
<span class='label'>chevron-left-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chevron-left"></span>
<span class='label'>chevron-left</span>
</div>
<div class="icon">
<span class="typcn typcn-chevron-right-outline"></span>
<span class='label'>chevron-right-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-chevron-right"></span>
<span class='label'>chevron-right</span>
</div>
<div class="icon">
<span class="typcn typcn-clipboard"></span>
<span class='label'>clipboard</span>
</div>
<div class="icon">
<span class="typcn typcn-cloud-storage"></span>
<span class='label'>cloud-storage</span>
</div>
<div class="icon">
<span class="typcn typcn-cloud-storage-outline"></span>
<span class='label'>cloud-storage-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-code-outline"></span>
<span class='label'>code-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-code"></span>
<span class='label'>code</span>
</div>
<div class="icon">
<span class="typcn typcn-coffee"></span>
<span class='label'>coffee</span>
</div>
<div class="icon">
<span class="typcn typcn-cog-outline"></span>
<span class='label'>cog-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-cog"></span>
<span class='label'>cog</span>
</div>
<div class="icon">
<span class="typcn typcn-compass"></span>
<span class='label'>compass</span>
</div>
<div class="icon">
<span class="typcn typcn-contacts"></span>
<span class='label'>contacts</span>
</div>
<div class="icon">
<span class="typcn typcn-credit-card"></span>
<span class='label'>credit-card</span>
</div>
<div class="icon">
<span class="typcn typcn-css3"></span>
<span class='label'>css3</span>
</div>
<div class="icon">
<span class="typcn typcn-database"></span>
<span class='label'>database</span>
</div>
<div class="icon">
<span class="typcn typcn-delete-outline"></span>
<span class='label'>delete-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-delete"></span>
<span class='label'>delete</span>
</div>
<div class="icon">
<span class="typcn typcn-device-desktop"></span>
<span class='label'>device-desktop</span>
</div>
<div class="icon">
<span class="typcn typcn-device-laptop"></span>
<span class='label'>device-laptop</span>
</div>
<div class="icon">
<span class="typcn typcn-device-phone"></span>
<span class='label'>device-phone</span>
</div>
<div class="icon">
<span class="typcn typcn-device-tablet"></span>
<span class='label'>device-tablet</span>
</div>
<div class="icon">
<span class="typcn typcn-directions"></span>
<span class='label'>directions</span>
</div>
<div class="icon">
<span class="typcn typcn-divide-outline"></span>
<span class='label'>divide-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-divide"></span>
<span class='label'>divide</span>
</div>
<div class="icon">
<span class="typcn typcn-document-add"></span>
<span class='label'>document-add</span>
</div>
<div class="icon">
<span class="typcn typcn-document-delete"></span>
<span class='label'>document-delete</span>
</div>
<div class="icon">
<span class="typcn typcn-document-text"></span>
<span class='label'>document-text</span>
</div>
<div class="icon">
<span class="typcn typcn-document"></span>
<span class='label'>document</span>
</div>
<div class="icon">
<span class="typcn typcn-download-outline"></span>
<span class='label'>download-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-download"></span>
<span class='label'>download</span>
</div>
<div class="icon">
<span class="typcn typcn-dropbox"></span>
<span class='label'>dropbox</span>
</div>
<div class="icon">
<span class="typcn typcn-edit"></span>
<span class='label'>edit</span>
</div>
<div class="icon">
<span class="typcn typcn-eject-outline"></span>
<span class='label'>eject-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-eject"></span>
<span class='label'>eject</span>
</div>
<div class="icon">
<span class="typcn typcn-equals-outline"></span>
<span class='label'>equals-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-equals"></span>
<span class='label'>equals</span>
</div>
<div class="icon">
<span class="typcn typcn-export-outline"></span>
<span class='label'>export-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-export"></span>
<span class='label'>export</span>
</div>
<div class="icon">
<span class="typcn typcn-eye-outline"></span>
<span class='label'>eye-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-eye"></span>
<span class='label'>eye</span>
</div>
<div class="icon">
<span class="typcn typcn-feather"></span>
<span class='label'>feather</span>
</div>
<div class="icon">
<span class="typcn typcn-film"></span>
<span class='label'>film</span>
</div>
<div class="icon">
<span class="typcn typcn-filter"></span>
<span class='label'>filter</span>
</div>
<div class="icon">
<span class="typcn typcn-flag-outline"></span>
<span class='label'>flag-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-flag"></span>
<span class='label'>flag</span>
</div>
<div class="icon">
<span class="typcn typcn-flash-outline"></span>
<span class='label'>flash-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-flash"></span>
<span class='label'>flash</span>
</div>
<div class="icon">
<span class="typcn typcn-flow-children"></span>
<span class='label'>flow-children</span>
</div>
<div class="icon">
<span class="typcn typcn-flow-merge"></span>
<span class='label'>flow-merge</span>
</div>
<div class="icon">
<span class="typcn typcn-flow-parallel"></span>
<span class='label'>flow-parallel</span>
</div>
<div class="icon">
<span class="typcn typcn-flow-switch"></span>
<span class='label'>flow-switch</span>
</div>
<div class="icon">
<span class="typcn typcn-folder-add"></span>
<span class='label'>folder-add</span>
</div>
<div class="icon">
<span class="typcn typcn-folder-delete"></span>
<span class='label'>folder-delete</span>
</div>
<div class="icon">
<span class="typcn typcn-folder-open"></span>
<span class='label'>folder-open</span>
</div>
<div class="icon">
<span class="typcn typcn-folder"></span>
<span class='label'>folder</span>
</div>
<div class="icon">
<span class="typcn typcn-gift"></span>
<span class='label'>gift</span>
</div>
<div class="icon">
<span class="typcn typcn-globe-outline"></span>
<span class='label'>globe-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-globe"></span>
<span class='label'>globe</span>
</div>
<div class="icon">
<span class="typcn typcn-group-outline"></span>
<span class='label'>group-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-group"></span>
<span class='label'>group</span>
</div>
<div class="icon">
<span class="typcn typcn-headphones"></span>
<span class='label'>headphones</span>
</div>
<div class="icon">
<span class="typcn typcn-heart-full-outline"></span>
<span class='label'>heart-full-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-heart-half-outline"></span>
<span class='label'>heart-half-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-heart-outline"></span>
<span class='label'>heart-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-heart"></span>
<span class='label'>heart</span>
</div>
<div class="icon">
<span class="typcn typcn-home-outline"></span>
<span class='label'>home-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-home"></span>
<span class='label'>home</span>
</div>
<div class="icon">
<span class="typcn typcn-html5"></span>
<span class='label'>html5</span>
</div>
<div class="icon">
<span class="typcn typcn-image-outline"></span>
<span class='label'>image-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-image"></span>
<span class='label'>image</span>
</div>
<div class="icon">
<span class="typcn typcn-infinity-outline"></span>
<span class='label'>infinity-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-infinity"></span>
<span class='label'>infinity</span>
</div>
<div class="icon">
<span class="typcn typcn-info-large-outline"></span>
<span class='label'>info-large-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-info-large"></span>
<span class='label'>info-large</span>
</div>
<div class="icon">
<span class="typcn typcn-info-outline"></span>
<span class='label'>info-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-info"></span>
<span class='label'>info</span>
</div>
<div class="icon">
<span class="typcn typcn-input-checked-outline"></span>
<span class='label'>input-checked-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-input-checked"></span>
<span class='label'>input-checked</span>
</div>
<div class="icon">
<span class="typcn typcn-key-outline"></span>
<span class='label'>key-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-key"></span>
<span class='label'>key</span>
</div>
<div class="icon">
<span class="typcn typcn-keyboard"></span>
<span class='label'>keyboard</span>
</div>
<div class="icon">
<span class="typcn typcn-leaf"></span>
<span class='label'>leaf</span>
</div>
<div class="icon">
<span class="typcn typcn-lightbulb"></span>
<span class='label'>lightbulb</span>
</div>
<div class="icon">
<span class="typcn typcn-link-outline"></span>
<span class='label'>link-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-link"></span>
<span class='label'>link</span>
</div>
<div class="icon">
<span class="typcn typcn-location-arrow-outline"></span>
<span class='label'>location-arrow-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-location-arrow"></span>
<span class='label'>location-arrow</span>
</div>
<div class="icon">
<span class="typcn typcn-location-outline"></span>
<span class='label'>location-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-location"></span>
<span class='label'>location</span>
</div>
<div class="icon">
<span class="typcn typcn-lock-closed-outline"></span>
<span class='label'>lock-closed-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-lock-closed"></span>
<span class='label'>lock-closed</span>
</div>
<div class="icon">
<span class="typcn typcn-lock-open-outline"></span>
<span class='label'>lock-open-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-lock-open"></span>
<span class='label'>lock-open</span>
</div>
<div class="icon">
<span class="typcn typcn-mail"></span>
<span class='label'>mail</span>
</div>
<div class="icon">
<span class="typcn typcn-map"></span>
<span class='label'>map</span>
</div>
<div class="icon">
<span class="typcn typcn-media-eject-outline"></span>
<span class='label'>media-eject-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-eject"></span>
<span class='label'>media-eject</span>
</div>
<div class="icon">
<span class="typcn typcn-media-fast-forward-outline"></span>
<span class='label'>media-fast-forward-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-fast-forward"></span>
<span class='label'>media-fast-forward</span>
</div>
<div class="icon">
<span class="typcn typcn-media-pause-outline"></span>
<span class='label'>media-pause-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-pause"></span>
<span class='label'>media-pause</span>
</div>
<div class="icon">
<span class="typcn typcn-media-play-outline"></span>
<span class='label'>media-play-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-play-reverse-outline"></span>
<span class='label'>media-play-reverse-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-play-reverse"></span>
<span class='label'>media-play-reverse</span>
</div>
<div class="icon">
<span class="typcn typcn-media-play"></span>
<span class='label'>media-play</span>
</div>
<div class="icon">
<span class="typcn typcn-media-record-outline"></span>
<span class='label'>media-record-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-record"></span>
<span class='label'>media-record</span>
</div>
<div class="icon">
<span class="typcn typcn-media-rewind-outline"></span>
<span class='label'>media-rewind-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-rewind"></span>
<span class='label'>media-rewind</span>
</div>
<div class="icon">
<span class="typcn typcn-media-stop-outline"></span>
<span class='label'>media-stop-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-media-stop"></span>
<span class='label'>media-stop</span>
</div>
<div class="icon">
<span class="typcn typcn-message-typing"></span>
<span class='label'>message-typing</span>
</div>
<div class="icon">
<span class="typcn typcn-message"></span>
<span class='label'>message</span>
</div>
<div class="icon">
<span class="typcn typcn-messages"></span>
<span class='label'>messages</span>
</div>
<div class="icon">
<span class="typcn typcn-microphone-outline"></span>
<span class='label'>microphone-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-microphone"></span>
<span class='label'>microphone</span>
</div>
<div class="icon">
<span class="typcn typcn-minus-outline"></span>
<span class='label'>minus-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-minus"></span>
<span class='label'>minus</span>
</div>
<div class="icon">
<span class="typcn typcn-mortar-board"></span>
<span class='label'>mortar-board</span>
</div>
<div class="icon">
<span class="typcn typcn-news"></span>
<span class='label'>news</span>
</div>
<div class="icon">
<span class="typcn typcn-notes-outline"></span>
<span class='label'>notes-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-notes"></span>
<span class='label'>notes</span>
</div>
<div class="icon">
<span class="typcn typcn-pen"></span>
<span class='label'>pen</span>
</div>
<div class="icon">
<span class="typcn typcn-pencil"></span>
<span class='label'>pencil</span>
</div>
<div class="icon">
<span class="typcn typcn-phone-outline"></span>
<span class='label'>phone-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-phone"></span>
<span class='label'>phone</span>
</div>
<div class="icon">
<span class="typcn typcn-pi-outline"></span>
<span class='label'>pi-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-pi"></span>
<span class='label'>pi</span>
</div>
<div class="icon">
<span class="typcn typcn-pin-outline"></span>
<span class='label'>pin-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-pin"></span>
<span class='label'>pin</span>
</div>
<div class="icon">
<span class="typcn typcn-pipette"></span>
<span class='label'>pipette</span>
</div>
<div class="icon">
<span class="typcn typcn-plane-outline"></span>
<span class='label'>plane-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-plane"></span>
<span class='label'>plane</span>
</div>
<div class="icon">
<span class="typcn typcn-plug"></span>
<span class='label'>plug</span>
</div>
<div class="icon">
<span class="typcn typcn-plus-outline"></span>
<span class='label'>plus-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-plus"></span>
<span class='label'>plus</span>
</div>
<div class="icon">
<span class="typcn typcn-point-of-interest-outline"></span>
<span class='label'>point-of-interest-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-point-of-interest"></span>
<span class='label'>point-of-interest</span>
</div>
<div class="icon">
<span class="typcn typcn-power-outline"></span>
<span class='label'>power-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-power"></span>
<span class='label'>power</span>
</div>
<div class="icon">
<span class="typcn typcn-printer"></span>
<span class='label'>printer</span>
</div>
<div class="icon">
<span class="typcn typcn-puzzle-outline"></span>
<span class='label'>puzzle-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-puzzle"></span>
<span class='label'>puzzle</span>
</div>
<div class="icon">
<span class="typcn typcn-radar-outline"></span>
<span class='label'>radar-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-radar"></span>
<span class='label'>radar</span>
</div>
<div class="icon">
<span class="typcn typcn-refresh-outline"></span>
<span class='label'>refresh-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-refresh"></span>
<span class='label'>refresh</span>
</div>
<div class="icon">
<span class="typcn typcn-rss-outline"></span>
<span class='label'>rss-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-rss"></span>
<span class='label'>rss</span>
</div>
<div class="icon">
<span class="typcn typcn-scissors-outline"></span>
<span class='label'>scissors-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-scissors"></span>
<span class='label'>scissors</span>
</div>
<div class="icon">
<span class="typcn typcn-shopping-bag"></span>
<span class='label'>shopping-bag</span>
</div>
<div class="icon">
<span class="typcn typcn-shopping-cart"></span>
<span class='label'>shopping-cart</span>
</div>
<div class="icon">
<span class="typcn typcn-social-at-circular"></span>
<span class='label'>social-at-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-dribbble-circular"></span>
<span class='label'>social-dribbble-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-dribbble"></span>
<span class='label'>social-dribbble</span>
</div>
<div class="icon">
<span class="typcn typcn-social-facebook-circular"></span>
<span class='label'>social-facebook-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-facebook"></span>
<span class='label'>social-facebook</span>
</div>
<div class="icon">
<span class="typcn typcn-social-flickr-circular"></span>
<span class='label'>social-flickr-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-flickr"></span>
<span class='label'>social-flickr</span>
</div>
<div class="icon">
<span class="typcn typcn-social-github-circular"></span>
<span class='label'>social-github-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-github"></span>
<span class='label'>social-github</span>
</div>
<div class="icon">
<span class="typcn typcn-social-google-plus-circular"></span>
<span class='label'>social-google-plus-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-google-plus"></span>
<span class='label'>social-google-plus</span>
</div>
<div class="icon">
<span class="typcn typcn-social-instagram-circular"></span>
<span class='label'>social-instagram-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-instagram"></span>
<span class='label'>social-instagram</span>
</div>
<div class="icon">
<span class="typcn typcn-social-last-fm-circular"></span>
<span class='label'>social-last-fm-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-last-fm"></span>
<span class='label'>social-last-fm</span>
</div>
<div class="icon">
<span class="typcn typcn-social-linkedin-circular"></span>
<span class='label'>social-linkedin-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-linkedin"></span>
<span class='label'>social-linkedin</span>
</div>
<div class="icon">
<span class="typcn typcn-social-pinterest-circular"></span>
<span class='label'>social-pinterest-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-pinterest"></span>
<span class='label'>social-pinterest</span>
</div>
<div class="icon">
<span class="typcn typcn-social-skype-outline"></span>
<span class='label'>social-skype-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-social-skype"></span>
<span class='label'>social-skype</span>
</div>
<div class="icon">
<span class="typcn typcn-social-tumbler-circular"></span>
<span class='label'>social-tumbler-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-tumbler"></span>
<span class='label'>social-tumbler</span>
</div>
<div class="icon">
<span class="typcn typcn-social-twitter-circular"></span>
<span class='label'>social-twitter-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-twitter"></span>
<span class='label'>social-twitter</span>
</div>
<div class="icon">
<span class="typcn typcn-social-vimeo-circular"></span>
<span class='label'>social-vimeo-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-vimeo"></span>
<span class='label'>social-vimeo</span>
</div>
<div class="icon">
<span class="typcn typcn-social-youtube-circular"></span>
<span class='label'>social-youtube-circular</span>
</div>
<div class="icon">
<span class="typcn typcn-social-youtube"></span>
<span class='label'>social-youtube</span>
</div>
<div class="icon">
<span class="typcn typcn-sort-alphabetically-outline"></span>
<span class='label'>sort-alphabetically-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-sort-alphabetically"></span>
<span class='label'>sort-alphabetically</span>
</div>
<div class="icon">
<span class="typcn typcn-sort-numerically-outline"></span>
<span class='label'>sort-numerically-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-sort-numerically"></span>
<span class='label'>sort-numerically</span>
</div>
<div class="icon">
<span class="typcn typcn-spanner-outline"></span>
<span class='label'>spanner-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-spanner"></span>
<span class='label'>spanner</span>
</div>
<div class="icon">
<span class="typcn typcn-spiral"></span>
<span class='label'>spiral</span>
</div>
<div class="icon">
<span class="typcn typcn-star-full-outline"></span>
<span class='label'>star-full-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-star-half-outline"></span>
<span class='label'>star-half-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-star-half"></span>
<span class='label'>star-half</span>
</div>
<div class="icon">
<span class="typcn typcn-star-outline"></span>
<span class='label'>star-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-star"></span>
<span class='label'>star</span>
</div>
<div class="icon">
<span class="typcn typcn-starburst-outline"></span>
<span class='label'>starburst-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-starburst"></span>
<span class='label'>starburst</span>
</div>
<div class="icon">
<span class="typcn typcn-stopwatch"></span>
<span class='label'>stopwatch</span>
</div>
<div class="icon">
<span class="typcn typcn-support"></span>
<span class='label'>support</span>
</div>
<div class="icon">
<span class="typcn typcn-tabs-outline"></span>
<span class='label'>tabs-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-tag"></span>
<span class='label'>tag</span>
</div>
<div class="icon">
<span class="typcn typcn-tags"></span>
<span class='label'>tags</span>
</div>
<div class="icon">
<span class="typcn typcn-th-large-outline"></span>
<span class='label'>th-large-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-th-large"></span>
<span class='label'>th-large</span>
</div>
<div class="icon">
<span class="typcn typcn-th-list-outline"></span>
<span class='label'>th-list-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-th-list"></span>
<span class='label'>th-list</span>
</div>
<div class="icon">
<span class="typcn typcn-th-menu-outline"></span>
<span class='label'>th-menu-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-th-menu"></span>
<span class='label'>th-menu</span>
</div>
<div class="icon">
<span class="typcn typcn-th-small-outline"></span>
<span class='label'>th-small-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-th-small"></span>
<span class='label'>th-small</span>
</div>
<div class="icon">
<span class="typcn typcn-thermometer"></span>
<span class='label'>thermometer</span>
</div>
<div class="icon">
<span class="typcn typcn-thumbs-down"></span>
<span class='label'>thumbs-down</span>
</div>
<div class="icon">
<span class="typcn typcn-thumbs-ok"></span>
<span class='label'>thumbs-ok</span>
</div>
<div class="icon">
<span class="typcn typcn-thumbs-up"></span>
<span class='label'>thumbs-up</span>
</div>
<div class="icon">
<span class="typcn typcn-tick-outline"></span>
<span class='label'>tick-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-tick"></span>
<span class='label'>tick</span>
</div>
<div class="icon">
<span class="typcn typcn-ticket"></span>
<span class='label'>ticket</span>
</div>
<div class="icon">
<span class="typcn typcn-time"></span>
<span class='label'>time</span>
</div>
<div class="icon">
<span class="typcn typcn-times-outline"></span>
<span class='label'>times-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-times"></span>
<span class='label'>times</span>
</div>
<div class="icon">
<span class="typcn typcn-trash"></span>
<span class='label'>trash</span>
</div>
<div class="icon">
<span class="typcn typcn-tree"></span>
<span class='label'>tree</span>
</div>
<div class="icon">
<span class="typcn typcn-upload-outline"></span>
<span class='label'>upload-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-upload"></span>
<span class='label'>upload</span>
</div>
<div class="icon">
<span class="typcn typcn-user-add-outline"></span>
<span class='label'>user-add-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-user-add"></span>
<span class='label'>user-add</span>
</div>
<div class="icon">
<span class="typcn typcn-user-delete-outline"></span>
<span class='label'>user-delete-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-user-delete"></span>
<span class='label'>user-delete</span>
</div>
<div class="icon">
<span class="typcn typcn-user-outline"></span>
<span class='label'>user-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-user"></span>
<span class='label'>user</span>
</div>
<div class="icon">
<span class="typcn typcn-vendor-android"></span>
<span class='label'>vendor-android</span>
</div>
<div class="icon">
<span class="typcn typcn-vendor-apple"></span>
<span class='label'>vendor-apple</span>
</div>
<div class="icon">
<span class="typcn typcn-vendor-microsoft"></span>
<span class='label'>vendor-microsoft</span>
</div>
<div class="icon">
<span class="typcn typcn-video-outline"></span>
<span class='label'>video-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-video"></span>
<span class='label'>video</span>
</div>
<div class="icon">
<span class="typcn typcn-volume-down"></span>
<span class='label'>volume-down</span>
</div>
<div class="icon">
<span class="typcn typcn-volume-mute"></span>
<span class='label'>volume-mute</span>
</div>
<div class="icon">
<span class="typcn typcn-volume-up"></span>
<span class='label'>volume-up</span>
</div>
<div class="icon">
<span class="typcn typcn-volume"></span>
<span class='label'>volume</span>
</div>
<div class="icon">
<span class="typcn typcn-warning-outline"></span>
<span class='label'>warning-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-warning"></span>
<span class='label'>warning</span>
</div>
<div class="icon">
<span class="typcn typcn-watch"></span>
<span class='label'>watch</span>
</div>
<div class="icon">
<span class="typcn typcn-waves-outline"></span>
<span class='label'>waves-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-waves"></span>
<span class='label'>waves</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-cloudy"></span>
<span class='label'>weather-cloudy</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-downpour"></span>
<span class='label'>weather-downpour</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-night"></span>
<span class='label'>weather-night</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-partly-sunny"></span>
<span class='label'>weather-partly-sunny</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-shower"></span>
<span class='label'>weather-shower</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-snow"></span>
<span class='label'>weather-snow</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-stormy"></span>
<span class='label'>weather-stormy</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-sunny"></span>
<span class='label'>weather-sunny</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-windy-cloudy"></span>
<span class='label'>weather-windy-cloudy</span>
</div>
<div class="icon">
<span class="typcn typcn-weather-windy"></span>
<span class='label'>weather-windy</span>
</div>
<div class="icon">
<span class="typcn typcn-wi-fi-outline"></span>
<span class='label'>wi-fi-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-wi-fi"></span>
<span class='label'>wi-fi</span>
</div>
<div class="icon">
<span class="typcn typcn-wine"></span>
<span class='label'>wine</span>
</div>
<div class="icon">
<span class="typcn typcn-world-outline"></span>
<span class='label'>world-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-world"></span>
<span class='label'>world</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom-in-outline"></span>
<span class='label'>zoom-in-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom-in"></span>
<span class='label'>zoom-in</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom-out-outline"></span>
<span class='label'>zoom-out-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom-out"></span>
<span class='label'>zoom-out</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom-outline"></span>
<span class='label'>zoom-outline</span>
</div>
<div class="icon">
<span class="typcn typcn-zoom"></span>
<span class='label'>zoom</span>
</div>
</div>
</div>
<footer>
<div class="container">
<p>Created by
<a href="https://www.s-ings.com">
Stephen Hutchings
</a>
</p>
</div>
</footer>
</body>
</html>