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

simplifying src structure

Browse Source
This commit is contained in:
davegandy 2013-10-19 15:20:03 -04:00
parent bc6860866b
commit 579c8efe4e
12 changed files with 235 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/_includes/cheatsheet.html
View File

@ -1,19 +0,0 @@
{% capture stripe_ad_content %}
<p class="lead">
Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy
and paste the icons (not the unicode) directly into your designs.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
<div class="row">
{% for icon in icons %}
<div class="col-md-4 col-sm-6 col-lg-3">
<i class="fa-icon fa-icon-fixed-width">&#x{{ icon.unicode }}</i>
fa-icon-{{ icon.id }}
<span class="muted">(&amp;#x{{ icon.unicode }};)</span>
</div>
{% endfor %}
</div>

20
src/_includes/community.html
View File

@ -1,20 +0,0 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome has a vibrant community of folks helping each other out. You can
<a href="#getting-support">get support</a>,
<a href="#reporting-bugs">report bugs</a>,
<a href="#requesting-new-icons">request new icons</a>,
<a href="#submitting-pull-requests">submit pull requests</a>, and
<a href="#project-milestones">check upcoming milestones</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include community/getting-support.html %}
{% include community/reporting-bugs.html %}
{% include community/requesting-new-icons.html %}
{% include community/submitting-pull-requests.html %}
{% include community/project-milestones.html %}
{% include thanks-to.html %}
{% include tell-me-thanks.html %}

22
src/_includes/examples.html
View File

@ -1,22 +0,0 @@
{% capture stripe_ad_content %}
<p class="lead">
After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place Font Awesome icons just about
anywhere with the <code>&lt;i&gt;</code> tag.
Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include examples/inline-icons.html %}
{% include examples/larger-icons.html %}
{% include examples/bordered-pulled.html %}
{% include examples/buttons.html %}
{% include examples/button-groups.html %}
{% include examples/button-dropdowns.html %}
{% include examples/list-bullets.html %}
{% include examples/navigation.html %}
{% include examples/form-inputs.html %}
{% include examples/animated-spinner.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/custom.html %}

98
src/_includes/get-started.html
View File

