diff options
| -rw-r--r-- | _config.yml | 2 | ||||
| -rw-r--r-- | build/_includes/get-started.html | 196 | ||||
| -rw-r--r-- | build/_includes/navbar.html | 2 | ||||
| -rw-r--r-- | build/assets/css/font-awesome.css | 6 | ||||
| -rw-r--r-- | build/assets/css/site.css | 2 | ||||
| -rw-r--r-- | build/assets/less/font-awesome.less | 6 | ||||
| -rw-r--r-- | build/assets/less/site.less | 2 | ||||
| -rw-r--r-- | build/get-started/index.html | 2 |
8 files changed, 107 insertions, 111 deletions
diff --git a/_config.yml b/_config.yml index 3c8607537..034f78a3c 100644 --- a/_config.yml +++ b/_config.yml @@ -2,7 +2,7 @@ safe: false auto: true server: true server_port: 7998 -baseurl: /Font-Awesome/ +baseurl: /Font-Awesome/ # Where GitHub serves the project up from url: http://localhost:7998 source: build diff --git a/build/_includes/get-started.html b/build/_includes/get-started.html index 350f6d056..983bc399b 100644 --- a/build/_includes/get-started.html +++ b/build/_includes/get-started.html @@ -1,110 +1,106 @@ -<section id="integration"> - <div class="row margin-bottom"> +<section> + <div class="row"> <div class="span8"> - <h2 class="page-header">Integration</h2> - <p>It's easy to get started with Font Awesome. And it plays really nicely with <a href="{{ site.bootstrap.url }}">Bootstrap</a>.</p> + <h2 class="page-header">Ways to use Font Awesome</h2> + <p>It's easy to get started with Font Awesome. And it plays really nicely with <a href="{{ site.bootstrap.url }}">Bootstrap</a>!</p> </div> <div class="span4"> <br> {% include ads/carbon-light-horizontal.html %} </div> </div> +</section> - <div class="row"> - <div class="span12"> - <h4>Easy Bootstrap + Font Awesome Integration</h4> - </div> - <div class="span3"> - <p>Use this method to integrate Font Awesome with the default Bootstrap CSS.</p> - </div> - <div class="span9"> - <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.</p> - </li> - <li> - In the <code><head></code> of your html, reference the location to your font-awesome.min.css. -<pre class="prettyprint linenums"> -<link rel="stylesheet" href="../css/bootstrap.min.css"> -<link rel="stylesheet" href="../css/font-awesome.min.css"> -</pre> - </li> - <li>Check out the examples to start using Font Awesome!</li> - </ol> - </div> - </div> - <div class="row"> - <div class="span12"> - <h4>Custom Bootstrap + Font Awesome Integration using LESS</h4> - </div> - <div class="span3"> - <p>Use this method to integrate Font Awesome with Twitter Bootstrap using LESS.</p> - </div> - <div class="span9"> - <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> - Open your project's font-awesome.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory. -<pre class="prettyprint linenums"> +<section class="margin-top-large"> + <h3>EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h3> + <p>Add Font Awesome + Bootstrap into your website with two lines of code. You don't even have to download or install anything!</p> + <ol> + <li> + Paste the following code into the <code><head></code> section of your site's HTML. +{% highlight html %} +<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> +<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/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 skip pasting in the first line. + </div> + </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 two lines of code. + </li> + <li> + Check out the <a href="{{ site.baseurl }}examples/">examples</a> to start using Font Awesome! + </li> + </ol> +</section> + +<section> + <h3>EASY: Default CSS</h3> + <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.</p> + </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"> +{% endhighlight %} + </li> + <li>Check out the <a href="{{ site.baseurl }}examples/">examples</a> to start using Font Awesome!</li> + </ol> +</section> + +<section> + <h3>PRO: Custom LESS</h3> + <p>Use this method to customize Font Awesome and Bootstrap 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> + Open your project's font-awesome.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory. +{% highlight html %} @FontAwesomePath: "../font"; -</pre> - <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> - </li> - <li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li> - <li>Check out the examples to start using Font Awesome!</li> - </ol> - </div> - </div> - <div class="row"> - <div class="span12"> - <h4>Custom Bootstrap + Font Awesome Integration using SASS or SCSS</h4> - <p>I have never used either, so let me know if the included SCSS or SASS files have issues.</p> - </div> - </div> - <div class="row"> - <div class="span12"> - <h4>Not using Bootstrap?</h4> - </div> - <div class="span3"> - <p>Font Awesome works just as well without Twitter Bootstrap.</p> - </div> - <div class="span9"> - <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>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 examples to start using Font Awesome!</li> - </ol> - </div> - </div> - <div class="row"> - <div class="span12"> - <h4>Need IE7 Support?</h4> - </div> - <div class="span3"> - <p>Font Awesome supports IE7. If you need it, you have my condolences.</p> - </div> - <div class="span9"> - <ol> - <li>Get Font Awesome working properly in a modern browser.</li> - <li>Copy font-awesome-ie7.min.css into your project.</li> - <li> - In the <code><head></code> of your html, reference the location to your font-awesome-ie7.min.css. -<pre class="prettyprint linenums"> -<link rel="stylesheet" href="../css/bootstrap.min.css"> -<link rel="stylesheet" href="../css/font-awesome.min.css"> -<!--[if IE 7]> -<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> -<![endif]--> -</pre> - </li> - <li>Go complain to whoever decided your project needs IE7 support.</li> - </ol> - </div> - </div> +{% endhighlight %} + <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> + </li> + <li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li> + <li>Check out the <a href="{{ site.baseurl }}examples/">examples</a> to start using Font Awesome!</li> + </ol> +</section> + +<section> + <h3>Not using Bootstrap?</h3> + <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>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> +</section> + +<section> + <h3>Need IE7 Support?</h3> + <p>Font Awesome supports IE7. If you need it, you have my condolences.</p> + <ol> + <li>Get Font Awesome working properly in a modern browser.</li> + <li>Copy font-awesome-ie7.min.css into your project.</li> + <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"> +<!--[if IE 7]> + <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> +<![endif]-->{% endhighlight %} + </li> + <li>Go complain to whoever decided your project needs IE7 support.</li> + </ol> </section> diff --git a/build/_includes/navbar.html b/build/_includes/navbar.html index b3825f2ba..b4cdbdb18 100644 --- a/build/_includes/navbar.html +++ b/build/_includes/navbar.html @@ -6,8 +6,8 @@ <li{% if page.navbar_active == "home" %} class="active"{% endif %}><a href="{{ site.baseurl }}">Home</a></li> <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ site.baseurl }}get-started/">Get Started</a></li> <li{% if page.navbar_active == "icons" %} class="active"{% endif %}><a href="{{ site.baseurl }}icons/">Icons</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 == "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 == "roadmap" %} class="active"{% endif %}><a href="{{ site.baseurl }}roadmap/">Roadmap</a></li> <li{% if page.navbar_active == "thanks" %} class="active"{% endif %}><a href="{{ site.baseurl }}thanks/">Say Thanks</a></li> </ul> diff --git a/build/assets/css/font-awesome.css b/build/assets/css/font-awesome.css index 9004485e8..cc4a74761 100644 --- a/build/assets/css/font-awesome.css +++ b/build/assets/css/font-awesome.css @@ -129,12 +129,12 @@ li [class*=" icon-"].icon-large, } ul.icons-ul { list-style-type: none; - text-indent: -0.6428571428571429em; - margin-left: 2em; + text-indent: -0.7142857142857143em; + margin-left: 2.142857142857143em; } ul.icons-ul > li [class^="icon-"], ul.icons-ul > li .icon-li { - width: 0.6428571428571429em; + width: 0.7142857142857143em; } [class^="icon-"].hide, [class*=" icon-"].hide { diff --git a/build/assets/css/site.css b/build/assets/css/site.css index 99b96d89f..500a1f03e 100644 --- a/build/assets/css/site.css +++ b/build/assets/css/site.css @@ -5702,7 +5702,7 @@ h6 { color: #333333; } section { - padding-top: 40px; + margin-top: 40px; } #social-buttons { padding: 22px 0 17px; diff --git a/build/assets/less/font-awesome.less b/build/assets/less/font-awesome.less index 3ee4459f6..4e9903cf7 100644 --- a/build/assets/less/font-awesome.less +++ b/build/assets/less/font-awesome.less @@ -134,13 +134,13 @@ li, .nav li { ul.icons-ul { list-style-type: none; - text-indent: -9/14em; - margin-left: 28/14em; + text-indent: -10/14em; + margin-left: 30/14em; > li { [class^="icon-"], .icon-li { - width: 9/14em; + width: 10/14em; } } } diff --git a/build/assets/less/site.less b/build/assets/less/site.less index 64c805ec1..8c7a6d4ca 100644 --- a/build/assets/less/site.less +++ b/build/assets/less/site.less @@ -192,7 +192,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; } } section { - padding-top: 40px; + margin-top: 40px; } #social-buttons { diff --git a/build/get-started/index.html b/build/get-started/index.html index b99be0f00..52665e6a6 100644 --- a/build/get-started/index.html +++ b/build/get-started/index.html @@ -4,7 +4,7 @@ title: Get Started with Font Awesome navbar_active: get-started --- {% capture jumbotron_h1 %}<i class="icon-cogs icon-large"></i> Get Started{% endcapture %} -{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.font-awesome.version }} up and running{% endcapture %} +{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.font-awesome.version }} on your website{% endcapture %} {% include jumbotron.html %} {% include stripe-social.html %} |