diff options
author | rvelices <rv-github@modusoptimus.com> | 2013-06-04 04:44:34 +0000 |
---|---|---|
committer | rvelices <rv-github@modusoptimus.com> | 2013-06-04 04:44:34 +0000 |
commit | 5b60c54c5595f79d3f3219859e8f107649465b94 (patch) | |
tree | 1163f1c75f86f3ca463b55c5b01bc0bda5d5c18f /admin/themes/default/fontello/demo.html | |
parent | bfd8e798d78db071b7d5982ac9d9e68be493baad (diff) |
feature 2916 Replace raphael with symbol fonts
I added more icons than before (I think it's better as we can find links faster but that's arguable ...)
git-svn-id: http://piwigo.org/svn/trunk@23029 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'admin/themes/default/fontello/demo.html')
-rw-r--r-- | admin/themes/default/fontello/demo.html | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/admin/themes/default/fontello/demo.html b/admin/themes/default/fontello/demo.html new file mode 100644 index 000000000..b032d3e0f --- /dev/null +++ b/admin/themes/default/fontello/demo.html @@ -0,0 +1,307 @@ +<!DOCTYPE html> +<html> + <head><!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> + <meta charset="UTF-8"><style type="text/css">/* + * 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; +} +</style> + <link rel="stylesheet" href="css/fontello.css"> + <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]> + <link rel="stylesheet" href="css/fontello-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 id="icons" class="container"> + <div class="row"> + <div title="Code: 0x2302" class="the-icons span3"><i class="icon-home"></i> <span class="i-name">icon-home</span><span class="i-code">0x2302</span></div> + <div title="Code: 0x2605" class="the-icons span3"><i class="icon-star"></i> <span class="i-name">icon-star</span><span class="i-code">0x2605</span></div> + <div title="Code: 0x2606" class="the-icons span3"><i class="icon-star-empty"></i> <span class="i-name">icon-star-empty</span><span class="i-code">0x2606</span></div> + <div title="Code: 0x2699" class="the-icons span3"><i class="icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0x2699</span></div> + </div> + <div class="row"> + <div title="Code: 0x26ef" class="the-icons span3"><i class="icon-cog-alt"></i> <span class="i-name">icon-cog-alt</span><span class="i-code">0x26ef</span></div> + <div title="Code: 0x2709" class="the-icons span3"><i class="icon-mail"></i> <span class="i-name">icon-mail</span><span class="i-code">0x2709</span></div> + <div title="Code: 0x270e" class="the-icons span3"><i class="icon-pencil"></i> <span class="i-name">icon-pencil</span><span class="i-code">0x270e</span></div> + <div title="Code: 0x2795" class="the-icons span3"><i class="icon-plus-circled"></i> <span class="i-name">icon-plus-circled</span><span class="i-code">0x2795</span></div> + </div> + <div class="row"> + <div title="Code: 0xe0ad" class="the-icons span3"><i class="icon-asl"></i> <span class="i-name">icon-asl</span><span class="i-code">0xe0ad</span></div> + <div title="Code: 0xe70a" class="the-icons span3"><i class="icon-eye"></i> <span class="i-name">icon-eye</span><span class="i-code">0xe70a</span></div> + <div title="Code: 0xe70d" class="the-icons span3"><i class="icon-tags"></i> <span class="i-name">icon-tags</span><span class="i-code">0xe70d</span></div> + <div title="Code: 0xe720" class="the-icons span3"><i class="icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe720</span></div> + </div> + <div class="row"> + <div title="Code: 0xe729" class="the-icons span3"><i class="icon-trash"></i> <span class="i-name">icon-trash</span><span class="i-code">0xe729</span></div> + <div title="Code: 0xe73d" class="the-icons span3"><i class="icon-basket"></i> <span class="i-name">icon-basket</span><span class="i-code">0xe73d</span></div> + <div title="Code: 0xe7b6" class="the-icons span3"><i class="icon-puzzle"></i> <span class="i-name">icon-puzzle</span><span class="i-code">0xe7b6</span></div> + <div title="Code: 0xf0ae" class="the-icons span3"><i class="icon-tasks"></i> <span class="i-name">icon-tasks</span><span class="i-code">0xf0ae</span></div> + </div> + <div class="row"> + <div title="Code: 0xf0b0" class="the-icons span3"><i class="icon-filter"></i> <span class="i-name">icon-filter</span><span class="i-code">0xf0b0</span></div> + <div title="Code: 0xf0e0" class="the-icons span3"><i class="icon-mail-alt"></i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div> + <div title="Code: 0xf0e8" class="the-icons span3"><i class="icon-sitemap"></i> <span class="i-name">icon-sitemap</span><span class="i-code">0xf0e8</span></div> + <div title="Code: 0xf125" class="the-icons span3"><i class="icon-crop"></i> <span class="i-name">icon-crop</span><span class="i-code">0xf125</span></div> + </div> + <div class="row"> + <div title="Code: 0x1f304" class="the-icons span3"><i class="icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0x1f304</span></div> + <div title="Code: 0x1f464" class="the-icons span3"><i class="icon-user"></i> <span class="i-name">icon-user</span><span class="i-code">0x1f464</span></div> + <div title="Code: 0x1f465" class="the-icons span3"><i class="icon-users"></i> <span class="i-name">icon-users</span><span class="i-code">0x1f465</span></div> + <div title="Code: 0x1f500" class="the-icons span3"><i class="icon-shuffle"></i> <span class="i-name">icon-shuffle</span><span class="i-code">0x1f500</span></div> + </div> + <div class="row"> + <div title="Code: 0x1f512" class="the-icons span3"><i class="icon-lock"></i> <span class="i-name">icon-lock</span><span class="i-code">0x1f512</span></div> + <div title="Code: 0x1f517" class="the-icons span3"><i class="icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0x1f517</span></div> + <div title="Code: 0x1f527" class="the-icons span3"><i class="icon-wrench"></i> <span class="i-name">icon-wrench</span><span class="i-code">0x1f527</span></div> + <div title="Code: 0x1f554" class="the-icons span3"><i class="icon-clock"></i> <span class="i-name">icon-clock</span><span class="i-code">0x1f554</span></div> + </div> + <div class="row"> + <div title="Code: 0x1f6ab" class="the-icons span3"><i class="icon-block"></i> <span class="i-name">icon-block</span><span class="i-code">0x1f6ab</span></div> + </div> + </div> + <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div> + </body> +</html>
\ No newline at end of file |