@ -1,98 +0,0 @@
{% 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 3</a>!
</p>
{% endcapture %}
{% include stripe-ad.html %}
<div id="bootstrapcdn">
<h2 class="page-header">EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h2>
<p>Add Font Awesome into your website with a single line of code. You don't even have to download or install anything!</p>
<ol>
<li>
Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
{% highlight html %}
<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet">
{% endhighlight %}
</li>
<li>
Pat yourself on the back for your scalable-vector-icons-on-the-website
<a href="http://37signals.com/svn/posts/312-lingo-judo">judo solution</a> in a single line of code.
</li>
<li>
Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!
</li>
</ol>
</div>
<section id="default-css">
<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 entire <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="path/to/font-awesome/css/font-awesome.min.css">
{% endhighlight %}
</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
</ol>
</section>
<section id="ruby-gem">
<h2 class="page-header">EASY: <a href="https://github.com/FortAwesome/font-awesome-sass">Font Awesome Ruby Gem</a></h2>
<p>
Use the <a href="https://github.com/FortAwesome/font-awesome-sass">Official Font Awesome Ruby Gem</a> to easily get Font
Awesome into a Rails project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>.
</p>
<ol>
<li>
Add this line to your application's Gemfile:
{% highlight bash %}
gem 'font-awesome-sass'
{% endhighlight %}
</li>
<li>
And then execute:
{% highlight bash %}
$ bundle
{% endhighlight %}
</li>
<li>Or install it yourself as:
{% highlight bash %}
$ gem install font-awesome-sass
{% endhighlight %}
</li>
</ol>
</section>
<section id="custom-less">
<h2 class="page-header">PRO: Custom LESS or SCSS</h2>
<p>Use this method to customize Font Awesome {{ site.bootstrap.version }} using LESS or SCSS.</p>
<ol>
<li>Copy the <code>font-awesome/</code> directory into your project.</li>
<li>
Open your project's font-awesome/variables.less and edit the <code>@fa-font-path</code> or <code>$fa-font-path</code>
variable to point to your font directory.
{% 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>
</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>
</ol>
</section>
<section class="need-ie7">
<h2 class="page-header">Need IE7 Support?</h2>
<p>
If you need IE7 support, you have my condolences. Really. Font Awesome {{ site.fontawesome.version }}
doesn't support IE7, but an older version does. You'll need to check out the
<a href="{{ page.relative_path }}3.2.1/get-started/#need-ie7">3.2.1 instructions for using IE7</a>. Then go complain to
whomever decided your project needs IE7 support.
</p>
</section>

18
src/_includes/icons.html
View File

@ -1,18 +0,0 @@
{% capture stripe_ad_content %}
<p class="lead">
You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
<!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->
Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include icons/new.html %}
{% include icons/web-application.html %}
{% include icons/currency.html %}
{% include icons/text-editor.html %}
{% include icons/directional.html %}
{% include icons/video-player.html %}
{% include icons/brand.html %}
{% include icons/medical.html %}

58
src/_includes/license.html
View File

@ -1,58 +0,0 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome is fully open source and is GPL compatible. You can use it for commercial projects, open source
projects, or really just about whatever you want.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<section>
<div class="alert alert-info">
<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:
"Font Awesome by Dave Gandy - http://fontawesome.io".
</li>
</ul>
</div>
</section>
<section>
<h2 class="page-header">Font License</h2>
<ul>
<li>
Applies to all desktop and webfont files in the following directory:
<code>font-awesome/fonts/</code>.
</li>
<li>License: {{ site.fontawesome.license.font.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Code License</h2>
<ul>
<li>
Applies to all CSS and LESS files in the following directories:
<code>font-awesome/css/</code>,
<code>font-awesome/less/</code>, and
<code>font-awesome/scss/</code>.
</li>
<li>License: {{ site.fontawesome.license.code.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Documentation License</h2>
<ul>
<li>Applies to all Font Awesome project files that are not a part of the Font or Code licenses.</li>
<li>License: {{ site.fontawesome.license.documentation.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Brand Icons</h2>
{% include brand-license.html %}
</section>

20
src/cheatsheet.html
View File

@ -10,5 +10,23 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include cheatsheet.html %} {% capture stripe_ad_content %}
<p class="lead">
Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy
and paste the icons (not the unicode) directly into your designs.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
<div class="row">
{% for icon in icons %}
<div class="col-md-4 col-sm-6">
<i class="fa-icon fa-icon-fixed-width">&#x{{ icon.unicode }}</i>
fa-icon-{{ icon.id }}
<span class="muted">(&amp;#x{{ icon.unicode }};)</span>
</div>
{% endfor %}
</div>
</div> </div>

21
src/community.html
View File

@ -11,5 +11,24 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include community.html %} {% capture stripe_ad_content %}
<p class="lead">
Font Awesome has a vibrant community of folks helping each other out. You can
<a href="#getting-support">get support</a>,
<a href="#reporting-bugs">report bugs</a>,
<a href="#requesting-new-icons">request new icons</a>,
<a href="#submitting-pull-requests">submit pull requests</a>, and
<a href="#project-milestones">check upcoming milestones</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include community/getting-support.html %}
{% include community/reporting-bugs.html %}
{% include community/requesting-new-icons.html %}
{% include community/submitting-pull-requests.html %}
{% include community/project-milestones.html %}
{% include thanks-to.html %}
{% include tell-me-thanks.html %}
</div> </div>

23
src/examples.html
View File

@ -11,5 +11,26 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include examples.html %} {% capture stripe_ad_content %}
<p class="lead">
After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place Font Awesome icons just about
anywhere with the <code>&lt;i&gt;</code> tag.
Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include examples/inline-icons.html %}
{% include examples/larger-icons.html %}
{% include examples/bordered-pulled.html %}
{% include examples/buttons.html %}
{% include examples/button-groups.html %}
{% include examples/button-dropdowns.html %}
{% include examples/list-bullets.html %}
{% include examples/navigation.html %}
{% include examples/form-inputs.html %}
{% include examples/animated-spinner.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/custom.html %}
</div> </div>

99
src/get-started.html
View File

@ -11,5 +11,102 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include get-started.html %} {% 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 3</a>!
</p>
{% endcapture %}
{% include stripe-ad.html %}
<div id="bootstrapcdn">
<h2 class="page-header">EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h2>
<p>Add Font Awesome into your website with a single line of code. You don't even have to download or install anything!</p>
<ol>
<li>
Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
{% highlight html %}
<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet">
{% endhighlight %}
</li>
<li>
Pat yourself on the back for your scalable-vector-icons-on-the-website
<a href="http://37signals.com/svn/posts/312-lingo-judo">judo solution</a> in a single line of code.
</li>
<li>
Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!
</li>
</ol>
</div>
<section id="default-css">
<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 entire <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="path/to/font-awesome/css/font-awesome.min.css">
{% endhighlight %}
</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
</ol>
</section>
<section id="ruby-gem">
<h2 class="page-header">EASY: <a href="https://github.com/FortAwesome/font-awesome-sass">Font Awesome Ruby Gem</a></h2>
<p>
Use the <a href="https://github.com/FortAwesome/font-awesome-sass">Official Font Awesome Ruby Gem</a> to easily get Font
Awesome into a Rails project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>.
</p>
<ol>
<li>
Add this line to your application's Gemfile:
{% highlight bash %}
gem 'font-awesome-sass'
{% endhighlight %}
</li>
<li>
And then execute:
{% highlight bash %}
$ bundle
{% endhighlight %}
</li>
<li>Or install it yourself as:
{% highlight bash %}
$ gem install font-awesome-sass
{% endhighlight %}
</li>
</ol>
</section>
<section id="custom-less">
<h2 class="page-header">PRO: Custom LESS or SCSS</h2>
<p>Use this method to customize Font Awesome {{ site.bootstrap.version }} using LESS or SCSS.</p>
<ol>
<li>Copy the <code>font-awesome/</code> directory into your project.</li>
<li>
Open your project's font-awesome/variables.less and edit the <code>@fa-font-path</code> or <code>$fa-font-path</code>
variable to point to your font directory.
{% 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>
</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>
</ol>
</section>
<section class="need-ie7">
<h2 class="page-header">Need IE7 Support?</h2>
<p>
If you need IE7 support, you have my condolences. Really. Font Awesome {{ site.fontawesome.version }}
doesn't support IE7, but an older version does. You'll need to check out the
<a href="{{ page.relative_path }}3.2.1/get-started/#need-ie7">3.2.1 instructions for using IE7</a>. Then go complain to
whomever decided your project needs IE7 support.
</p>
</section>
</div> </div>

19
src/icons.html
View File

@ -11,5 +11,22 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include icons.html %} {% capture stripe_ad_content %}
<p class="lead">
You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
<!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->
Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include icons/new.html %}
{% include icons/web-application.html %}
{% include icons/currency.html %}
{% include icons/text-editor.html %}
{% include icons/directional.html %}
{% include icons/video-player.html %}
{% include icons/brand.html %}
{% include icons/medical.html %}
</div> </div>

59
src/license.html
View File

@ -11,5 +11,62 @@ relative_path: ../
{% include stripe-social.html %} {% include stripe-social.html %}
<div class="container"> <div class="container">
{% include license.html %} {% capture stripe_ad_content %}
<p class="lead">
Font Awesome is fully open source and is GPL compatible. You can use it for commercial projects, open source
projects, or really just about whatever you want.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<section>
<div class="alert alert-info">
<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:
"Font Awesome by Dave Gandy - http://fontawesome.io".
</li>
</ul>
</div>
</section>
<section>
<h2 class="page-header">Font License</h2>
<ul>
<li>
Applies to all desktop and webfont files in the following directory:
<code>font-awesome/fonts/</code>.
</li>
<li>License: {{ site.fontawesome.license.font.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Code License</h2>
<ul>
<li>
Applies to all CSS and LESS files in the following directories:
<code>font-awesome/css/</code>,
<code>font-awesome/less/</code>, and
<code>font-awesome/scss/</code>.
</li>
<li>License: {{ site.fontawesome.license.code.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Documentation License</h2>
<ul>
<li>Applies to all Font Awesome project files that are not a part of the Font or Code licenses.</li>
<li>License: {{ site.fontawesome.license.documentation.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Brand Icons</h2>
{% include brand-license.html %}
</section>
</div> </div>