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

updating docs

Browse Source
This commit is contained in:
davegandy 2013-05-07 13:45:09 -04:00
parent 864e96638b
commit 66d84cef92
25 changed files with 157 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CNAME Normal file
View File

@ -0,0 +1 @@
fontawesome.io

9
_config.yml
View File

@ -15,16 +15,19 @@ icon_meta: build/icons.yml
icon_layout: icon.html # Relative to _layouts directory
icon_destination: icon # Relative to destination
font-awesome:
font_awesome:
version: 3.1.0
url: http://fortawesome.github.com/Font-Awesome/
url: http://fontawesome.io
legacy_url: http://fortawesome.github.com/Font-Awesome/
author:
name: Dave Gandy
email: dave@davegandy.com
email: dave@fontawesome.io
github:
url: https://github.com/FortAwesome/Font-Awesome
project: Font-Awesome
org: FortAwesome
icon_count: 281
new_icon_count: 32
bootstrap:
version: 2.3.1

42
build/_includes/contribute.html
View File

@ -1,10 +1,46 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome has a vibrant community centered around the <a href="{{ site.font_awesome.github.url }}">GitHub project</a>.
You can request new icons, report bugs, submit pull requests, and check upcoming milestones.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<div>
<h2 class="page-header">Requesting New Icons</h2>
<p>
New icons mostly start as requests by the
<a href="{{ site.font_awesome.github.url }}/issues">Font Awesome community on GitHub</a>. Want to request a new
icon? Here are some things to keep in mind:
</p>
<ol>
<li>Please be nice. Font Awesome is a happy place.</li>
<li>Please <a href="{{ site.font_awesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists.</li>
<li>
Please and thank you if you include the following:
<ul>
<li>
Title your <a href="{{ site.font_awesome.github.url }}/issues/new?title=Icon%20Request:%20icon-name">new issue</a>
<code>Icon request: icon-name</code>.
</li>
<li>Include a few use cases for your requested icon. How do you plan on using it?</li>
<li>Attach a single color image or two that represent the idea you're going for.</li>
</ul>
</li>
<li>
Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon
to represent happiness. It's easier to make a smiley face. <i class="icon-smile"></i>
</li>
</ol>
</div>
<section>
<h2 class="page-header">GitHub Project</h2>
<p class="lead">
Found a bug? Want to request a new icon? Want to see what's up next for the project?
<a href="{{ site.font-awesome.github.url }}/issues">Submit an issue</a> or a
<a href="{{ site.font-awesome.github.url }}/pulls">pull request</a> on the
<a href="{{ site.font-awesome.github.url }}">GitHub project</a>. Here are a few guidelines:
<a href="{{ site.font_awesome.github.url }}/issues">Submit an issue</a> or a
<a href="{{ site.font_awesome.github.url }}/pulls">pull request</a> on the
<a href="{{ site.font_awesome.github.url }}">GitHub project</a>. Here are a few guidelines:
</p>
<ol>
<li>Be nice. No one likes a jackass.</li>

4
build/_includes/examples.html
View File

@ -106,7 +106,7 @@
</div>
<div class="span4">
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font_awesome.version }}</a>
</p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
</div>
@ -246,7 +246,7 @@ Use a few of the new styles together ... lots of new possibilities.
<i class="icon-cog"></i> Settings</a>
</p>
<p>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font_awesome.version }}</a>
</p>
<p>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

6
build/_includes/footer.html
View File

@ -1,7 +1,7 @@
<footer class="footer">
<div class="container text-center">
<div>
<i class="icon-flag"></i> Font Awesome {{ site.font-awesome.version }} &middot;
<i class="icon-flag"></i> Font Awesome {{ site.font_awesome.version }} &middot;
Created and Maintained by Dave Gandy &middot;
<a href="http://twitter.com/byscuits">@byscuits</a>
</div>
@ -14,8 +14,8 @@
Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
</div>
<div class="project">
<a href="{{ site.font-awesome.github.url }}">GitHub Project</a> &middot;
<a href="{{ site.font-awesome.github.url }}/issues">Issues</a>
<a href="{{ site.font_awesome.github.url }}">GitHub Project</a> &middot;
<a href="{{ site.font_awesome.github.url }}/issues">Issues</a>
</div>
</div>
</footer>

14
build/_includes/get-started.html
View File

