Browse Source

updating bugs and doc

Dave Gandy 13 years ago
parent
commit
775a40bec6
5 changed files with 101 additions and 32 deletions
  1. 36 0
      assets/css/font-awesome.css
  2. 0 0
      assets/css/site.css
  3. 39 11
      assets/less/font-awesome.less
  4. 9 13
      assets/less/site.less
  5. 17 8
      index.html

+ 36 - 0
assets/css/font-awesome.css

@@ -1,3 +1,26 @@
+/*  Font Awesome
+    the iconic font designed for use with Twitter Bootstrap
+    -------------------------------------------------------
+    The full suite of pictographic icons, examples, and documentation
+    can be found at: http://fortawesome.github.com/Font-Awesome/
+
+    License
+    -------------------------------------------------------
+    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
+    http://creativecommons.org/licenses/by/3.0/ A mention of
+    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
+    source code is considered acceptable attribution (most common on the web).
+    If human readable source code is not available to the end user, a mention in
+    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
+    or mobile software).
+
+    Contact
+    -------------------------------------------------------
+    Email: dave@davegandy.com
+    Twitter: http://twitter.com/fortaweso_me
+    Work: http://lemonwi.se co-founder
+
+    */
 @font-face {
 @font-face {
   font-family: 'FontAwesome';
   font-family: 'FontAwesome';
   src: url('../font/fontawesome-webfont.eot');
   src: url('../font/fontawesome-webfont.eot');
@@ -10,11 +33,20 @@
   font-weight: normal;
   font-weight: normal;
   font-style: normal;
   font-style: normal;
   display: inline-block;
   display: inline-block;
+  text-decoration: inherit;
 }
 }
+a [class^="icon-"], a [class*=" icon-"] {
+  display: inline-block;
+  text-decoration: inherit;
+}
+/* makes the font 33% larger relative to the icon container */
 .icon-large:before {
 .icon-large:before {
+  vertical-align: top;
   font-size: 1.3333333333333333em;
   font-size: 1.3333333333333333em;
 }
 }
 .btn [class^="icon-"], .btn [class*=" icon-"] {
 .btn [class^="icon-"], .btn [class*=" icon-"] {
+  /* keeps button heights with and without icons the same */
+
   line-height: .9em;
   line-height: .9em;
 }
 }
 li [class^="icon-"], li [class*=" icon-"] {
 li [class^="icon-"], li [class*=" icon-"] {
@@ -23,6 +55,8 @@ li [class^="icon-"], li [class*=" icon-"] {
   text-align: center;
   text-align: center;
 }
 }
 li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
 li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
+  /* 1.5 increased font size for icon-large * 1.25 width */
+
   width: 1.875em;
   width: 1.875em;
 }
 }
 li[class^="icon-"], li[class*=" icon-"] {
 li[class^="icon-"], li[class*=" icon-"] {
@@ -36,6 +70,8 @@ li[class^="icon-"]:before, li[class*=" icon-"]:before {
 li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
 li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
   text-indent: -1.3333333333333333em;
   text-indent: -1.3333333333333333em;
 }
 }
+/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+    readers do not read off random characters that represent icons */
 .icon-glass:before {
 .icon-glass:before {
   content: "\f000";
   content: "\f000";
 }
 }

File diff suppressed because it is too large
+ 0 - 0
assets/css/site.css


+ 39 - 11
assets/less/font-awesome.less

@@ -1,3 +1,27 @@
+/*  Font Awesome
+    the iconic font designed for use with Twitter Bootstrap
+    -------------------------------------------------------
+    The full suite of pictographic icons, examples, and documentation
+    can be found at: http://fortawesome.github.com/Font-Awesome/
+
+    License
+    -------------------------------------------------------
+    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
+    http://creativecommons.org/licenses/by/3.0/ A mention of
+    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
+    source code is considered acceptable attribution (most common on the web).
+    If human readable source code is not available to the end user, a mention in
+    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
+    or mobile software).
+
+    Contact
+    -------------------------------------------------------
+    Email: dave@davegandy.com
+    Twitter: http://twitter.com/fortaweso_me
+    Work: http://lemonwi.se co-founder
+
+    */
+
 @font-face {
 @font-face {
     font-family: 'FontAwesome';
     font-family: 'FontAwesome';
     src: url('../font/fontawesome-webfont.eot');
     src: url('../font/fontawesome-webfont.eot');
@@ -10,29 +34,32 @@
     font-style: normal;
     font-style: normal;
 }
 }
 
 
-// ICONS
-// Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
-// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome
-
 [class^="icon-"]:before,
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
 [class*=" icon-"]:before {
     font-family: FontAwesome;
     font-family: FontAwesome;
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
     display: inline-block;
     display: inline-block;
+    text-decoration: inherit;
+}
+
+a [class^="icon-"],
+a [class*=" icon-"] {
+    display: inline-block;
+    text-decoration: inherit;
 }
 }
 
 
