more docs cleanup

This commit is contained in:
davegandy 2013-05-08 00:31:48 -04:00
parent 71d44cd49d
commit 44ed2461f5
7 changed files with 55 additions and 62 deletions

View file

@ -6,7 +6,7 @@
{% endcapture %}
{% include stripe-ad.html %}
<div>
<div id="requesting-new-icons">
<h2 class="page-header">Requesting New Icons</h2>
<p>
New icons mostly start as requests by the

View file

@ -35,20 +35,12 @@
<h2 class="page-header">EASY: Default CSS</h2>
<p>Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.</p>
<ol>
<li>Copy the Font Awesome font directory into your project.</li>
<li>Copy font-awesome.min.css into your project.</li>
<li>
Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place.
<p class="alert alert-info">
<i class="icon-info-sign"></i> The font path is relative from your CSS directory. If you're having an issue
getting Font Awesome icons to load, this is likely the issue.
</p>
</li>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>
In the <code>&lt;head&gt;</code> of your html, reference the location to your font-awesome.min.css.
{% highlight html %}
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
{% endhighlight %}
</li>
<li>Check out the <a href="{{ site.baseurl }}examples/">examples</a> to start using Font Awesome!</li>
@ -57,11 +49,10 @@
<section>
<h2 class="page-header">PRO: Custom LESS</h2>
<p>Use this method to customize Font Awesome and Bootstrap using LESS.</p>
<p>Use this method to customize Font Awesome and Bootstrap {{ site.bootstrap.version }} using LESS.</p>
<ol>
<li>Copy the Font Awesome font directory into your project.</li>
<li>Copy font-awesome.less into your bootstrap/less directory.</li>
<li>Open bootstrap.less and replace <code>@import "sprites.less";</code> with <code>@import "font-awesome.less";</code></li>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>Open bootstrap.less and replace <code>@import "sprites.less";</code> with <code>@import "path/to/font-awesome/less/font-awesome.less";</code></li>
<li>
Open your project's font-awesome.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory.
{% highlight html %}
@ -78,8 +69,8 @@
<h2 class="page-header">Not using Bootstrap?</h2>
<p>Font Awesome works just as well without Bootstrap.</p>
<ol>
<li>Copy the Font Awesome font directory into your project.</li>
<li>Copy font-awesome.less or font-awesome.min.css into your project.</li>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>Follow the above directions and skip the Bootstrap parts.</li>
<li>Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).</li>
<li>Check out the <a href="{{ site.baseurl }}examples/">examples</a> to start using Font Awesome!</li>
</ol>
@ -94,10 +85,10 @@
<li>
In the <code>&lt;head&gt;</code> of your html, reference the location to your font-awesome-ie7.min.css.
{% highlight html %}
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->{% endhighlight %}
</li>
<li>Go complain to whoever decided your project needs IE7 support.</li>

View file

@ -5,8 +5,8 @@
{% endif %}
<h2 class="page-header">New Icons in {{ site.font_awesome.version }}</h2>
<p>
You asked, Font Awesome delivers with {{ site.font_awesome.new_icon_count }} shiny new icons in version {{ site.font_awesome.version }}. New icons can be requested on the
<a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome GitHub project</a>.
You asked, Font Awesome delivers with {{ site.font_awesome.new_icon_count }} shiny new icons in version {{ site.font_awesome.version }}.
Want to request new icons? Here's how to <a href="{{ site.baseurl }}contribute/#requesting-new-icons">request new icons</a>.
</p>
{% if page.navbar_active == "icons" %}
</div>

View file

@ -38,11 +38,12 @@
<li><a href="{{ site.baseurl }}icon/link"><i class="icon-link"></i> icon-link</a></li>
<li><a href="{{ site.baseurl }}icon/unlink"><i class="icon-unlink"></i> icon-unlink</a></li>
<li><a href="{{ site.baseurl }}icon/paper-clip"><i class="icon-paper-clip"></i> icon-paper-clip</a></li>
<li><a href="{{ site.baseurl }}icon/columns"><i class="icon-columns"></i> icon-columns</a></li>
<li><a href="{{ site.baseurl }}icon/eraser"><i class="icon-eraser"></i> icon-eraser</a></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/columns"><i class="icon-columns"></i> icon-columns</a></li>
<li><a href="{{ site.baseurl }}icon/table"><i class="icon-table"></i> icon-table</a></li>
<li><a href="{{ site.baseurl }}icon/th-large"><i class="icon-th-large"></i> icon-th-large</a></li>
<li><a href="{{ site.baseurl }}icon/th"><i class="icon-th"></i> icon-th</a></li>

View file