@ -1,17 +1,11 @@
<section>
<div class="row stripe-ad">
<div class="span8">
{% capture stripe_ad_content %}
<p class="lead">
Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and
customize the LESS yourself! Font Awesome even plays nicely with
<a href="{{ site.bootstrap.url }}">Bootstrap</a>!
</p>
</div>
<div class="span4">
{% include ads/carbon-light-horizontal.html %}
</div>
</div>
</section>
{% endcapture %}
{% include stripe-ad.html %}
<section class="margin-top-large">
<h2 class="page-header">EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h2>
@ -21,7 +15,7 @@
Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
{% highlight html %}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/{{ site.bootstrap.version }}/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.font-awesome.version }}/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.font_awesome.version }}/css/font-awesome.css" rel="stylesheet">
{% endhighlight %}
<div class="alert alert-info margin-top">
<i class="icon-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.

4
build/_includes/icons/new.html
View File

@ -3,9 +3,9 @@
<div class="row">
<div class="span8">
{% endif %}
<h2 class="page-header">New Icons in {{ site.font-awesome.version }}</h2>
<h2 class="page-header">New Icons in {{ site.font_awesome.version }}</h2>
<p>
You asked, Font Awesome delivers with 40 shiny new icons in version {{ site.font-awesome.version }}. New icons can be requested on the
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>.
</p>
{% if page.navbar_active == "icons" %}

6
build/_includes/jumbotron-slider.html
View File

@ -6,7 +6,7 @@
<h1>Font Awesome</h1>
<p>The iconic font designed for Bootstrap</p>
<div class="actions">
<a class="btn btn-primary btn-large" href="{{ site.font-awesome.github.url }}/zipball/master"
<a class="btn btn-primary btn-large" href="{{ site.font_awesome.github.url }}/zipball/master"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<i class="icon-download-alt icon-large"></i>&nbsp;&nbsp;
Download
@ -14,10 +14,10 @@
</a>
</div>
<div class="shameless-self-promotion">
<a href="{{ site.font-awesome.github.url }}" target="_blank"
<a href="{{ site.font_awesome.github.url }}" target="_blank"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Version {{ site.font-awesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Version {{ site.font_awesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Created &amp; Maintained by Dave Gandy
</div>
</div>

0
build/_includes/roadmap.html → build/_includes/license.html
View File

4
build/_includes/navbar.html
View File

@ -9,10 +9,10 @@
<li{% if page.navbar_active == "examples" %} class="active"{% endif %}><a href="{{ site.baseurl }}examples/">Examples</a></li>
<li{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ site.baseurl }}whats-new/">What's New</a></li>
<li{% if page.navbar_active == "contribute" %} class="active"{% endif %}><a href="{{ site.baseurl }}contribute/">Contribute</a></li>
<li{% if page.navbar_active == "roadmap" %} class="active"{% endif %}><a href="{{ site.baseurl }}roadmap/">Roadmap</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ site.baseurl }}license/">License</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="mailto:{{ site.font-awesome.author.email }}"><i class="icon-envelope"></i> Me</a></li>
<li><a href="mailto:{{ site.font_awesome.author.email }}"><i class="icon-envelope"></i> Me</a></li>
</ul>
</div>
</div>

10
build/_includes/stripe-ad.html Normal file
View File

@ -0,0 +1,10 @@
<section>
<div class="row stripe-ad">
<div class="span8">
{{ stripe_ad_content }}
</div>
<div class="span4">
{% include ads/carbon-light-horizontal.html %}
</div>
</div>
</section>

2
build/_includes/stripe-social.html
View File

@ -11,7 +11,7 @@
<a href="https://twitter.com/fortaweso_me" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fortaweso_me</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.font-awesome.url }}" data-count="horizontal" data-via="fortaweso_me" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.font_awesome.url }}" data-text="#FontAwesome, the iconic font designed for Bootstrap" data-counturl="{{ site.font_awesome.legacy_url }}" data-count="horizontal" data-via="fortaweso_me" data-related="byscuits:Creator of Font Awesome">Tweet</a>
</li>
</ul>

33
build/_includes/whats-new.html
View File

