|
|
@@ -1,351 +1,354 @@
|
|
|
-<!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: 'fontello';
|
|
|
- src: url('./font/fontello.eot?82894013');
|
|
|
- src: url('./font/fontello.eot?82894013#iefix') format('embedded-opentype'),
|
|
|
- url('./font/fontello.woff?82894013') format('woff'),
|
|
|
- url('./font/fontello.ttf?82894013') format('truetype'),
|
|
|
- url('./font/fontello.svg?82894013#fontello') format('svg');
|
|
|
- font-weight: normal;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .demo-icon
|
|
|
- {
|
|
|
- font-family: "fontello";
|
|
|
- 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/" + 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="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0xe800</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-cancel"></i> <span class="i-name">icon-cancel</span><span class="i-code">0xe801</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe802</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-home"></i> <span class="i-name">icon-home</span><span class="i-code">0xe803</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0xe804</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe805</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-italic"></i> <span class="i-name">icon-italic</span><span class="i-code">0xe806</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-bold"></i> <span class="i-name">icon-bold</span><span class="i-code">0xe807</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-off"></i> <span class="i-name">icon-off</span><span class="i-code">0xe808</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-video"></i> <span class="i-name">icon-video</span><span class="i-code">0xe809</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe80a</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-minus"></i> <span class="i-name">icon-minus</span><span class="i-code">0xe80b</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-colon"></i> <span class="i-name">icon-colon</span><span class="i-code">0xe80c</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-pi"></i> <span class="i-name">icon-pi</span><span class="i-code">0xe80d</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-list-alt"></i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe80e</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-resize-vertical"></i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80f</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xf01a"><i class="demo-icon icon-math"></i> <span class="i-name">icon-math</span><span class="i-code">0xf01a</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf047"><i class="demo-icon icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xf047</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext"></i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf097"><i class="demo-icon icon-bookmark-empty"></i> <span class="i-name">icon-bookmark-empty</span><span class="i-code">0xf097</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xf0ca"><i class="demo-icon icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xf0ca</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf0cb"><i class="demo-icon icon-list-numbered"></i> <span class="i-name">icon-list-numbered</span><span class="i-code">0xf0cb</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf0cd"><i class="demo-icon icon-underline"></i> <span class="i-name">icon-underline</span><span class="i-code">0xf0cd</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf0ce"><i class="demo-icon icon-table"></i> <span class="i-name">icon-table</span><span class="i-code">0xf0ce</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xf0f6"><i class="demo-icon icon-doc-text"></i> <span class="i-name">icon-doc-text</span><span class="i-code">0xf0f6</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf10d"><i class="demo-icon icon-quote-left"></i> <span class="i-name">icon-quote-left</span><span class="i-code">0xf10d</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf114"><i class="demo-icon icon-folder-empty"></i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xf114</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf121"><i class="demo-icon icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xf121</span></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="the-icons span3" title="Code: 0xf12b"><i class="demo-icon icon-superscript"></i> <span class="i-name">icon-superscript</span><span class="i-code">0xf12b</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf16a"><i class="demo-icon icon-youtube-play"></i> <span class="i-name">icon-youtube-play</span><span class="i-code">0xf16a</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf1dc"><i class="demo-icon icon-header"></i> <span class="i-name">icon-header</span><span class="i-code">0xf1dc</span></div>
|
|
|
- <div class="the-icons span3" title="Code: 0xf1dd"><i class="demo-icon icon-paragraph"></i> <span class="i-name">icon-paragraph</span><span class="i-code">0xf1dd</span></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
|
|
|
- </body>
|
|
|
+<!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: 'fontello';
|
|
|
+ src: url('./font/fontello.eot?79192306');
|
|
|
+ src: url('./font/fontello.eot?79192306#iefix') format('embedded-opentype'),
|
|
|
+ url('./font/fontello.woff?79192306') format('woff'),
|
|
|
+ url('./font/fontello.ttf?79192306') format('truetype'),
|
|
|
+ url('./font/fontello.svg?79192306#fontello') format('svg');
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .demo-icon
|
|
|
+ {
|
|
|
+ font-family: "fontello";
|
|
|
+ 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/" + 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="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-bold"></i> <span class="i-name">icon-bold</span><span class="i-code">0xe800</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-italic"></i> <span class="i-name">icon-italic</span><span class="i-code">0xe801</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-check"></i> <span class="i-name">icon-check</span><span class="i-code">0xe802</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-cancel"></i> <span class="i-name">icon-cancel</span><span class="i-code">0xe803</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0xe804</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-cancel-1"></i> <span class="i-name">icon-cancel-1</span><span class="i-code">0xe805</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe806</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-home"></i> <span class="i-name">icon-home</span><span class="i-code">0xe807</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0xe808</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe809</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-off"></i> <span class="i-name">icon-off</span><span class="i-code">0xe80a</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-video"></i> <span class="i-name">icon-video</span><span class="i-code">0xe80b</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe80c</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-minus"></i> <span class="i-name">icon-minus</span><span class="i-code">0xe80d</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-colon"></i> <span class="i-name">icon-colon</span><span class="i-code">0xe80e</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-pi"></i> <span class="i-name">icon-pi</span><span class="i-code">0xe80f</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-list-alt"></i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe810</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-resize-vertical"></i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe811</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf01a"><i class="demo-icon icon-math"></i> <span class="i-name">icon-math</span><span class="i-code">0xf01a</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf047"><i class="demo-icon icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xf047</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext"></i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf097"><i class="demo-icon icon-bookmark-empty"></i> <span class="i-name">icon-bookmark-empty</span><span class="i-code">0xf097</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf0ca"><i class="demo-icon icon-list-bullet"></i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xf0ca</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf0cb"><i class="demo-icon icon-list-numbered"></i> <span class="i-name">icon-list-numbered</span><span class="i-code">0xf0cb</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xf0ce"><i class="demo-icon icon-table"></i> <span class="i-name">icon-table</span><span class="i-code">0xf0ce</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf0f6"><i class="demo-icon icon-doc-text"></i> <span class="i-name">icon-doc-text</span><span class="i-code">0xf0f6</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf10d"><i class="demo-icon icon-quote-left"></i> <span class="i-name">icon-quote-left</span><span class="i-code">0xf10d</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf114"><i class="demo-icon icon-folder-empty"></i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xf114</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xf121"><i class="demo-icon icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xf121</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf12b"><i class="demo-icon icon-superscript"></i> <span class="i-name">icon-superscript</span><span class="i-code">0xf12b</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf16a"><i class="demo-icon icon-youtube-play"></i> <span class="i-name">icon-youtube-play</span><span class="i-code">0xf16a</span></div>
|
|
|
+ <div class="the-icons span3" title="Code: 0xf1dc"><i class="demo-icon icon-header"></i> <span class="i-name">icon-header</span><span class="i-code">0xf1dc</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="the-icons span3" title="Code: 0xf1dd"><i class="demo-icon icon-paragraph"></i> <span class="i-name">icon-paragraph</span><span class="i-code">0xf1dd</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
|
|
|
+ </body>
|
|
|
</html>
|
trendschau