-// makes the font 33% larger relative to the icon container
+/* makes the font 33% larger relative to the icon container */
 .icon-large:before {
 .icon-large:before {
-//    display: inline-block;
+    vertical-align: top;
     font-size: 4/3em;
     font-size: 4/3em;
 }
 }
 
 
 .btn {
 .btn {
     [class^="icon-"],
     [class^="icon-"],
     [class*=" icon-"] {
     [class*=" icon-"] {
-    line-height: .9em; // keeps button heights with and without icons the same
+        /* keeps button heights with and without icons the same */
+        line-height: .9em;
     }
     }
 }
 }
 
 
@@ -45,7 +72,8 @@ li {
     }
     }
     .icon-large[class^="icon-"],
     .icon-large[class^="icon-"],
     .icon-large[class*=" icon-"]  {
     .icon-large[class*=" icon-"]  {
-        width: 1.5*1.25em; // 1.5 increased font size for icon-large * 1.25 width
+        /* 1.5 increased font size for icon-large * 1.25 width */
+        width: 1.5*1.25em;
     }
     }
 }
 }
 
 
@@ -63,8 +91,8 @@ li[class*=" icon-"] {
     }
     }
 }
 }
 
 
-// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off
-// random characters that represent icons
+/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+    readers do not read off random characters that represent icons */
 .icon-glass:before              { content: "\f000"; }
 .icon-glass:before              { content: "\f000"; }
 .icon-music:before              { content: "\f001"; }
 .icon-music:before              { content: "\f001"; }
 .icon-search:before             { content: "\f002"; }
 .icon-search:before             { content: "\f002"; }

+ 9 - 13
assets/less/site.less

@@ -44,11 +44,14 @@ h1, h2, h3, h4, h5, h6 { font-family: @baseHeaderFontFamily; }
     }
     }
 }
 }
 
 
-a[href^='http://']:after {
-    font-family: FontAwesome;
-    content: "\0020 \f08e";
-    &:hover {
-        text-decoration: none;
+a[href^='http://'] {
+    display: inline-block;
+    &:after {
+        font-family: FontAwesome;
+        content: "\0020 \f08e";
+        &:hover {
+            text-decoration: none;
+        }
     }
     }
 }
 }
 
 
@@ -116,10 +119,6 @@ a[href^='http://']:after {
     }
     }
 }
 }
 
 
