diff options
author | davegandy <dave@davegandy.com> | 2013-10-17 00:50:26 +0400 |
---|---|---|
committer | davegandy <dave@davegandy.com> | 2013-10-17 00:50:26 +0400 |
commit | 4b64af4a4479c2364f1ca3dfbc919db9e9b4bf08 (patch) | |
tree | 53901c08216767de3b9adbee23f78678b4e7bd0b | |
parent | 425787c9f18ae79b9554365b07c2eb03329988c5 (diff) |
updating the getting started content. pointing ie7 to old docs
-rw-r--r-- | src/_includes/get-started.html | 89 | ||||
-rw-r--r-- | 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 @@ <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>! + <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 + Bootstrap into your website with two lines of code. You don't even have to download or install anything!</p> + <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><head></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.fontawesome.version }}/css/font-awesome.css" rel="stylesheet"> {% endhighlight %} - <div class="alert alert-info margin-top"> - <i class="fa-icon fa-icon-info-circle"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include 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. + <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! @@ -35,11 +31,10 @@ <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 <code>font-awesome</code> directory into your project.</li> + <li>Copy the entire <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="path/to/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> {% endhighlight %} </li> @@ -47,59 +42,57 @@ </ol> </section> -<section id="custom-less"> - <h2 class="page-header">PRO: Custom LESS</h2> - <p>Use this method to customize Font Awesome and Bootstrap {{ site.bootstrap.version }} using LESS.</p> +<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>Copy the <code>font-awesome</code> directory into your project.</li> - <li>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"; + <li> + Add this line to your application's Gemfile: +{% highlight bash %} +gem 'font-awesome-sass' {% endhighlight %} </li> <li> - Open your project's font-awesome/variables.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory. -{% highlight html %} -@FontAwesomePath: "../font"; + And then execute: +{% highlight bash %} +$ bundle +{% endhighlight %} + </li> + <li>Or install it yourself as: +{% highlight bash %} +$ gem install font-awesome-sass {% 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 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 id="not-using-bootstrap"> - <h2 class="page-header">Not using Bootstrap?</h2> - <p>Font Awesome works just as well without Bootstrap.</p> +<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>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>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>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="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="path/to/font-awesome/css/font-awesome-ie7.min.css"> -<![endif]--> -{% endhighlight %} - </li> - <li>Go complain to whomever decided your project needs IE7 support.</li> - </ol> + <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> 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%); |