@ -1,44 +1,39 @@
<section id="whats-new">
<div class="row stripe-ad">
<div class="span8">
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
{{ site.font-awesome.version }}. Have some ideas for new features?
{{ site.font_awesome.version }}. Have some ideas for new features?
<a href="{{ site.baseurl }}contribute/">Help contribute</a>.
</p>
</div>
<div class="span4">
{% include ads/carbon-light-horizontal.html %}
</div>
</div>
{% endcapture %}
{% include stripe-ad.html %}
<section id="whats-new">
<div class="row">
<div class="span4">
<h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
Every single icon re-created from the ground up to be optimized for Bootstrap's default 14px.
</div>
<div class="span4">
<h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">subset</a> to get just the icons you need.
<h4><i class="icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
</div>
<div class="span4">
<h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4>
SIL open font license, MIT license for code. No more attribution required, but much appreciated.
<h4><i class="icon-legal"></i> <a href="{{ site.baseurl }}license/">Better License</a></h4>
SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
</div>
</div>
<div class="row">
<div class="span4">
<h4><i class="icon-lightbulb"></i> 40 New Icons in 3.0</h4>
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
<h4><i class="icon-lightbulb"></i> {{ site.font_awesome.new_icon_count }} New Icons in 3.0</h4>
Requested by the active community on the <a href="{{ site.font_awesome.github.url }}">Font Awesome GitHub project</a>.
</div>
<div class="span4">
<h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4>
<a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
<h4><i class="icon-spinner icon-spin"></i> <a href="{{ site.baseurl }}examples/">New Styles</a></h4>
<a href="{{ site.baseurl }}examples/">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
</div>
<div class="span4">
<h4><i class="icon-resize-small"></i> 28% Smaller Payload</h4>
3.0 is smaller, even with 16% more icons. Crazy small if you <a target="_blank" href="http://icnfnt.com/">subset</a> just the icons you need.
3.0 is smaller, even with 16% more icons. Crazy small if you <a href="http://icnfnt.com/">subset</a> just the icons you need.
</div>
</div>
</section>

14
build/_includes/why.html
View File

@ -1,22 +1,22 @@
<div id="why">
<div class="row">
<div class="span4">
<h4><i class="icon-flag"></i> One font, 249 icons</h4>
<h4><i class="icon-flag"></i> One Font, {{ site.font_awesome.icon_count }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
<div class="span4">
<h4><i class="icon-pencil"></i> CSS control</h4>
<h4><i class="icon-pencil"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="span4">
<h4><i class="icon-fullscreen"></i> Infinite scalability</h4>
<h4><i class="icon-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
</div>
<div class="row">
<div class="span4">
<h4><i class="icon-beer"></i> Free, as in Beer</h4>
Font Awesome is completely free for commercial use. Check out the <a href="#license">license</a>.
Font Awesome is completely free for commercial use. Check out the <a href="{{ site.baseurl }}license/">license</a>.
</div>
<div class="span4">
<h4><i class="icon-ok"></i> IE7 Support</h4>
@ -30,14 +30,14 @@
<div class="row">
<div class="span4">
<h4><i class="icon-thumbs-up"></i> Made for Bootstrap</h4>
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}" target="_blank">Bootstrap {{ site.bootstrap.version }}</a>.
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
</div>
<div class="span4">
<h4><i class="icon-tint"></i> Designer Friendly</h4>
Install FontAwesome.otf and <a href="design.html" target="_blank">visit the copy & paste page</a>. Happy designing.
Install FontAwesome.otf and <a href="{{ site.baseurl }}design.html">visit the copy & paste page</a>. Happy designing.
</div>
<div class="span4">
<h4><i class="icon-search"></i> Screen reader compatible</h4>
<h4><i class="icon-search"></i> Screen Reader Compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts.
</div>
</div>

2
build/_layouts/icon.html
View File

@ -16,7 +16,7 @@ title_prefix: Font Awesome Icons
icon-{{ page.icon['id'] }}
<small>
<i class="icon-{{ page.icon['id'] }}"></i> &middot;
Unicode: {{ page.icon['unicode'] }} &middot;
Unicode: <span class="upper">{{ page.icon['unicode'] }}</span> &middot;
Created: v{{ page.icon['created'] }} &middot;
Categories:
{% for category in page.icon['categories'] %}

17
build/assets/css/site.css
View File

