diff fonts/fontello/demo.html @ 84:b0816cd750fa

fonts (icons): add "attach", "paper-plane-empty" and "eye" icons
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:43:55 +0200
parents d31fac1efcee
children 7575f644b20e
line wrap: on
line diff
--- a/fonts/fontello/demo.html	Tue Nov 30 23:43:32 2021 +0100
+++ b/fonts/fontello/demo.html	Wed Jun 28 10:43:55 2023 +0200
@@ -1,246 +1,160 @@
 <!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 {
+  <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>
+    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;
+    }
+    input {
+      margin: 0;
+      font-size: 100%;
+      vertical-align: middle;
+      *overflow: visible;
+      line-height: normal;
+    }
+    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;
+    }
+    .span3 {
+      float: left;
+      min-height: 1px;
+      margin-left: 20px;
+      width: 220px;
+    }
+    .container {
+      width: 940px;
+      margin-right: auto;
+      margin-left: auto;
+      *zoom: 1;
+    }
+    .container:before,
+    .container:after {
+      display: table;
+      content: "";
+      line-height: 0;
+    }
+    .container:after {
+      clear: both;
+    }
+    small {
+      font-size: 85%;
+    }
+    h1 {
+      margin: 10px 0;
+      font-family: inherit;
+      font-weight: bold;
+      line-height: 20px;
+      color: inherit;
+      text-rendering: optimizelegibility;
+      line-height: 40px;
+      font-size: 38.5px;
+    }
+    h1 small {
+      font-weight: normal;
+      line-height: 1;
+      color: #999;
+      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: 'fontello';
-      src: url('./font/fontello.eot?96750476');
-      src: url('./font/fontello.eot?96750476#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?96750476') format('woff'),
-           url('./font/fontello.ttf?96750476') format('truetype'),
-           url('./font/fontello.svg?96750476#fontello') format('svg');
+      src: url('./font/fontello.eot?26277375');
+      src: url('./font/fontello.eot?26277375#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?26277375') format('woff'),
+           url('./font/fontello.ttf?26277375') format('truetype'),
+           url('./font/fontello.svg?26277375#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
-     
-     
-    .demo-icon
-    {
+    .demo-icon {
       font-family: "fontello";
       font-style: normal;
       font-weight: normal;
@@ -274,7 +188,7 @@
       /* Uncomment for 3D effect */
       /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
     }
-     </style>
+    </style>
     <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
     <script>
       function toggleCodes(on) {
@@ -286,7 +200,6 @@
           obj.className = obj.className.replace(' codesOn', '');
         }
       }
-      
     </script>
   </head>
   <body>
@@ -298,118 +211,277 @@
     </div>
     <div class="container" id="icons">
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe744"><i class="demo-icon icon-loading animate-spin">&#xe744;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe744</span></div>
-        <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-doc">&#xe800;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span></div>
-        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-desktop">&#xe801;</i> <span class="i-name">icon-desktop</span><span class="i-code">0xe801</span></div>
-        <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-mobile">&#xe802;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe802</span></div>
+        <div class="span3" title="Code: 0xe744">
+          <i class="demo-icon icon-loading animate-spin">&#xe744;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe744</span>
+        </div>
+        <div class="span3" title="Code: 0xe800">
+          <i class="demo-icon icon-doc">&#xe800;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span>
+        </div>
+        <div class="span3" title="Code: 0xe801">
+          <i class="demo-icon icon-desktop">&#xe801;</i> <span class="i-name">icon-desktop</span><span class="i-code">0xe801</span>
+        </div>
+        <div class="span3" title="Code: 0xe802">
+          <i class="demo-icon icon-mobile">&#xe802;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe802</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-globe">&#xe803;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe803</span></div>
-        <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-terminal">&#xe804;</i> <span class="i-name">icon-terminal</span><span class="i-code">0xe804</span></div>
-        <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-blog">&#xe805;</i> <span class="i-name">icon-blog</span><span class="i-code">0xe805</span></div>
-        <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-clipboard">&#xe806;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe806</span></div>
+        <div class="span3" title="Code: 0xe803">
+          <i class="demo-icon icon-globe">&#xe803;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe803</span>
+        </div>
+        <div class="span3" title="Code: 0xe804">
+          <i class="demo-icon icon-terminal">&#xe804;</i> <span class="i-name">icon-terminal</span><span class="i-code">0xe804</span>
+        </div>
+        <div class="span3" title="Code: 0xe805">
+          <i class="demo-icon icon-blog">&#xe805;</i> <span class="i-name">icon-blog</span><span class="i-code">0xe805</span>
+        </div>
+        <div class="span3" title="Code: 0xe806">
+          <i class="demo-icon icon-clipboard">&#xe806;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe806</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-merge">&#xe807;</i> <span class="i-name">icon-merge</span><span class="i-code">0xe807</span></div>
-        <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-lock">&#xe808;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe808</span></div>
-        <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-lock-filled">&#xe809;</i> <span class="i-name">icon-lock-filled</span><span class="i-code">0xe809</span></div>
-        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-lock-open">&#xe80a;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe80a</span></div>
+        <div class="span3" title="Code: 0xe807">
+          <i class="demo-icon icon-merge">&#xe807;</i> <span class="i-name">icon-merge</span><span class="i-code">0xe807</span>
+        </div>
+        <div class="span3" title="Code: 0xe808">
+          <i class="demo-icon icon-lock">&#xe808;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe808</span>
+        </div>
+        <div class="span3" title="Code: 0xe809">
+          <i class="demo-icon icon-lock-filled">&#xe809;</i> <span class="i-name">icon-lock-filled</span><span class="i-code">0xe809</span>
+        </div>
+        <div class="span3" title="Code: 0xe80a">
+          <i class="demo-icon icon-lock-open">&#xe80a;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe80a</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-lock-open-filled">&#xe80b;</i> <span class="i-name">icon-lock-open-filled</span><span class="i-code">0xe80b</span></div>
-        <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-plus-circled">&#xe80c;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe80c</span></div>
-        <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-resize-vertical">&#xe80d;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80d</span></div>
-        <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-dot-3">&#xe80e;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe80e</span></div>
+        <div class="span3" title="Code: 0xe80b">
+          <i class="demo-icon icon-lock-open-filled">&#xe80b;</i> <span class="i-name">icon-lock-open-filled</span><span class="i-code">0xe80b</span>
+        </div>
+        <div class="span3" title="Code: 0xe80c">
+          <i class="demo-icon icon-plus-circled">&#xe80c;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe80c</span>
+        </div>
+        <div class="span3" title="Code: 0xe80d">
+          <i class="demo-icon icon-resize-vertical">&#xe80d;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80d</span>
+        </div>
+        <div class="span3" title="Code: 0xe80e">
+          <i class="demo-icon icon-dot-3">&#xe80e;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe80e</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-chat">&#xe80f;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe80f</span></div>
-        <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-exchange">&#xe810;</i> <span class="i-name">icon-exchange</span><span class="i-code">0xe810</span></div>
-        <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-wrench">&#xe811;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe811</span></div>
-        <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-pencil">&#xe812;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe812</span></div>
+        <div class="span3" title="Code: 0xe80f">
+          <i class="demo-icon icon-chat">&#xe80f;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe80f</span>
+        </div>
+        <div class="span3" title="Code: 0xe810">
+          <i class="demo-icon icon-exchange">&#xe810;</i> <span class="i-name">icon-exchange</span><span class="i-code">0xe810</span>
+        </div>
+        <div class="span3" title="Code: 0xe811">
+          <i class="demo-icon icon-wrench">&#xe811;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe811</span>
+        </div>
+        <div class="span3" title="Code: 0xe812">
+          <i class="demo-icon icon-pencil">&#xe812;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe812</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-signal">&#xe813;</i> <span class="i-name">icon-signal</span><span class="i-code">0xe813</span></div>
-        <div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-play">&#xe814;</i> <span class="i-name">icon-play</span><span class="i-code">0xe814</span></div>
-        <div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-video">&#xe815;</i> <span class="i-name">icon-video</span><span class="i-code">0xe815</span></div>
-        <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-stop">&#xe816;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe816</span></div>
+        <div class="span3" title="Code: 0xe813">
+          <i class="demo-icon icon-signal">&#xe813;</i> <span class="i-name">icon-signal</span><span class="i-code">0xe813</span>
+        </div>
+        <div class="span3" title="Code: 0xe814">
+          <i class="demo-icon icon-play">&#xe814;</i> <span class="i-name">icon-play</span><span class="i-code">0xe814</span>
+        </div>
+        <div class="span3" title="Code: 0xe815">
+          <i class="demo-icon icon-video">&#xe815;</i> <span class="i-name">icon-video</span><span class="i-code">0xe815</span>
+        </div>
+        <div class="span3" title="Code: 0xe816">
+          <i class="demo-icon icon-stop">&#xe816;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe816</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-pause">&#xe817;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe817</span></div>
-        <div class="the-icons span3" title="Code: 0xe818"><i class="demo-icon icon-fast-fw">&#xe818;</i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe818</span></div>
-        <div class="the-icons span3" title="Code: 0xe819"><i class="demo-icon icon-fast-bw">&#xe819;</i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe819</span></div>
-        <div class="the-icons span3" title="Code: 0xe81a"><i class="demo-icon icon-previous">&#xe81a;</i> <span class="i-name">icon-previous</span><span class="i-code">0xe81a</span></div>
+        <div class="span3" title="Code: 0xe817">
+          <i class="demo-icon icon-pause">&#xe817;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe817</span>
+        </div>
+        <div class="span3" title="Code: 0xe818">
+          <i class="demo-icon icon-fast-fw">&#xe818;</i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe818</span>
+        </div>
+        <div class="span3" title="Code: 0xe819">
+          <i class="demo-icon icon-fast-bw">&#xe819;</i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe819</span>
+        </div>
+        <div class="span3" title="Code: 0xe81a">
+          <i class="demo-icon icon-previous">&#xe81a;</i> <span class="i-name">icon-previous</span><span class="i-code">0xe81a</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe81b"><i class="demo-icon icon-next">&#xe81b;</i> <span class="i-name">icon-next</span><span class="i-code">0xe81b</span></div>
-        <div class="the-icons span3" title="Code: 0xe81c"><i class="demo-icon icon-warning">&#xe81c;</i> <span class="i-name">icon-warning</span><span class="i-code">0xe81c</span></div>
-        <div class="the-icons span3" title="Code: 0xe81d"><i class="demo-icon icon-info">&#xe81d;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81d</span></div>
-        <div class="the-icons span3" title="Code: 0xe81e"><i class="demo-icon icon-error">&#xe81e;</i> <span class="i-name">icon-error</span><span class="i-code">0xe81e</span></div>
+        <div class="span3" title="Code: 0xe81b">
+          <i class="demo-icon icon-next">&#xe81b;</i> <span class="i-name">icon-next</span><span class="i-code">0xe81b</span>
+        </div>
+        <div class="span3" title="Code: 0xe81c">
+          <i class="demo-icon icon-warning">&#xe81c;</i> <span class="i-name">icon-warning</span><span class="i-code">0xe81c</span>
+        </div>
+        <div class="span3" title="Code: 0xe81d">
+          <i class="demo-icon icon-info">&#xe81d;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81d</span>
+        </div>
+        <div class="span3" title="Code: 0xe81e">
+          <i class="demo-icon icon-error">&#xe81e;</i> <span class="i-name">icon-error</span><span class="i-code">0xe81e</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe81f"><i class="demo-icon icon-picture">&#xe81f;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe81f</span></div>
-        <div class="the-icons span3" title="Code: 0xe820"><i class="demo-icon icon-calendar">&#xe820;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe820</span></div>
-        <div class="the-icons span3" title="Code: 0xe821"><i class="demo-icon icon-heart-filled">&#xe821;</i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe821</span></div>
-        <div class="the-icons span3" title="Code: 0xe822"><i class="demo-icon icon-group">&#xe822;</i> <span class="i-name">icon-group</span><span class="i-code">0xe822</span></div>
+        <div class="span3" title="Code: 0xe81f">
+          <i class="demo-icon icon-picture">&#xe81f;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe81f</span>
+        </div>
+        <div class="span3" title="Code: 0xe820">
+          <i class="demo-icon icon-calendar">&#xe820;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe820</span>
+        </div>
+        <div class="span3" title="Code: 0xe821">
+          <i class="demo-icon icon-heart-filled">&#xe821;</i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe821</span>
+        </div>
+        <div class="span3" title="Code: 0xe822">
+          <i class="demo-icon icon-group">&#xe822;</i> <span class="i-name">icon-group</span><span class="i-code">0xe822</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe823"><i class="demo-icon icon-ok">&#xe823;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe823</span></div>
-        <div class="the-icons span3" title="Code: 0xe824"><i class="demo-icon icon-forward">&#xe824;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe824</span></div>
-        <div class="the-icons span3" title="Code: 0xe825"><i class="demo-icon icon-box">&#xe825;</i> <span class="i-name">icon-box</span><span class="i-code">0xe825</span></div>
-        <div class="the-icons span3" title="Code: 0xe826"><i class="demo-icon icon-feed">&#xe826;</i> <span class="i-name">icon-feed</span><span class="i-code">0xe826</span></div>
+        <div class="span3" title="Code: 0xe823">
+          <i class="demo-icon icon-ok">&#xe823;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe823</span>
+        </div>
+        <div class="span3" title="Code: 0xe824">
+          <i class="demo-icon icon-forward">&#xe824;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe824</span>
+        </div>
+        <div class="span3" title="Code: 0xe825">
+          <i class="demo-icon icon-box">&#xe825;</i> <span class="i-name">icon-box</span><span class="i-code">0xe825</span>
+        </div>
+        <div class="span3" title="Code: 0xe826">
+          <i class="demo-icon icon-feed">&#xe826;</i> <span class="i-name">icon-feed</span><span class="i-code">0xe826</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="span3" title="Code: 0xe827">
+          <i class="demo-icon icon-upload">&#xe827;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span>
+        </div>
+        <div class="span3" title="Code: 0xe828">
+          <i class="demo-icon icon-cancel-circled">&#xe828;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe828</span>
+        </div>
+        <div class="span3" title="Code: 0xe829">
+          <i class="demo-icon icon-loop-alt">&#xe829;</i> <span class="i-name">icon-loop-alt</span><span class="i-code">0xe829</span>
+        </div>
+        <div class="span3" title="Code: 0xe82a">
+          <i class="demo-icon icon-person">&#xe82a;</i> <span class="i-name">icon-person</span><span class="i-code">0xe82a</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe827"><i class="demo-icon icon-upload">&#xe827;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span></div>
-        <div class="the-icons span3" title="Code: 0xe828"><i class="demo-icon icon-cancel-circled">&#xe828;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe828</span></div>
-        <div class="the-icons span3" title="Code: 0xe829"><i class="demo-icon icon-loop-alt">&#xe829;</i> <span class="i-name">icon-loop-alt</span><span class="i-code">0xe829</span></div>
-        <div class="the-icons span3" title="Code: 0xe82a"><i class="demo-icon icon-person">&#xe82a;</i> <span class="i-name">icon-person</span><span class="i-code">0xe82a</span></div>
+        <div class="span3" title="Code: 0xe82b">
+          <i class="demo-icon icon-key">&#xe82b;</i> <span class="i-name">icon-key</span><span class="i-code">0xe82b</span>
+        </div>
+        <div class="span3" title="Code: 0xe82c">
+          <i class="demo-icon icon-mail">&#xe82c;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe82c</span>
+        </div>
+        <div class="span3" title="Code: 0xe82d">
+          <i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span>
+        </div>
+        <div class="span3" title="Code: 0xe82e">
+          <i class="demo-icon icon-trash-empty">&#xe82e;</i> <span class="i-name">icon-trash-empty</span><span class="i-code">0xe82e</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe82b"><i class="demo-icon icon-key">&#xe82b;</i> <span class="i-name">icon-key</span><span class="i-code">0xe82b</span></div>
-        <div class="the-icons span3" title="Code: 0xe82c"><i class="demo-icon icon-mail">&#xe82c;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe82c</span></div>
-        <div class="the-icons span3" title="Code: 0xe82d"><i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span></div>
-        <div class="the-icons span3" title="Code: 0xe82e"><i class="demo-icon icon-trash-empty">&#xe82e;</i> <span class="i-name">icon-trash-empty</span><span class="i-code">0xe82e</span></div>
+        <div class="span3" title="Code: 0xe82f">
+          <i class="demo-icon icon-volume-off">&#xe82f;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe82f</span>
+        </div>
+        <div class="span3" title="Code: 0xe830">
+          <i class="demo-icon icon-volume-up">&#xe830;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe830</span>
+        </div>
+        <div class="span3" title="Code: 0xe831">
+          <i class="demo-icon icon-resize-full">&#xe831;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe831</span>
+        </div>
+        <div class="span3" title="Code: 0xe832">
+          <i class="demo-icon icon-resize-small">&#xe832;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe832</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe82f"><i class="demo-icon icon-volume-off">&#xe82f;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe82f</span></div>
-        <div class="the-icons span3" title="Code: 0xe830"><i class="demo-icon icon-volume-up">&#xe830;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe830</span></div>
-        <div class="the-icons span3" title="Code: 0xe831"><i class="demo-icon icon-resize-full">&#xe831;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe831</span></div>
-        <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-resize-small">&#xe832;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe832</span></div>
+        <div class="span3" title="Code: 0xe833">
+          <i class="demo-icon icon-check">&#xe833;</i> <span class="i-name">icon-check</span><span class="i-code">0xe833</span>
+        </div>
+        <div class="span3" title="Code: 0xe834">
+          <i class="demo-icon icon-publish">&#xe834;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe834</span>
+        </div>
+        <div class="span3" title="Code: 0xe835">
+          <i class="demo-icon icon-attach">&#xe835;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe835</span>
+        </div>
+        <div class="span3" title="Code: 0xe836">
+          <i class="demo-icon icon-plus">&#xe836;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe836</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe833"><i class="demo-icon icon-check">&#xe833;</i> <span class="i-name">icon-check</span><span class="i-code">0xe833</span></div>
-        <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-publish">&#xe834;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe834</span></div>
-        <div class="the-icons span3" title="Code: 0xe836"><i class="demo-icon icon-plus">&#xe836;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe836</span></div>
-        <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-filled">&#xf0e0;</i> <span class="i-name">icon-mail-filled</span><span class="i-code">0xf0e0</span></div>
+        <div class="span3" title="Code: 0xe837">
+          <i class="demo-icon icon-eye">&#xe837;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe837</span>
+        </div>
+        <div class="span3" title="Code: 0xf0e0">
+          <i class="demo-icon icon-mail-filled">&#xf0e0;</i> <span class="i-name">icon-mail-filled</span><span class="i-code">0xf0e0</span>
+        </div>
+        <div class="span3" title="Code: 0xf0e5">
+          <i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span>
+        </div>
+        <div class="span3" title="Code: 0xf100">
+          <i class="demo-icon icon-angle-double-left">&#xf100;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xf100</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
-        <div class="the-icons span3" title="Code: 0xf100"><i class="demo-icon icon-angle-double-left">&#xf100;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xf100</span></div>
-        <div class="the-icons span3" title="Code: 0xf101"><i class="demo-icon icon-angle-double-right">&#xf101;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xf101</span></div>
-        <div class="the-icons span3" title="Code: 0xf115"><i class="demo-icon icon-folder-open-empty">&#xf115;</i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xf115</span></div>
+        <div class="span3" title="Code: 0xf101">
+          <i class="demo-icon icon-angle-double-right">&#xf101;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xf101</span>
+        </div>
+        <div class="span3" title="Code: 0xf115">
+          <i class="demo-icon icon-folder-open-empty">&#xf115;</i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xf115</span>
+        </div>
+        <div class="span3" title="Code: 0xf127">
+          <i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span>
+        </div>
+        <div class="span3" title="Code: 0xf132">
+          <i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf127"><i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span></div>
-        <div class="the-icons span3" title="Code: 0xf132"><i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span></div>
-        <div class="the-icons span3" title="Code: 0xf142"><i class="demo-icon icon-dot-3-vert">&#xf142;</i> <span class="i-name">icon-dot-3-vert</span><span class="i-code">0xf142</span></div>
-        <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
+        <div class="span3" title="Code: 0xf142">
+          <i class="demo-icon icon-dot-3-vert">&#xf142;</i> <span class="i-name">icon-dot-3-vert</span><span class="i-code">0xf142</span>
+        </div>
+        <div class="span3" title="Code: 0xf144">
+          <i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span>
+        </div>
+        <div class="span3" title="Code: 0xf148">
+          <i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span>
+        </div>
+        <div class="span3" title="Code: 0xf1c5">
+          <i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf148"><i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span></div>
-        <div class="the-icons span3" title="Code: 0xf1c5"><i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span></div>
-        <div class="the-icons span3" title="Code: 0xf1c7"><i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span></div>
-        <div class="the-icons span3" title="Code: 0xf1c8"><i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span></div>
+        <div class="span3" title="Code: 0xf1c7">
+          <i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span>
+        </div>
+        <div class="span3" title="Code: 0xf1c8">
+          <i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span>
+        </div>
+        <div class="span3" title="Code: 0xf1d9">
+          <i class="demo-icon icon-paper-plane-empty">&#xf1d9;</i> <span class="i-name">icon-paper-plane-empty</span><span class="i-code">0xf1d9</span>
+        </div>
+        <div class="span3" title="Code: 0xf1e0">
+          <i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf1e0"><i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span></div>
-        <div class="the-icons span3" title="Code: 0xf1e6"><i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span></div>
-        <div class="the-icons span3" title="Code: 0xf1fc"><i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span></div>
-        <div class="the-icons span3" title="Code: 0xf233"><i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span></div>
+        <div class="span3" title="Code: 0xf1e6">
+          <i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span>
+        </div>
+        <div class="span3" title="Code: 0xf1fc">
+          <i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span>
+        </div>
+        <div class="span3" title="Code: 0xf233">
+          <i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span>
+        </div>
+        <div class="span3" title="Code: 0xf291">
+          <i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span>
+        </div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf291"><i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span></div>
-        <div class="the-icons span3" title="Code: 0xf50d"><i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span></div>
+        <div class="span3" title="Code: 0xf50d">
+          <i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span>
+        </div>
       </div>
     </div>
     <div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div>
   </body>
-</html>
\ No newline at end of file
+</html>