FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-28 22:41:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

changing alerts to alert-success, matching color

Browse Source
This commit is contained in:
davegandy 2013-10-19 15:39:26 -04:00
parent 579c8efe4e
commit 0d6aae1199
11 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/_includes/examples/animated-spinner.html
View File

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

10
src/_includes/examples/button-dropdowns.html
View File

@ -3,8 +3,8 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a> <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a> <span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@ -18,8 +18,8 @@
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
{% highlight html %} {% highlight html %}
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a> <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a> <span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@ -30,7 +30,7 @@
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
</div> </div>
</div> </div>
</section> </section>

2
src/_includes/examples/inline-icons.html
View File

@ -13,7 +13,7 @@
{% highlight html %} {% highlight html %}
<i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro <i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div>
</div> </div>
</div> </div>
</section> </section>

2
src/_includes/examples/larger-icons.html
View File

@ -26,7 +26,7 @@
<p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p>
<p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have <i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height. sufficient line-height.
</div> </div>

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

@ -23,7 +23,7 @@
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div> <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
</div> </div>
</div> </div>
</section> </section>

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

@ -21,7 +21,7 @@
<i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br> <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <p class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7. <i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
</p> </p>
</div> </div>

2
src/_includes/icons/brand.html
View File

@ -1,7 +1,7 @@
<section id="brand"> <section id="brand">
<h2 class="page-header">Brand Icons</h2> <h2 class="page-header">Brand Icons</h2>
<div class="alert alert-info"> <div class="alert alert-success">
{% include brand-license.html %} {% include brand-license.html %}
</div> </div>

2
src/_includes/new-naming.html
View File

@ -1,6 +1,6 @@
<section id="new-naming"> <section id="new-naming">
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2> <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
<p class="lead text-center alert alert-info">fa-icon-[name]-[shape]-[alt]-[direction]</p> <p class="lead text-center alert alert-success">fa-icon-[name]-[shape]-[alt]-[direction]</p>
<p> <p>
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict

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

@ -57,7 +57,7 @@
// Brand colors // Brand colors
//@brand-primary: @blue-dark; //@brand-primary: @blue-dark;
@brand-success: lighten(@fa-green, 5%); @brand-success: mix(@fa-green, #fff, 70%);
//@brand-warning: @yellow-dark; //@brand-warning: @yellow-dark;
//@brand-danger: @red; //@brand-danger: @red;
//@brand-info: @blue; //@brand-info: @blue;
@ -112,9 +112,9 @@
//@state-danger-bg: @red-lighter; //@state-danger-bg: @red-lighter;
//@state-danger-border: darken(spin(@state-danger-bg, -10), 4%); //@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
// //
//@state-success-text: mix(@green-darker, @green-dark, 30%); @state-success-text: @fa-green;
//@state-success-bg: @green-lighter; @state-success-bg: mix(@fa-green, #fff, 6%);
//@state-success-border: darken(spin(@state-success-bg, -10), 13%); @state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-info-text: mix(@blue-dark, @blue, 50%); @state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter; @state-info-bg: @blue-lighter;

2
src/get-started.html
View File

@ -93,7 +93,7 @@ $ gem install font-awesome-sass
{% highlight scss %} {% highlight scss %}
@fa-font-path: "../font"; @fa-font-path: "../font";
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p> <p class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
</li> </li>
<li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li> <li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li> <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

2
src/license.html
View File

@ -20,7 +20,7 @@ relative_path: ../
{% include stripe-ad.html %} {% include stripe-ad.html %}
<section> <section>
<div class="alert alert-info"> <div class="alert alert-success">
<ul class="fa-icon-ul margin-bottom-none"> <ul class="fa-icon-ul margin-bottom-none">
<li> <li>
<i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: <i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: