mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2025-01-13 16:50:29 +08:00
more docs cleanup
This commit is contained in:
parent
71d44cd49d
commit
44ed2461f5
@ -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
|
||||
|
@ -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><head></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><head></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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -1931,6 +1931,7 @@ icons:
|
||||
unicode: f12d
|
||||
created: 3.1.0
|
||||
categories:
|
||||
- Text Editor Icons
|
||||
- Web Application Icons
|
||||
|
||||
- name: puzzle-piece
|
||||
|
Loading…
Reference in New Issue
Block a user