mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-27 14:01:32 +08:00
changing alerts to alert-success, matching color
This commit is contained in:
parent
579c8efe4e
commit
0d6aae1199
@ -2,8 +2,15 @@
|
||||
<h2 class="page-header">Animated Spinner</h2>
|
||||
<div class="row">
|
||||
<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>,
|
||||
<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 class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent lead">
|
||||
@ -12,7 +19,7 @@
|
||||
{% highlight html %}
|
||||
<i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content...
|
||||
{% 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.
|
||||
</p>
|
||||
</div>
|
||||
|
@ -3,8 +3,8 @@
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<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-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
|
||||
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="fa-icon fa-icon-caret-down"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<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">
|
||||
{% highlight html %}
|
||||
<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-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
|
||||
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="fa-icon fa-icon-caret-down"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
|
||||
@ -30,7 +30,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
{% 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>
|
||||
</section>
|
||||
|
@ -13,7 +13,7 @@
|
||||
{% highlight html %}
|
||||
<i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
|
||||
{% 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>
|
||||
</section>
|
||||
|
@ -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-4x"></i> fa-icon-camera-retro</p>
|
||||
{% 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
|
||||
sufficient line-height.
|
||||
</div>
|
||||
|
@ -23,7 +23,7 @@
|
||||
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>…and many more with custom CSS</li>
|
||||
</ul>
|
||||
{% 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>
|
||||
</section>
|
||||
|
@ -21,7 +21,7 @@
|
||||
<i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal<br>
|
||||
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i> icon-flip-vertical
|
||||
{% 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.
|
||||
</p>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<section id="brand">
|
||||
<h2 class="page-header">Brand Icons</h2>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<div class="alert alert-success">
|
||||
{% include brand-license.html %}
|
||||
</div>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<section id="new-naming">
|
||||
<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>
|
||||
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
|
||||
|
@ -57,7 +57,7 @@
|
||||
|
||||
// Brand colors
|
||||
//@brand-primary: @blue-dark;
|
||||
@brand-success: lighten(@fa-green, 5%);
|
||||
@brand-success: mix(@fa-green, #fff, 70%);
|
||||
//@brand-warning: @yellow-dark;
|
||||
//@brand-danger: @red;
|
||||
//@brand-info: @blue;
|
||||
@ -112,9 +112,9 @@
|
||||
//@state-danger-bg: @red-lighter;
|
||||
//@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
|
||||
//
|
||||
//@state-success-text: mix(@green-darker, @green-dark, 30%);
|
||||
//@state-success-bg: @green-lighter;
|
||||
//@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;
|
||||
|
@ -93,7 +93,7 @@ $ gem install font-awesome-sass
|
||||
{% highlight scss %}
|
||||
@fa-font-path: "../font";
|
||||
{% 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>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>
|
||||
|
@ -20,7 +20,7 @@ relative_path: ../
|
||||
{% include stripe-ad.html %}
|
||||
|
||||
<section>
|
||||
<div class="alert alert-info">
|
||||
<div class="alert alert-success">
|
||||
<ul class="fa-icon-ul margin-bottom-none">
|
||||
<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:
|
||||
|
Loading…
Reference in New Issue
Block a user