library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewriting examples for consistency

Browse Source
This commit is contained in:
davegandy 2013-10-23 10:05:10 -04:00
parent 05c039e861
commit 2407f0ae2d
11 changed files with 78 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/examples/bootstrap.html
View File

@ -1,5 +1,5 @@
<section id="bootstrap">
<h2 class="page-header">Bootstrap 3</h2>
<h2 class="page-header">Bootstrap 3 Examples</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>

28
src/_includes/examples/bordered-pulled.html
View File

@ -3,30 +3,18 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics.
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
</p>
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent">
<i class="fa fa-quote-left fa-4x pull-left"></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 multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities.
</div>
<p>
Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics.
</p>
{% highlight html %}
<i class="fa fa-quote-left fa-4x pull-left"></i>
Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %}
<div class="well well-large well-transparent clearfix">
<i class="fa fa-flag fa-4x pull-left fa-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 multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities.
</div>
{% highlight html %}
<i class="fa fa-flag fa-4x pull-left fa-border"></i>
Use a few of the new styles together ... lots of new possibilities.
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
{% endhighlight %}
</div>
</div>

3
src/_includes/examples/fixed-width.html
View File

@ -11,7 +11,8 @@
</div>
<div class="col-md-9 col-sm-8">
<p>
Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable width throws off alignment. Especially useful in things like nav lists.
Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
Especially useful in things like nav lists.
</p>
{% highlight html %}
<ul class="nav nav-pills nav-stacked">

12
src/_includes/examples/inline.html
View File

@ -1,17 +1,13 @@
<section id="inline-icons">
<section id="inline">
<h2 class="page-header">Inline Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<i class="fa fa-camera-retro"></i> icon-camera-retro
</div>
</div>
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
{% highlight html %}
<i class="fa fa-camera-retro"></i> icon-camera-retro
<i class="fa fa-camera-retro"></i> fa-camera-retro
{% endhighlight %}
<div class="alert alert-success"><i class="fa fa-info-circle"></i> Icon classes are echoed via CSS :before.</div>
</div>

24
src/_includes/examples/larger.html
View File

@ -1,30 +1,24 @@
<section id="larger-icons">
<section id="larger">
<h2 class="page-header">Larger Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code>.
</p>
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code> classes.
To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
</div>
</div>
{% highlight html %}
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
{% endhighlight %}
<div class="alert alert-success">
<i class="fa fa-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have

2
src/_includes/examples/list.html
View File

@ -1,4 +1,4 @@
<section id="list-icons">
<section id="list">
<h2 class="page-header">List Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">

13
src/_includes/examples/rotated-flipped.html
View File

@ -2,10 +2,7 @@
<h2 class="page-header">Rotated &amp; Flipped</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
A set of classes that can be used to arbitrarily rotate and flip icons.
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<div style="font-size: 18px;">
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
@ -13,6 +10,11 @@
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div>
</div>
<div class="col-md-9 col-sm-8">
<p>
To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
</p>
{% highlight html %}
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
@ -21,9 +23,6 @@
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %}
<p class="alert alert-success">
<i class="fa fa-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
</p>
</div>
</div>
</section>

19
src/_includes/examples/spinning.html
View File

@ -2,22 +2,19 @@
<h2 class="page-header">Spinning Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
</div>
<div class="col-md-9 col-sm-8">
<p>
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>fa-refresh</code>, and <code>fa-cog</code>.
</p>
<p>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
</p>
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
</div>
{% highlight html %}
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
{% endhighlight %}
<p class="alert alert-success">
<i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.

31
src/_includes/examples/stacked.html
View File

@ -2,50 +2,53 @@
<h2 class="page-header">Stacked Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
for the regularly sized icon, and <code>fa-stack-2x</code> for the larger bottom icon. <code>fa-inverse</code>
can be used as an alternative icon color.
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<span class="fa-stack">
<div>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
</div>
</div>
<div class="col-md-9 col-sm-8">
<p>
To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
to get further control of sizing.
</p>
{% highlight html %}
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack">
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

14
src/_includes/navbar.html
View File

@ -47,15 +47,15 @@
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#inline">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#list-icons">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#spinning">Spinning Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>

38
src/assets/less/site/bootstrap/variables.less
View File

@ -56,11 +56,7 @@
// -------------------
// Brand colors
//@brand-primary: @blue-dark;
@brand-success: mix(@fa-green, #fff, 70%);
//@brand-warning: @yellow-dark;
//@brand-danger: @red;
//@brand-info: @blue;
// Links
@ -99,30 +95,26 @@
// Jumbotron
@jumbotron-color: #fff;
@jumbotron-bg: @fa-green;
@jumbotron-color: #fff;
@jumbotron-bg: @fa-green;
// Form states and alerts
//@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%);
//@state-warning-bg: @yellow-lighter;
//@state-warning-border: darken(spin(@state-warning-bg, -10), 7%);
//
//@state-danger-text: @red;
//@state-danger-bg: @red-lighter;
//@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
//
@state-success-text: @fa-green;
@state-success-bg: mix(@fa-green, #fff, 6%);
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-success-text: @fa-green;
@state-success-bg: mix(@fa-green, #fff, 6%);
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Carousel
@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25);
@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25);
@carousel-control-color: @fa-green-dark;
@carousel-control-font-size: 30px;
@carousel-control-color: @fa-green-dark;
@carousel-control-font-size: 30px;
// Code
@pre-border-color: #e5e5e5;