Skip to content
Snippets Groups Projects
Select Git revision
  • a365b4fc0efa0fbd5a7048dbb75bbf7ade414214
  • master default protected
2 results

demo.html

Blame
  • demo.html 6.22 KiB
    <!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>
        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?86310400');
          src: url('./font/fontello.eot?86310400#iefix') format('embedded-opentype'),
               url('./font/fontello.woff?86310400') format('woff'),
               url('./font/fontello.ttf?86310400') format('truetype'),
               url('./font/fontello.svg?86310400#fontello') format('svg');
          font-weight: normal;
          font-style: normal;
        }
        .demo-icon {
          font-family: "fontello";
          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); */
        }
        </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) {
            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>fontello <small>font demo</small></h1>
          <label class="switch">
            <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
          </label>
        </div>
        <div class="container" id="icons">
          <div class="row">
            <div class="span3" title="Code: 0xe800">
              <i class="demo-icon icon-hammer">&#xe800;</i> <span class="i-name">icon-hammer</span><span class="i-code">0xe800</span>
            </div>
            <div class="span3" title="Code: 0xf09b">
              <i class="demo-icon icon-github-circled">&#xf09b;</i> <span class="i-name">icon-github-circled</span><span class="i-code">0xf09b</span>
            </div>
            <div class="span3" title="Code: 0xf0e0">
              <i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span>
            </div>
            <div class="span3" title="Code: 0xf143">
              <i class="demo-icon icon-rss-squared">&#xf143;</i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xf143</span>
            </div>
          </div>
          <div class="row">
            <div class="span3" title="Code: 0xf24e">
              <i class="demo-icon icon-balance-scale">&#xf24e;</i> <span class="i-name">icon-balance-scale</span><span class="i-code">0xf24e</span>
            </div>
            <div class="span3" title="Code: 0xf296">
              <i class="demo-icon icon-gitlab">&#xf296;</i> <span class="i-name">icon-gitlab</span><span class="i-code">0xf296</span>
            </div>
          </div>
        <div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div>
      </body>
    </html>