@ -5457,6 +5457,12 @@ body {
.strike {
text-decoration: line-through;
}
.upper {
text-transform: uppercase;
}
.lower {
text-transform: lowercase;
}
.navbar .brand {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@ -5768,12 +5774,15 @@ section {
#whats-new .row {
margin-bottom: 20px;
}
#why h4 [class^="icon-"],
#whats-new h4 [class^="icon-"],
#why h4 [class*=" icon-"],
#whats-new h4 [class*=" icon-"] {
#why h4 [class^="icon-"]:before,
#whats-new h4 [class^="icon-"]:before,
#why h4 [class*=" icon-"]:before,
#whats-new h4 [class*=" icon-"]:before {
vertical-align: -10%;
font-size: 28px;
display: inline-block;
width: 1.0714285714285714em;
text-align: center;
margin-right: 5px;
}
#examples .btn-toolbar {

2
build/assets/less/lazy.less
View File

@ -81,3 +81,5 @@
}
}
.strike { text-decoration: line-through; }
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }

17
build/assets/less/site.less
View File

@ -262,18 +262,25 @@ section {
margin-bottom: 20px;
}
h4 {
// line-height: 28px;
[class^="icon-"],
[class*=" icon-"] {
[class^="icon-"]:before,
[class*=" icon-"]:before {
vertical-align: -10%;
font-size: 28px;
// width: 30px;
// height: 30px;
display: inline-block;
width: 30/28em;
text-align: center;
margin-right: 5px;
// color: mix(@grayLight, @grayLighter, 70%);
// Gradient on the icons
// background: -webkit-linear-gradient(mix(@grayLight, @grayLighter, 50%), mix(@gray, @grayLight, 50%));
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
}
}
#examples {
.btn-toolbar {
margin-top: 0;

2
build/contribute/index.html
View File

@ -4,7 +4,7 @@ title: How to Contribute to Font Awesome
navbar_active: contribute
---
{% capture jumbotron_h1 %}<i class="icon-thumbs-up icon-large"></i>&nbsp; Contribute{% endcapture %}
{% capture jumbotron_p %}A few ways to get involved with Font Awesome{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}

2
build/get-started/index.html
View File

@ -4,7 +4,7 @@ title: Get Started with Font Awesome
navbar_active: get-started
---
{% capture jumbotron_h1 %}<i class="icon-cogs icon-large"></i>&nbsp; Get Started{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.font-awesome.version }} onto your website{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.font_awesome.version }} onto your website{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}

2
build/icons/index.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Icons
navbar_active: icons
---
{% capture jumbotron_h1 %}<i class="icon-flag icon-large"></i>&nbsp; The Icons{% endcapture %}
{% capture jumbotron_p %}The complete set of 249 icons in Font Awesome {{ site.font-awesome.version }}{% endcapture %}
{% capture jumbotron_p %}The complete set of {{ site.font_awesome.icon_count }} icons in Font Awesome {{ site.font_awesome.version }}{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}

19
build/index.html
View File

@ -8,20 +8,13 @@ navbar_active: home
{% include stripe-social.html %}
<div class="container">
<section>
<div class="row stripe-ad">
<div class="span8">
<div class="lead">
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome gives you scalable vector icons that can instantly be customized &mdash; size, color, drop shadow,
or anything that can be done with the power of CSS.
</div>
</div>
<div class="span4">
{% include ads/carbon-light-horizontal.html %}
</div>
</div>
</section>
and anything that can be done with the power of CSS.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include why.html %}
{% include special-thanks.html %}

14
build/license/index.html Normal file
View File

@ -0,0 +1,14 @@
---
layout: base
title: Font Awesome License
navbar_active: license
---
{% capture jumbotron_h1 %}<i class="icon-road icon-large"></i>&nbsp; License{% endcapture %}
{% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}
<div class="container">
{% include license.html %}
</div>

14
build/roadmap/index.html
View File

@ -1,14 +0,0 @@
---
layout: base
title: Font Awesome Roadmap
navbar_active: roadmap
---
{% capture jumbotron_h1 %}<i class="icon-road icon-large"></i>&nbsp; Roadmap{% endcapture %}
{% capture jumbotron_p %}The plan for future updates to Font Awesome{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}
<div class="container">
{% include roadmap.html %}
</div>

2
build/whats-new/index.html
View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new
---
{% capture jumbotron_h1 %}<i class="icon-lightbulb icon-large"></i>&nbsp; What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.font-awesome.version }}{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.font_awesome.version }}{% endcapture %}
{% include jumbotron.html %}
{% include stripe-social.html %}