    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;!--[if lt IE 9]&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;//html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;style&gt;
    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: &quot;Helvetica Neue&quot;, 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: &quot;&quot;;
      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: &quot;&quot;;
      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: &#039;mhfontello&#039;;
      src: url(&#039;./font/mhfontello.eot?17211507&#039;);
      src: url(&#039;./font/mhfontello.eot?17211507#iefix&#039;) format(&#039;embedded-opentype&#039;),
           url(&#039;./font/mhfontello.woff?17211507&#039;) format(&#039;woff&#039;),
           url(&#039;./font/mhfontello.ttf?17211507&#039;) format(&#039;truetype&#039;),
           url(&#039;./font/mhfontello.svg?17211507#mhfontello&#039;) format(&#039;svg&#039;);
      font-weight: normal;
      font-style: normal;
    }
    .demo-icon {
      font-family: &quot;mhfontello&quot;;
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      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); */
    }
    &lt;/style&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/animation.css&quot;&gt;&lt;!--[if IE 7]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/&quot; + font.fontname + &quot;-ie7.css&quot;&gt;&lt;![endif]--&gt;
    &lt;script&gt;
      function toggleCodes(on) {
        var obj = document.getElementById(&#039;icons&#039;);
      
        if (on) {
          obj.className += &#039; codesOn&#039;;
        } else {
          obj.className = obj.className.replace(&#039; codesOn&#039;, &#039;&#039;);
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;container header&quot;&gt;
      &lt;h1&gt;mhfontello &lt;small&gt;font demo&lt;/small&gt;&lt;/h1&gt;
      &lt;label class=&quot;switch&quot;&gt;
        &lt;input type=&quot;checkbox&quot; onclick=&quot;toggleCodes(this.checked)&quot;&gt;show codes
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container&quot; id=&quot;icons&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe800&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-download&quot;&gt;&amp;#xe800;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-download&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe800&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe801&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-mail&quot;&gt;&amp;#xe801;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-mail&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe801&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe802&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-heart&quot;&gt;&amp;#xe802;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-heart&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe802&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe803&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-link&quot;&gt;&amp;#xe803;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-link&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe803&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe804&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-thumbs-up&quot;&gt;&amp;#xe804;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-thumbs-up&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe804&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe805&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-search&quot;&gt;&amp;#xe805;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-search&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe805&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe806&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-cancel&quot;&gt;&amp;#xe806;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-cancel&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe806&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe807&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-plus&quot;&gt;&amp;#xe807;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-plus&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe807&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe808&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-forward&quot;&gt;&amp;#xe808;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-forward&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe808&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe809&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-zoom-in&quot;&gt;&amp;#xe809;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-zoom-in&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe809&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80a&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-right-open&quot;&gt;&amp;#xe80a;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-right-open&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80a&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80b&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-left-open&quot;&gt;&amp;#xe80b;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-left-open&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80b&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80c&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-close&quot;&gt;&amp;#xe80c;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-close&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80c&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80d&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-ok&quot;&gt;&amp;#xe80d;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-ok&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80d&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80e&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-right&quot;&gt;&amp;#xe80e;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-right&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80e&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe80f&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-left&quot;&gt;&amp;#xe80f;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-left&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe80f&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe810&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-play&quot;&gt;&amp;#xe810;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-play&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe810&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe811&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-pause&quot;&gt;&amp;#xe811;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-pause&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe811&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe812&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-eye&quot;&gt;&amp;#xe812;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-eye&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe812&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe813&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-camera&quot;&gt;&amp;#xe813;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-camera&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe813&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe814&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-play-1&quot;&gt;&amp;#xe814;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-play-1&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe814&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe815&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-pause-1&quot;&gt;&amp;#xe815;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-pause-1&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe815&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe816&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-stop&quot;&gt;&amp;#xe816;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-stop&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe816&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe817&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-to-start-alt&quot;&gt;&amp;#xe817;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-to-start-alt&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe817&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe818&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-to-end-alt&quot;&gt;&amp;#xe818;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-to-end-alt&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe818&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe819&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-fast-bw&quot;&gt;&amp;#xe819;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-fast-bw&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe819&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81a&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-fast-fw&quot;&gt;&amp;#xe81a;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-fast-fw&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81a&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81b&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-to-start&quot;&gt;&amp;#xe81b;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-to-start&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81b&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81c&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-to-end&quot;&gt;&amp;#xe81c;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-to-end&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81c&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81d&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-ccw&quot;&gt;&amp;#xe81d;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-ccw&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81d&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81e&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-arrows-cw&quot;&gt;&amp;#xe81e;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-arrows-cw&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81e&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe81f&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-shuffle&quot;&gt;&amp;#xe81f;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-shuffle&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe81f&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe820&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-cw&quot;&gt;&amp;#xe820;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-cw&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe820&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe821&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-volume-off&quot;&gt;&amp;#xe821;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-volume-off&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe821&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe822&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-volume-up&quot;&gt;&amp;#xe822;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-volume-up&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe822&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe823&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-volume-down&quot;&gt;&amp;#xe823;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-volume-down&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe823&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe830&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin1 animate-spin&quot;&gt;&amp;#xe830;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin1&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe830&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe831&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin2 animate-spin&quot;&gt;&amp;#xe831;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin2&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe831&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe832&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin3 animate-spin&quot;&gt;&amp;#xe832;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin3&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe832&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe834&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin4 animate-spin&quot;&gt;&amp;#xe834;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin4&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe834&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe838&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin5 animate-spin&quot;&gt;&amp;#xe838;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin5&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe838&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xe839&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-spin6 animate-spin&quot;&gt;&amp;#xe839;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-spin6&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xe839&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf00a&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-th-thumb&quot;&gt;&amp;#xf00a;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-th-thumb&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf00a&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf08e&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-link-ext&quot;&gt;&amp;#xf08e;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-link-ext&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf08e&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf099&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-twitter&quot;&gt;&amp;#xf099;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-twitter&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf099&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf09a&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-facebook&quot;&gt;&amp;#xf09a;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-facebook&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf09a&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf0b2&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-resize-full-alt&quot;&gt;&amp;#xf0b2;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-resize-full-alt&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf0b2&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf0d5&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-gplus&quot;&gt;&amp;#xf0d5;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-gplus&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf0d5&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf0e1&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-linkedin&quot;&gt;&amp;#xf0e1;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-linkedin&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf0e1&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf0e5&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-comment&quot;&gt;&amp;#xf0e5;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-comment&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf0e5&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf0ec&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-exchange&quot;&gt;&amp;#xf0ec;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-exchange&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf0ec&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf16a&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-youtube&quot;&gt;&amp;#xf16a;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-youtube&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf16a&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf16b&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-dropbox&quot;&gt;&amp;#xf16b;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-dropbox&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf16b&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf16d&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-instagram&quot;&gt;&amp;#xf16d;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-instagram&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf16d&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf16e&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-flickr&quot;&gt;&amp;#xf16e;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-flickr&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf16e&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf173&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-tumblr&quot;&gt;&amp;#xf173;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-tumblr&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf173&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf17d&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-dribbble&quot;&gt;&amp;#xf17d;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-dribbble&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf17d&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf17e&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-skype&quot;&gt;&amp;#xf17e;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-skype&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf17e&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf194&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-vimeo&quot;&gt;&amp;#xf194;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-vimeo&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf194&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1a1&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-reddit&quot;&gt;&amp;#xf1a1;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-reddit&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1a1&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1a6&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-digg&quot;&gt;&amp;#xf1a6;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-digg&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1a6&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1ca&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-vine&quot;&gt;&amp;#xf1ca;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-vine&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1ca&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1d3&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-git&quot;&gt;&amp;#xf1d3;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-git&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1d3&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1d7&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-wechat&quot;&gt;&amp;#xf1d7;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-wechat&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1d7&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf1e0&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-share&quot;&gt;&amp;#xf1e0;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-share&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf1e0&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf231&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-pinterest&quot;&gt;&amp;#xf231;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-pinterest&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf231&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf232&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-whatsapp&quot;&gt;&amp;#xf232;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-whatsapp&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf232&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;span3&quot; title=&quot;Code: 0xf2c6&quot;&gt;
          &lt;i class=&quot;demo-icon mh-icon-telegram&quot;&gt;&amp;#xf2c6;&lt;/i&gt; &lt;span class=&quot;i-name&quot;&gt;mh-icon-telegram&lt;/span&gt;&lt;span class=&quot;i-code&quot;&gt;0xf2c6&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container footer&quot;&gt;Generated by &lt;a href=&quot;https://fontello.com&quot;&gt;fontello.com&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>        </div>
    </div>