mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-27 14:01:30 +08:00
adding doc examples and code
This commit is contained in:
davegandy
parent
a41a71d5d9
commit
1e46156c4d
2
docs/assets/css/font-awesome.css
vendored
2
docs/assets/css/font-awesome.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
20
docs/assets/less/font-awesome.less
vendored
20
docs/assets/less/font-awesome.less
vendored
@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -363,6 +363,9 @@ section {
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
.well.well-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
footer {
|
||||
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
||||
|
||||
@ -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;
|
||||
|
||||
155
docs/index.html
155
docs/index.html
@ -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><i></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">
|
||||
<div style="font-size: 24px; line-height: 1.5em;">
|
||||
<i class="icon-camera-retro"></i> icon-camera-retro
|
||||
</div>
|
||||
<i class="icon-camera-retro"></i> 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">
|
||||
<div style="font-size: 24px; line-height: 1.5em;">
|
||||
<i class="icon-camera-retro icon-large"></i> icon-camera-retro
|
||||
</div>
|
||||
<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>
|
||||
</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">
|
||||
<i class="icon-spinner icon-spin"></i> 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">
|
||||
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
|
||||
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">
|
||||
<i class="icon-flag icon-4x pull-left icon-border"></i>
|
||||
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">
|
||||
<a class="btn" href="#">
|
||||
<i class="icon-repeat"></i> Reload</a>
|
||||
@ -863,6 +970,10 @@
|
||||
<i class="icon-trash icon-large"></i> Delete</a>
|
||||
<a class="btn btn-small" href="#">
|
||||
<i class="icon-cog"></i> Settings</a>
|
||||
<a class="btn btn-large btn-danger" href="#">
|
||||
<i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
|
||||
<a class="btn btn-primary" href="#">
|
||||
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
|
||||
</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">
|
||||
<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>
|
||||
<ul class="dropdown-menu">
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user