Mercurial > kallithea

changeset 7150:8bea04f3d6d3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fontello: add demo.html The demo.html file is very helpful to see what icons are available and what code and css class they have.
author domruf <dominikruf@gmail.com>
date Thu, 11 Jan 2018 15:50:07 +0100
parents 80acba885189
children cbfc29a4c363
files kallithea/public/fontello/demo.html
diffstat 1 files changed, 459 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/kallithea/public/fontello/demo.html	Thu Jan 11 15:50:07 2018 +0100
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html>
+  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <meta charset="UTF-8"><style>/*
+ * Bootstrap v2.2.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+a:hover,
+a:active {
+  outline: 0;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+button,
+input {
+  *overflow: visible;
+  line-height: normal;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333;
+  background-color: #fff;
+}
+a {
+  color: #08c;
+  text-decoration: none;
+}
+a:hover {
+  color: #005580;
+  text-decoration: underline;
+}
+.row {
+  margin-left: -20px;
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.row:after {
+  clear: both;
+}
+[class*="span"] {
+  float: left;
+  min-height: 1px;
+  margin-left: 20px;
+}
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+.span12 {
+  width: 940px;
+}
+.span11 {
+  width: 860px;
+}
+.span10 {
+  width: 780px;
+}
+.span9 {
+  width: 700px;
+}
+.span8 {
+  width: 620px;
+}
+.span7 {
+  width: 540px;
+}
+.span6 {
+  width: 460px;
+}
+.span5 {
+  width: 380px;
+}
+.span4 {
+  width: 300px;
+}
+.span3 {
+  width: 220px;
+}
+.span2 {
+  width: 140px;
+}
+.span1 {
+  width: 60px;
+}
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  *zoom: 1;
+}
+.container:before,
+.container:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.container:after {
+  clear: both;
+}
+p {
+  margin: 0 0 10px;
+}
+.lead {
+  margin-bottom: 20px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+}
+small {
+  font-size: 85%;
+}
+h1 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+h1 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999;
+}
+h1 {
+  line-height: 40px;
+}
+h1 {
+  font-size: 38.5px;
+}
+h1 small {
+  font-size: 24.5px;
+}
+body {
+  margin-top: 90px;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  margin-left: -480px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding-top: 10px;
+  z-index: 10;
+}
+.footer {
+  color: #ddd;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 20px;
+}
+.footer a {
+  color: #ccc;
+  text-decoration: underline;
+}
+.the-icons {
+  font-size: 14px;
+  line-height: 24px;
+}
+.switch {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  color: #666;
+}
+.switch input {
+  margin-right: 0.3em;
+}
+.codesOn .i-name {
+  display: none;
+}
+.codesOn .i-code {
+  display: inline;
+}
+.i-code {
+  display: none;
+}
+@font-face {
+      font-family: 'kallithea';
+      src: url('./font/kallithea.eot?61441093');
+      src: url('./font/kallithea.eot?61441093#iefix') format('embedded-opentype'),
+           url('./font/kallithea.woff?61441093') format('woff'),
+           url('./font/kallithea.ttf?61441093') format('truetype'),
+           url('./font/kallithea.svg?61441093#kallithea') format('svg');
+      font-weight: normal;
+      font-style: normal;
+    }
+     
+     
+    .demo-icon
+    {
+      font-family: "kallithea";
+      font-style: normal;
+      font-weight: normal;
+      speak: none;
+     
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      margin-right: .2em;
+      text-align: center;
+      /* opacity: .8; */
+     
+      /* For safety - reset parent styles, that can break glyph codes*/
+      font-variant: normal;
+      text-transform: none;
+     
+      /* fix buttons height, for twitter bootstrap */
+      line-height: 1em;
+     
+      /* Animation center compensation - margins should be symmetric */
+      /* remove if not needed */
+      margin-left: .2em;
+     
+      /* You can be more comfortable with increased icons size */
+      /* font-size: 120%; */
+     
+      /* Font smoothing. That was taken from TWBS */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+     
+      /* Uncomment for 3D effect */
+      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+     </style>
+    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/kallithea-ie7.css"><![endif]-->
+    <script>
+      function toggleCodes(on) {
+        var obj = document.getElementById('icons');
+      
+        if (on) {
+          obj.className += ' codesOn';
+        } else {
+          obj.className = obj.className.replace(' codesOn', '');
+        }
+      }
+      
+    </script>
+  </head>
+  <body>
+    <div class="container header">
+      <h1>
+        kallithea
+         <small>font demo</small>
+      </h1>
+      <label class="switch">
+        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
+      </label>
+    </div>
+    <div id="icons" class="container">
+      <div class="row">
+        <div title="Code: 0x2022" class="the-icons span3"><i class="demo-icon icon-circle">&#x2022;</i> <span class="i-name">icon-circle</span><span class="i-code">0x2022</span></div>
+        <div title="Code: 0x2190" class="the-icons span3"><i class="demo-icon icon-right-open">&#x2190;</i> <span class="i-name">icon-right-open</span><span class="i-code">0x2190</span></div>
+        <div title="Code: 0x2191" class="the-icons span3"><i class="demo-icon icon-up-open">&#x2191;</i> <span class="i-name">icon-up-open</span><span class="i-code">0x2191</span></div>
+        <div title="Code: 0x2192" class="the-icons span3"><i class="demo-icon icon-left-open">&#x2192;</i> <span class="i-name">icon-left-open</span><span class="i-code">0x2192</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x2193" class="the-icons span3"><i class="demo-icon icon-down-open">&#x2193;</i> <span class="i-name">icon-down-open</span><span class="i-code">0x2193</span></div>
+        <div title="Code: 0x2194" class="the-icons span3"><i class="demo-icon icon-code">&#x2194;</i> <span class="i-name">icon-code</span><span class="i-code">0x2194</span></div>
+        <div title="Code: 0x2195" class="the-icons span3"><i class="demo-icon icon-sort">&#x2195;</i> <span class="i-name">icon-sort</span><span class="i-code">0x2195</span></div>
+        <div title="Code: 0x21c4" class="the-icons span3"><i class="demo-icon icon-exchange">&#x21c4;</i> <span class="i-name">icon-exchange</span><span class="i-code">0x21c4</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x2295" class="the-icons span3"><i class="demo-icon icon-plus-circled">&#x2295;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0x2295</span></div>
+        <div title="Code: 0x2296" class="the-icons span3"><i class="demo-icon icon-minus-circled">&#x2296;</i> <span class="i-name">icon-minus-circled</span><span class="i-code">0x2296</span></div>
+        <div title="Code: 0x229e" class="the-icons span3"><i class="demo-icon icon-diff-added">&#x229e;</i> <span class="i-name">icon-diff-added</span><span class="i-code">0x229e</span></div>
+        <div title="Code: 0x229f" class="the-icons span3"><i class="demo-icon icon-diff-removed">&#x229f;</i> <span class="i-name">icon-diff-removed</span><span class="i-code">0x229f</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x22a1" class="the-icons span3"><i class="demo-icon icon-diff-modified">&#x22a1;</i> <span class="i-name">icon-diff-modified</span><span class="i-code">0x22a1</span></div>
+        <div title="Code: 0x231a" class="the-icons span3"><i class="demo-icon icon-clock">&#x231a;</i> <span class="i-name">icon-clock</span><span class="i-code">0x231a</span></div>
+        <div title="Code: 0x23f4" class="the-icons span3"><i class="demo-icon icon-triangle-left">&#x23f4;</i> <span class="i-name">icon-triangle-left</span><span class="i-code">0x23f4</span></div>
+        <div title="Code: 0x23f5" class="the-icons span3"><i class="demo-icon icon-triangle-right">&#x23f5;</i> <span class="i-name">icon-triangle-right</span><span class="i-code">0x23f5</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x23f6" class="the-icons span3"><i class="demo-icon icon-triangle-up">&#x23f6;</i> <span class="i-name">icon-triangle-up</span><span class="i-code">0x23f6</span></div>
+        <div title="Code: 0x23f7" class="the-icons span3"><i class="demo-icon icon-triangle-down">&#x23f7;</i> <span class="i-name">icon-triangle-down</span><span class="i-code">0x23f7</span></div>
+        <div title="Code: 0x25e6" class="the-icons span3"><i class="demo-icon icon-circle-empty">&#x25e6;</i> <span class="i-name">icon-circle-empty</span><span class="i-code">0x25e6</span></div>
+        <div title="Code: 0x2661" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#x2661;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0x2661</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x2665" class="the-icons span3"><i class="demo-icon icon-heart">&#x2665;</i> <span class="i-name">icon-heart</span><span class="i-code">0x2665</span></div>
+        <div title="Code: 0x2699" class="the-icons span3"><i class="demo-icon icon-cog-alt">&#x2699;</i> <span class="i-name">icon-cog-alt</span><span class="i-code">0x2699</span></div>
+        <div title="Code: 0x26c3" class="the-icons span3"><i class="demo-icon icon-database">&#x26c3;</i> <span class="i-name">icon-database</span><span class="i-code">0x26c3</span></div>
+        <div title="Code: 0x26ed" class="the-icons span3"><i class="demo-icon icon-gear">&#x26ed;</i> <span class="i-name">icon-gear</span><span class="i-code">0x26ed</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x2795" class="the-icons span3"><i class="demo-icon icon-plus">&#x2795;</i> <span class="i-name">icon-plus</span><span class="i-code">0x2795</span></div>
+        <div title="Code: 0x2796" class="the-icons span3"><i class="demo-icon icon-minus">&#x2796;</i> <span class="i-name">icon-minus</span><span class="i-code">0x2796</span></div>
+        <div title="Code: 0x2b65" class="the-icons span3"><i class="demo-icon icon-resize-vertical">&#x2b65;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0x2b65</span></div>
+        <div title="Code: 0x2b71" class="the-icons span3"><i class="demo-icon icon-move-up">&#x2b71;</i> <span class="i-name">icon-move-up</span><span class="i-code">0x2b71</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x2b73" class="the-icons span3"><i class="demo-icon icon-move-down">&#x2b73;</i> <span class="i-name">icon-move-down</span><span class="i-code">0x2b73</span></div>
+        <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-file-submodule">&#xe801;</i> <span class="i-name">icon-file-submodule</span><span class="i-code">0xe801</span></div>
+        <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-git-merge">&#xe802;</i> <span class="i-name">icon-git-merge</span><span class="i-code">0xe802</span></div>
+        <div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-ruler">&#xe811;</i> <span class="i-name">icon-ruler</span><span class="i-code">0xe811</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-download-cloud">&#xe813;</i> <span class="i-name">icon-download-cloud</span><span class="i-code">0xe813</span></div>
+        <div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-upload-cloud">&#xe814;</i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe814</span></div>
+        <div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-graph">&#xe815;</i> <span class="i-name">icon-graph</span><span class="i-code">0xe815</span></div>
+        <div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-file-zip">&#xe816;</i> <span class="i-name">icon-file-zip</span><span class="i-code">0xe816</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-file-code">&#xe81a;</i> <span class="i-name">icon-file-code</span><span class="i-code">0xe81a</span></div>
+        <div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-doc-text-inv">&#xe81c;</i> <span class="i-name">icon-doc-text-inv</span><span class="i-code">0xe81c</span></div>
+        <div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-diff">&#xe81d;</i> <span class="i-name">icon-diff</span><span class="i-code">0xe81d</span></div>
+        <div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-diff-ignored">&#xe81e;</i> <span class="i-name">icon-diff-ignored</span><span class="i-code">0xe81e</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-diff-renamed">&#xe81f;</i> <span class="i-name">icon-diff-renamed</span><span class="i-code">0xe81f</span></div>
+        <div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-paste">&#xe820;</i> <span class="i-name">icon-paste</span><span class="i-code">0xe820</span></div>
+        <div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-file-directory">&#xe823;</i> <span class="i-name">icon-file-directory</span><span class="i-code">0xe823</span></div>
+        <div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-git-compare">&#xe824;</i> <span class="i-name">icon-git-compare</span><span class="i-code">0xe824</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-git-pull-request">&#xe825;</i> <span class="i-name">icon-git-pull-request</span><span class="i-code">0xe825</span></div>
+        <div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-repo-forked">&#xe827;</i> <span class="i-name">icon-repo-forked</span><span class="i-code">0xe827</span></div>
+        <div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-fork">&#xe828;</i> <span class="i-name">icon-fork</span><span class="i-code">0xe828</span></div>
+        <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-docs">&#xe834;</i> <span class="i-name">icon-docs</span><span class="i-code">0xe834</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-doc-inv">&#xe836;</i> <span class="i-name">icon-doc-inv</span><span class="i-code">0xe836</span></div>
+        <div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-file-powerpoint">&#xe837;</i> <span class="i-name">icon-file-powerpoint</span><span class="i-code">0xe837</span></div>
+        <div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-tags">&#xe83d;</i> <span class="i-name">icon-tags</span><span class="i-code">0xe83d</span></div>
+        <div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-bookmark-empty">&#xe83f;</i> <span class="i-name">icon-bookmark-empty</span><span class="i-code">0xe83f</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-bookmark">&#xe840;</i> <span class="i-name">icon-bookmark</span><span class="i-code">0xe840</span></div>
+        <div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-align-left">&#xe841;</i> <span class="i-name">icon-align-left</span><span class="i-code">0xe841</span></div>
+        <div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-sliders">&#xe843;</i> <span class="i-name">icon-sliders</span><span class="i-code">0xe843</span></div>
+        <div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe851;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe851</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe855" class="the-icons span3"><i class="demo-icon icon-rss">&#xe855;</i> <span class="i-name">icon-rss</span><span class="i-code">0xe855</span></div>
+        <div title="Code: 0xe856" class="the-icons span3"><i class="demo-icon icon-rss-squared">&#xe856;</i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xe856</span></div>
+        <div title="Code: 0xe859" class="the-icons span3"><i class="demo-icon icon-strike">&#xe859;</i> <span class="i-name">icon-strike</span><span class="i-code">0xe859</span></div>
+        <div title="Code: 0xe85e" class="the-icons span3"><i class="demo-icon icon-box">&#xe85e;</i> <span class="i-name">icon-box</span><span class="i-code">0xe85e</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe85f" class="the-icons span3"><i class="demo-icon icon-right">&#xe85f;</i> <span class="i-name">icon-right</span><span class="i-code">0xe85f</span></div>
+        <div title="Code: 0xe860" class="the-icons span3"><i class="demo-icon icon-left">&#xe860;</i> <span class="i-name">icon-left</span><span class="i-code">0xe860</span></div>
+        <div title="Code: 0xe861" class="the-icons span3"><i class="demo-icon icon-left-circled">&#xe861;</i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe861</span></div>
+        <div title="Code: 0xe862" class="the-icons span3"><i class="demo-icon icon-right-circled">&#xe862;</i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe862</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe863" class="the-icons span3"><i class="demo-icon icon-up-circled">&#xe863;</i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe863</span></div>
+        <div title="Code: 0xe864" class="the-icons span3"><i class="demo-icon icon-up">&#xe864;</i> <span class="i-name">icon-up</span><span class="i-code">0xe864</span></div>
+        <div title="Code: 0xe865" class="the-icons span3"><i class="demo-icon icon-down">&#xe865;</i> <span class="i-name">icon-down</span><span class="i-code">0xe865</span></div>
+        <div title="Code: 0xe866" class="the-icons span3"><i class="demo-icon icon-down-circled">&#xe866;</i> <span class="i-name">icon-down-circled</span><span class="i-code">0xe866</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f30e" class="the-icons span3"><i class="demo-icon icon-globe">&#x1f30e;</i> <span class="i-name">icon-globe</span><span class="i-code">0x1f30e</span></div>
+        <div title="Code: 0x1f441" class="the-icons span3"><i class="demo-icon icon-eye">&#x1f441;</i> <span class="i-name">icon-eye</span><span class="i-code">0x1f441</span></div>
+        <div title="Code: 0x1f464" class="the-icons span3"><i class="demo-icon icon-user">&#x1f464;</i> <span class="i-name">icon-user</span><span class="i-code">0x1f464</span></div>
+        <div title="Code: 0x1f465" class="the-icons span3"><i class="demo-icon icon-users">&#x1f465;</i> <span class="i-name">icon-users</span><span class="i-code">0x1f465</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f4be" class="the-icons span3"><i class="demo-icon icon-floppy">&#x1f4be;</i> <span class="i-name">icon-floppy</span><span class="i-code">0x1f4be</span></div>
+        <div title="Code: 0x1f4c1" class="the-icons span3"><i class="demo-icon icon-folder-empty">&#x1f4c1;</i> <span class="i-name">icon-folder-empty</span><span class="i-code">0x1f4c1</span></div>
+        <div title="Code: 0x1f4c2" class="the-icons span3"><i class="demo-icon icon-folder-open-empty">&#x1f4c2;</i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0x1f4c2</span></div>
+        <div title="Code: 0x1f4cb" class="the-icons span3"><i class="demo-icon icon-clippy">&#x1f4cb;</i> <span class="i-name">icon-clippy</span><span class="i-code">0x1f4cb</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f4d2" class="the-icons span3"><i class="demo-icon icon-book">&#x1f4d2;</i> <span class="i-name">icon-book</span><span class="i-code">0x1f4d2</span></div>
+        <div title="Code: 0x1f50d" class="the-icons span3"><i class="demo-icon icon-search">&#x1f50d;</i> <span class="i-name">icon-search</span><span class="i-code">0x1f50d</span></div>
+        <div title="Code: 0x1f510" class="the-icons span3"><i class="demo-icon icon-keyhole-circled">&#x1f510;</i> <span class="i-name">icon-keyhole-circled</span><span class="i-code">0x1f510</span></div>
+        <div title="Code: 0x1f511" class="the-icons span3"><i class="demo-icon icon-key">&#x1f511;</i> <span class="i-name">icon-key</span><span class="i-code">0x1f511</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f512" class="the-icons span3"><i class="demo-icon icon-lock">&#x1f512;</i> <span class="i-name">icon-lock</span><span class="i-code">0x1f512</span></div>
+        <div title="Code: 0x1f513" class="the-icons span3"><i class="demo-icon icon-lock-open-alt">&#x1f513;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0x1f513</span></div>
+        <div title="Code: 0x1f516" class="the-icons span3"><i class="demo-icon icon-tag">&#x1f516;</i> <span class="i-name">icon-tag</span><span class="i-code">0x1f516</span></div>
+        <div title="Code: 0x1f527" class="the-icons span3"><i class="demo-icon icon-wrench">&#x1f527;</i> <span class="i-name">icon-wrench</span><span class="i-code">0x1f527</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f589" class="the-icons span3"><i class="demo-icon icon-pencil">&#x1f589;</i> <span class="i-name">icon-pencil</span><span class="i-code">0x1f589</span></div>
+        <div title="Code: 0x1f58a" class="the-icons span3"><i class="demo-icon icon-pencil-squared">&#x1f58a;</i> <span class="i-name">icon-pencil-squared</span><span class="i-code">0x1f58a</span></div>
+        <div title="Code: 0x1f58b" class="the-icons span3"><i class="demo-icon icon-edit">&#x1f58b;</i> <span class="i-name">icon-edit</span><span class="i-code">0x1f58b</span></div>
+        <div title="Code: 0x1f5c0" class="the-icons span3"><i class="demo-icon icon-folder">&#x1f5c0;</i> <span class="i-name">icon-folder</span><span class="i-code">0x1f5c0</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f5c1" class="the-icons span3"><i class="demo-icon icon-folder-open">&#x1f5c1;</i> <span class="i-name">icon-folder-open</span><span class="i-code">0x1f5c1</span></div>
+        <div title="Code: 0x1f5c5" class="the-icons span3"><i class="demo-icon icon-doc">&#x1f5c5;</i> <span class="i-name">icon-doc</span><span class="i-code">0x1f5c5</span></div>
+        <div title="Code: 0x1f5c8" class="the-icons span3"><i class="demo-icon icon-doc-text">&#x1f5c8;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0x1f5c8</span></div>
+        <div title="Code: 0x1f5d1" class="the-icons span3"><i class="demo-icon icon-trashcan">&#x1f5d1;</i> <span class="i-name">icon-trashcan</span><span class="i-code">0x1f5d1</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f5d8" class="the-icons span3"><i class="demo-icon icon-arrows-cw">&#x1f5d8;</i> <span class="i-name">icon-arrows-cw</span><span class="i-code">0x1f5d8</span></div>
+        <div title="Code: 0x1f5e9" class="the-icons span3"><i class="demo-icon icon-comment">&#x1f5e9;</i> <span class="i-name">icon-comment</span><span class="i-code">0x1f5e9</span></div>
+        <div title="Code: 0x1f5ea" class="the-icons span3"><i class="demo-icon icon-comment-discussion">&#x1f5ea;</i> <span class="i-name">icon-comment-discussion</span><span class="i-code">0x1f5ea</span></div>
+        <div title="Code: 0x1f5f4" class="the-icons span3"><i class="demo-icon icon-cancel">&#x1f5f4;</i> <span class="i-name">icon-cancel</span><span class="i-code">0x1f5f4</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f5f5" class="the-icons span3"><i class="demo-icon icon-cancel-circled">&#x1f5f5;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0x1f5f5</span></div>
+        <div title="Code: 0x1f5f8" class="the-icons span3"><i class="demo-icon icon-ok">&#x1f5f8;</i> <span class="i-name">icon-ok</span><span class="i-code">0x1f5f8</span></div>
+        <div title="Code: 0x1f5f9" class="the-icons span3"><i class="demo-icon icon-ok-circled">&#x1f5f9;</i> <span class="i-name">icon-ok-circled</span><span class="i-code">0x1f5f9</span></div>
+        <div title="Code: 0x1f6ab" class="the-icons span3"><i class="demo-icon icon-block">&#x1f6ab;</i> <span class="i-name">icon-block</span><span class="i-code">0x1f6ab</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0x1f6e0" class="the-icons span3"><i class="demo-icon icon-tools">&#x1f6e0;</i> <span class="i-name">icon-tools</span><span class="i-code">0x1f6e0</span></div>
+      </div>
+    </div>
+    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
+  </body>
+</html>
\ No newline at end of file