-/*section {*/
-    /*margin: 30px 0;*/
-/*}*/
-
 .the-icons {
 .the-icons {
     li[class^="icon-"],
     li[class^="icon-"],
     li[class*=" icon-"] {
     li[class*=" icon-"] {
@@ -193,10 +192,7 @@ a[href^='http://']:after {
 
 
         span.star:hover:before, span.star:hover ~ span.star:before {
         span.star:hover:before, span.star:hover ~ span.star:before {
             content: "\f005"; // solid star
             content: "\f005"; // solid star
-            color: #c49c38;
-            #gradient > .vertical(#fffeb8, #c49c38);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: #e3cf7a;
         }
         }
     }
     }
 }
 }

+ 17 - 8
index.html

@@ -31,7 +31,7 @@
 <div class="navbar navbar-fixed-top">
 <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
     <div class="navbar-inner">
         <div class="container">
         <div class="container">
-            <h3><a class="brand" href="#"><i class="icon-flag"> </i>Font Awesome</a></h3>
+            <h3><a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a></h3>
             <ul class="nav">
             <ul class="nav">
                 <li><a href="#overview">Overview</a></li>
                 <li><a href="#overview">Overview</a></li>
                 <li><a href="#base-icons">Base Icons</a></li>
                 <li><a href="#base-icons">Base Icons</a></li>
@@ -114,7 +114,7 @@
             </div>
             </div>
             <div class="span4">
             <div class="span4">
                 <h3><i class="icon-ok icon-large"></i> Broad compatibility</h3>
                 <h3><i class="icon-ok icon-large"></i> Broad compatibility</h3>
-                Wide @font-face support means Font Awesome even works in IE4 (<a href="http://www.fontsquirrel.com/fontface" target="_blank">no kidding</a>).
+                Wide @font-face support means Font Awesome works in <a href="#roadmap" rel="tooltip" data-original-title="IE7 support coming soon">modern browsers <i class="icon-info-sign"></i></a>.
             </div>
             </div>
         </div>
         </div>
         <div class="row">
         <div class="row">
@@ -716,8 +716,9 @@
         <h1>Roadmap</h1>
         <h1>Roadmap</h1>
         <p>Here's the plan for future updates.</p>
         <p>Here's the plan for future updates.</p>
         <ul>
         <ul>
+            <li class="icon-plus">Support for IE7.</li>
             <li class="icon-plus">Better hinting for smaller font sizes.</li>
             <li class="icon-plus">Better hinting for smaller font sizes.</li>
-            <li class="icon-plus">More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues/new" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li>
+            <li class="icon-plus">More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li>
             <li class="icon-plus">More complete Twitter Bootstrap compatibility.</li>
             <li class="icon-plus">More complete Twitter Bootstrap compatibility.</li>
             <li class="icon-plus">Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
             <li class="icon-plus">Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
         </ul>
         </ul>
@@ -736,17 +737,19 @@
             <div class="span8">
             <div class="span8">
                 <h2>License</h2>
                 <h2>License</h2>
                 The Font Awesome webfont, CSS, and LESS files are licensed under
                 The Font Awesome webfont, CSS, and LESS files are licensed under
-                <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+                <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
                 A mention of <code>Font Awesome - http://fortawesome.github.com/Font-Awesome</code> in human-readable source code
                 A mention of <code>Font Awesome - http://fortawesome.github.com/Font-Awesome</code> in human-readable source code
                 is considered acceptable attribution (most common on the web). If human readable source code is not available to
                 is considered acceptable attribution (most common on the web). If human readable source code is not available to
                 the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or
                 the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or
                 mobile software).
                 mobile software).
             </div>
             </div>
+            <div class="span12">
+                <h2>Special Thanks</h2>
+                Special thanks to <a href="http://twitter.com/robmadole/" target="_blank">@robmadole</a> and
+                <a href="http://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
+                review, advice, and some backbone.js help.
+            </div>
         </div>
         </div>
-
-
-
-
     </footer>
     </footer>
 
 
 
 
@@ -827,6 +830,12 @@
             interval: 5000
             interval: 5000
         });
         });
 
 
+        // tooltips
+        $('#why').tooltip({
+            selector: "a[rel=tooltip]",
+            placement: 'bottom'
+        })
+
         // make code pretty
         // make code pretty
         window.prettyPrint && prettyPrint();
         window.prettyPrint && prettyPrint();
     });
     });

Some files were not shown because too many files changed in this diff