adding doc examples and code

This commit is contained in:
davegandy 2013-01-01 19:16:50 -05:00
parent a41a71d5d9
commit 1e46156c4d
6 changed files with 153 additions and 35 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -23,7 +23,8 @@
*/
@FontAwesomePath: "../font";
@borderColor: #eeeeee;
@borderColor: #eee;
@iconMuted: #eee;
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
@font-face {
@ -116,6 +117,10 @@ ul.icons {
}
}
.icon-muted {
color: @iconMuted;
}
// Icon Borders
// -------------------------
@ -150,9 +155,13 @@ ul.icons {
}
}
// Icon Floats
// Floats
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
@ -169,10 +178,7 @@ ul.icons {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .35em; }
}
&.icon-spin {
height: .75em;
&.icon-large { height: .75em; }
}
&.icon-spin.icon-large { height: .75em; }
}
}
@ -182,7 +188,6 @@ ul.icons {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .45em; }
}
&.icon-spin { height: .8em; }
}
}
@ -192,7 +197,6 @@ ul.icons {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .2em; }
}
&.icon-spin { height: .68em; }
}
}

View File

@ -363,6 +363,9 @@ section {
background-color: @grayLighter;
}
.well.well-transparent {
background-color: transparent;
}
footer {
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);

View File

@ -41,7 +41,7 @@
// Links
// -------------------------
@linkColor: lighten(@red, 10%);
@linkColorHover: @linkColor;
@linkColorHover: @red;
// Typography
@ -102,8 +102,8 @@
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnDangerBackground: lighten(@red, 20%);
@btnDangerBackgroundHighlight: lighten(@red, 5%);
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;

View File

@ -204,12 +204,12 @@
Every icon re-created from the ground up to be optimized for Bootstrap's default 14px.
</div>
<div class="span4">
<h4><i class="icon-legal"></i> Better License</h4>
SIL open font license, Apache 2.0 for code. No more attribution required, but much appreciated.
<h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">sub-set</a> to get just the icons you need.
</div>
<div class="span4">
<h4><i class="icon-circle-arrow-down"></i> 25% smaller size</h4>
Smaller, even with more icons. More compact file size for faster page loads.
<h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4>
SIL open font license, MIT license for code. No more attribution required, but much appreciated.
</div>
</div>
<div class="row">
@ -218,12 +218,12 @@
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
</div>
<div class="span4">
<h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">sub-set</a> to get just the icons you need.
<h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4>
<a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
</div>
<div class="span4">
<h4><i class="icon-spinner icon-spin"></i> New classes</a></h4>
New classes for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
<h4><i class="icon-resize-small"></i> 25% smaller size</h4>
3.0 is smaller, even with 40 new icons. More compact file size means faster page loads.
</div>
</div>
</section>
@ -796,33 +796,130 @@
</div>
</div>
<h3 class="page-header">New Styles in 3.0</h3>
<div class="row">
<div class="span4">
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in buttons. Lots of new possibilities.
</div>
<div class="span4">
<div class="well well-large well-transparent lead">
<i class="icon-spinner icon-spin icon-2x pull-left"></i> Spinner icon when loading content...
</div>
</div>
<div class="span4">
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
</p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
</div>
</div>
<h3 class="page-header">Example HTML</h3>
<div class="row">
<div class="span3">
<h4>Inline Icon</h4>
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
</div>
<div class="span9">
<div class="well">
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-camera-retro"></i> icon-camera-retro
</div>
</div>
<pre class="prettyprint linenums">
&lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
&lt;/div&gt;
&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
</pre>
<div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
<p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p>
<div class="well">
</div>
</div>
<div class="row">
<div class="span3">
<h4>Larger Icons</h4>
<p>
To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code>.
</p>
</div>
<div class="span9">
<p>
Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code> classes.
</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-camera-retro icon-large"></i> icon-camera-retro
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
&lt;i class="icon-camera-retro icon-large"&gt;&lt;/i&gt; icon-camera-retro
&lt;/div&gt;
&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-large&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-2x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-3x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-4x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
</pre>
<div class="alert alert-info">
<i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.
</div>
</div>
</div>
<div class="row">
<div class="span3">
<h4>Animated Spinner</h4>
<p>
Use the <code>icon-spin</code> class to get any icon to rotate. Works best with <code>icon-spinner</code> and
<code>icon-refresh</code>.
</p>
</div>
<div class="span9">
<div class="well well-large well-transparent lead">
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
</div>
<pre class="prettyprint linenums">
&lt;i class=&quot;icon-spinner icon-spin&quot;&gt;&lt;/i&gt; Spinner icon when loading content...
</pre>
</div>
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
</div>
</div>
<div class="row">
<div class="span3">
<h4>Bordered & Pulled Icons</h4>
<p>
Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics.
</p>
</div>
<div class="span9">
<div class="well well-large well-transparent">
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in buttons. You can combine all of them
in any combination to get lots of new possibilities.
</div>
<pre class="prettyprint linenums">
&lt;i class=&quot;icon-quote-left icon-4x pull-left icon-muted&quot;&gt;&lt;/i&gt;
Use a few of the new styles together ... lots of new possibilities.
</pre>
<div class="well well-large well-transparent">
<i class="icon-camera-retro icon-4x pull-left icon-border"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in buttons. You can combine all of them
in any combination to get lots of new possibilities.
</div>
<pre class="prettyprint linenums">
&lt;i class=&quot;icon-flag icon-4x pull-left icon-border&quot;&gt;&lt;/i&gt;
Use a few of the new styles together ... lots of new possibilities.
</pre>
</div>
</div>
@ -847,9 +944,19 @@
<a class="btn btn-small" href="#">
<i class="icon-cog"></i> Settings</a>
</p>
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
</p>
<p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
</p>
</div>
<div class="span9">
<p>Font Awesome icons work great in buttons.</p>
<p>
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
<code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>.
</p>
<pre class="prettyprint linenums">
&lt;a class="btn" href="#"&gt;
&lt;i class="icon-repeat"&gt;&lt;/i&gt; Reload&lt;/a&gt;
@ -863,6 +970,10 @@
&lt;i class="icon-trash icon-large"&gt;&lt;/i&gt; Delete&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt;
&lt;i class="icon-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
&lt;a class=&quot;btn btn-large btn-danger&quot; href=&quot;#&quot;&gt;
&lt;i class=&quot;icon-flag icon-2x pull-left&quot;&gt;&lt;/i&gt;Font Awesome&lt;br&gt;Version 3.0&lt;/a&gt;
&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot;&gt;
&lt;i class=&quot;icon-refresh icon-spin&quot;&gt;&lt;/i&gt; Synchronizing Content...&lt;/a&gt;
</pre>
</div>
</div>
@ -893,7 +1004,7 @@
<div class="span3">
<h4>Button dropdowns</h4>
<p>
<div class="btn-group">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-caret-down"></span></a>
@ -909,7 +1020,7 @@
</p>
<div class="span9">
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;div class="btn-group open"&gt;
&lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; User&lt;/a&gt;
&lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="icon-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
@ -1008,7 +1119,7 @@
<div class="row">
<div class="span3">
<h4>Custom CSS</h4>
<p>Anything you can do with CSS font effects, you can do with Font Awesome.</p>
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
</div>
<div class="span9">
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>