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 @@ -
-
+
+
-

Integration

-

It's easy to get started with Font Awesome. And it plays really nicely with Bootstrap.

+

Ways to use Font Awesome

+

It's easy to get started with Font Awesome. And it plays really nicely with Bootstrap!


{% include ads/carbon-light-horizontal.html %}
- -
-
-

Easy Bootstrap + Font Awesome Integration

-
-
-

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

-
-
-
    -
  1. Copy the Font Awesome font directory into your project.
    2. -
  2. Copy font-awesome.min.css into your project.
    3. -
  3. - Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place. -

    The font path is relative from your CSS directory.

    -
    4. -
  4. - In the <head> of your html, reference the location to your font-awesome.min.css. -
    -<link rel="stylesheet" href="../css/bootstrap.min.css">
-<link rel="stylesheet" href="../css/font-awesome.min.css">
-
    -
    5. -
  5. Check out the examples to start using Font Awesome!
    6. -
-
-
-
-
-

Custom Bootstrap + Font Awesome Integration using LESS

-
-
-

Use this method to integrate Font Awesome with Twitter Bootstrap using LESS.

-
-
-
    -
  1. Copy the Font Awesome font directory into your project.
    2. -
  2. Copy font-awesome.less into your bootstrap/less directory.
    3. -
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";
    4. -
  4. - Open your project's font-awesome.less and edit the @FontAwesomePath variable to point to your font directory. -
    -@FontAwesomePath:   "../font";
-
    -

    The font path is relative from your compiled CSS directory.

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

Custom Bootstrap + Font Awesome Integration using SASS or SCSS

-

I have never used either, so let me know if the included SCSS or SASS files have issues.

-
-
-
-
-

Not using Bootstrap?

-
-
-

Font Awesome works just as well without Twitter Bootstrap.

-
-
-
    -
  1. Copy the Font Awesome font directory into your project.
    2. -
  2. Copy font-awesome.less or font-awesome.min.css into your project.
    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. Check out the examples to start using Font Awesome!
    5. -
-
-
-
-
-

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. -
    -<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]-->
-
    -
    4. -
  4. Go complain to whoever decided your project needs IE7 support.
    5. -
-
-
+
+ +
+

EASIEST: BootstrapCDN

+

Add Font Awesome + Bootstrap into your website with two lines 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 skip pasting in the first line. +
    +
    2. +
  2. + Pat yourself on the back for your scalable-vector-icons-on-the-website + judo solution in two lines of code. +
    3. +
  3. + Check out the examples to start using Font Awesome! +
    4. +
+
+ +
+

EASY: Default CSS

+

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

+
    +
  1. Copy the Font Awesome font directory into your project.
    2. +
  2. Copy font-awesome.min.css into your project.
    3. +
  3. + Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place. +

    The font path is relative from your CSS directory.

    +
    4. +
  4. + In the <head> of your html, reference the location to your font-awesome.min.css. +{% highlight html %} + + +{% endhighlight %} +
    5. +
  5. Check out the examples to start using Font Awesome!
    6. +
+
+ +
+

PRO: Custom LESS

+

Use this method to customize Font Awesome and Bootstrap using LESS.

+
    +
  1. Copy the Font Awesome font directory into your project.
    2. +
  2. Copy font-awesome.less into your bootstrap/less directory.
    3. +
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";
    4. +
  4. + Open your project's font-awesome.less and edit the @FontAwesomePath variable to point to your font directory. +{% highlight html %} +@FontAwesomePath: "../font"; +{% endhighlight %} +

    The font path is relative from your compiled CSS directory.

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

Not using Bootstrap?

+

Font Awesome works just as well without Bootstrap.

+
    +
  1. Copy the Font Awesome font directory into your project.
    2. +
  2. Copy font-awesome.less or font-awesome.min.css into your project.
    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. Check out the examples to start using Font Awesome!
    5. +
+
+ +
+

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 whoever decided your project needs IE7 support.
    5. +
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 @@ Home Get Started Icons - What's New Examples + What's New Roadmap Say Thanks 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 %}  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 %}