@ -588,11 +588,11 @@ a.text-error:focus {
color: #721c15;
}
.text-info {
color: #007dbc;
color: #005f9b;
}
a.text-info:hover,
a.text-info:focus {
color: #005b89;
color: #004068;
}
.text-success {
color: #5c7f41;
@ -1337,19 +1337,19 @@ input[type="checkbox"][readonly] {
.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
color: #007dbc;
color: #005f9b;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
color: #007dbc;
color: #005f9b;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
border-color: #007dbc;
border-color: #005f9b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -1357,16 +1357,16 @@ input[type="checkbox"][readonly] {
.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
border-color: #005b89;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #23b5ff;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #23b5ff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #23b5ff;
border-color: #004068;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #029dff;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #029dff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #029dff;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
color: #007dbc;
background-color: #e6f5fc;
border-color: #007dbc;
color: #005f9b;
background-color: #f0f9ff;
border-color: #005f9b;
}
input:focus:invalid,
textarea:focus:invalid,
@ -1928,7 +1928,7 @@ table th[class*="span"],
background-color: #fffcee;
}
.table tbody tr.info > td {
background-color: #e6f5fc;
background-color: #f0f9ff;
}
.table-hover tbody tr.success:hover > td {
background-color: #e8f4d4;
@ -1940,7 +1940,7 @@ table th[class*="span"],
background-color: #fff8d5;
}
.table-hover tbody tr.info:hover > td {
background-color: #cfecf9;
background-color: #d7efff;
}
[class^="icon-"],
[class*=" icon-"] {
@ -2888,17 +2888,17 @@ input[type="button"].btn-block {
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #8c221a;
background-image: -moz-linear-gradient(top, #9d261d, #721c15);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9d261d), to(#721c15));
background-image: -webkit-linear-gradient(top, #9d261d, #721c15);
background-image: -o-linear-gradient(top, #9d261d, #721c15);
background-image: linear-gradient(to bottom, #9d261d, #721c15);
background-color: #cc4036;
background-image: -moz-linear-gradient(top, #dc4e44, #b32b21);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc4e44), to(#b32b21));
background-image: -webkit-linear-gradient(top, #dc4e44, #b32b21);
background-image: -o-linear-gradient(top, #dc4e44, #b32b21);
background-image: linear-gradient(to bottom, #dc4e44, #b32b21);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d261d', endColorstr='#ff721c15', GradientType=0);
border-color: #721c15 #721c15 #310c09;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdc4e44', endColorstr='#ffb32b21', GradientType=0);
border-color: #b32b21 #b32b21 #721c15;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #721c15;
*background-color: #b32b21;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
@ -2910,12 +2910,12 @@ input[type="button"].btn-block {
.btn-danger.disabled,
.btn-danger[disabled] {
color: #ffffff;
background-color: #721c15;
*background-color: #5c1611;
background-color: #b32b21;
*background-color: #9d261d;
}
.btn-danger:active,
.btn-danger.active {
background-color: #47110d \9;
background-color: #872119 \9;
}
.btn-success {
color: #ffffff;
@ -3204,7 +3204,7 @@ input[type="submit"].btn.btn-mini {
background-color: #cc9600;
}
.btn-group.open .btn-danger.dropdown-toggle {
background-color: #721c15;
background-color: #b32b21;
}
.btn-group.open .btn-success.dropdown-toggle {
background-color: #678943;
@ -3324,12 +3324,12 @@ input[type="submit"].btn.btn-mini {
color: #9d261d;
}
.alert-info {
background-color: #e6f5fc;
border-color: #ccebf8;
color: #007dbc;
background-color: #f0f9ff;
border-color: #ccf3ff;
color: #005f9b;
}
.alert-info h4 {
color: #007dbc;
color: #005f9b;
}
.alert-block {
padding-top: 14px;
@ -4850,11 +4850,11 @@ a.badge:focus {
}
.label-info,
.badge-info {
background-color: #007dbc;
background-color: #005f9b;
}
.label-info[href],
.badge-info[href] {
background-color: #005b89;
background-color: #004068;
}
.label-inverse,
.badge-inverse {

View file

@ -142,8 +142,8 @@
@btnWarningBackground: @yellow;
@btnWarningBackgroundHighlight: @yellowDark;
@btnDangerBackground: @red;
@btnDangerBackgroundHighlight: @redDark;
@btnDangerBackground: lighten(@red, 20%);
@btnDangerBackgroundHighlight: lighten(@red, 5%);
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@ -284,9 +284,9 @@
@successBackground: @greenLighter;
@successBorder: darken(spin(@successBackground, -10), 13%);
@infoText: mix(@blue, @blueDark, 50%);
@infoBackground: mix(@white, @blue, 90%);
@infoBorder: mix(@white, @blue, 80%);
@infoText: @blueDark;
@infoBackground: @blueLighter;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
@inverseText: @white;
@inverseBackground: @gray;

View file

@ -1931,6 +1931,7 @@ icons:
unicode: f12d
created: 3.1.0
categories:
- Text Editor Icons
- Web Application Icons
- name: puzzle-piece