From 4b64af4a4479c2364f1ca3dfbc919db9e9b4bf08 Mon Sep 17 00:00:00 2001 From: davegandy Date: Wed, 16 Oct 2013 16:50:26 -0400 Subject: [PATCH] updating the getting started content. pointing ie7 to old docs --- src/_includes/get-started.html | 89 +++++++++----------- src/assets/less/site/jumbotron-carousel.less | 2 +- 2 files changed, 42 insertions(+), 49 deletions(-) diff --git a/src/_includes/get-started.html b/src/_includes/get-started.html index 068bbcf1a..c74c12036 100644 --- a/src/_includes/get-started.html +++ b/src/_includes/get-started.html @@ -2,28 +2,24 @@

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 - Bootstrap! + Bootstrap 3!

{% endcapture %} {% include stripe-ad.html %}

EASIEST: BootstrapCDN

-

Add Font Awesome + Bootstrap into your website with two lines of code. You don't even have to download or install anything!

+

Add Font Awesome into your website with a single line of code. You don't even have to download or install anything!

  1. Paste the following code into the <head> section of your site's HTML. {% highlight html %} - {% endhighlight %} -
    - Want to use Font Awesome by itself without Bootstrap? Just don't include the first line. -
  2. Pat yourself on the back for your scalable-vector-icons-on-the-website - judo solution in two lines of code. + judo solution in a single line of code.
  3. Check out the examples to start using Font Awesome! @@ -35,11 +31,10 @@

    EASY: Default CSS

    Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.

      -
    1. Copy the font-awesome directory into your project.
      2. +
    2. Copy the entire font-awesome directory into your project.
    3. In the <head> of your html, reference the location to your font-awesome.min.css. {% highlight html %} - {% endhighlight %}
      4. @@ -47,59 +42,57 @@
    -
    -

    PRO: Custom LESS

    -

    Use this method to customize Font Awesome and Bootstrap {{ site.bootstrap.version }} using LESS.

    +
    +

    EASY: Font Awesome Ruby Gem

    +

    + Use the Official Font Awesome Ruby Gem to easily get Font + Awesome into a Rails project. Generously maintained by @supercodepoet. +

      -
    1. Copy the font-awesome directory into your project.
      2. -
    2. Open your project's bootstrap/bootstrap.less and replace -{% highlight html %} -@import "sprites.less"; -{% endhighlight %} - with -{% highlight html %} -@import "path/to/font-awesome/less/font-awesome.less"; +
    3. + Add this line to your application's Gemfile: +{% highlight bash %} +gem 'font-awesome-sass' {% endhighlight %}
    4. - Open your project's font-awesome/variables.less and edit the @FontAwesomePath variable to point to your font directory. -{% highlight html %} -@FontAwesomePath: "../font"; + And then execute: +{% highlight bash %} +$ bundle +{% endhighlight %} +
      5. +
    5. Or install it yourself as: +{% highlight bash %} +$ gem install font-awesome-sass {% endhighlight %} -

      The font path is relative from your compiled CSS directory.

      6. -
    6. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
      7. -
    7. Check out the examples to start using Font Awesome!
    -
    -

    Not using Bootstrap?

    -

    Font Awesome works just as well without Bootstrap.

    +
    +

    PRO: Custom LESS or SCSS

    +

    Use this method to customize Font Awesome {{ site.bootstrap.version }} using LESS or SCSS.

      -
    1. Copy the font-awesome directory into your project.
      2. -
    2. Follow the above directions and skip the Bootstrap parts.
      3. -
    3. 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).
      4. +
    4. Copy the font-awesome/ directory into your project.
      5. +
    5. + Open your project's font-awesome/variables.less and edit the @fa-font-path or $fa-font-path + variable to point to your font directory. +{% highlight scss %} +@fa-font-path: "../font"; +{% endhighlight %} +

      The font path is relative from your compiled CSS directory.

      +
      6. +
    6. Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.
    7. Check out the examples to start using Font Awesome!

    Need IE7 Support?

    -

    Font Awesome supports IE7. If you need it, you have my condolences.

    -
      -
    1. Get Font Awesome working properly in a modern browser.
      2. -
    2. Copy font-awesome-ie7.min.css into your project.
      3. -
    3. - In the <head> of your html, reference the location to your font-awesome-ie7.min.css. -{% highlight html %} - - - -{% endhighlight %} -
      4. -
    4. Go complain to whomever decided your project needs IE7 support.
      5. -
    +

    + 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 + 3.2.1 instructions for using IE7. Then go complain to + whomever decided your project needs IE7 support. +

    diff --git a/src/assets/less/site/jumbotron-carousel.less b/src/assets/less/site/jumbotron-carousel.less index 18276ef5d..5ed2ef70d 100644 --- a/src/assets/less/site/jumbotron-carousel.less +++ b/src/assets/less/site/jumbotron-carousel.less @@ -33,7 +33,7 @@ padding: 17px 30px; color: @jumbotron-text; border-color: mix(@jumbotron-text, @jumbotron-bg, 75%); - background-color: @jumbotron-bg; + background-color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,0.15); &:hover { background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);