Fix relative path issuesorigin/fix-docs

Close #6551

37 files changed, 87 insertions, 95 deletions

diff --git a/README.md b/README.md
index 0fe8669..9fd4b49 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,6 @@ Build the project and documentation:
 
     $ bundle exec jekyll build
 
-Or serve it on a local server on http://localhost:7998/Font-Awesome/:
+Or serve it on a local server on `http://localhost:7998`:
 
     $ bundle exec jekyll -w serve
diff --git a/_config.yml b/_config.yml
index 86fcb0e..b2c747f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,6 +1,6 @@
 safe:             false
 port:             7998
-baseurl:          /Font-Awesome/  # Where GitHub serves the project up from
+baseurl:          /
 url:              http://localhost:7998
 
 source:           src
diff --git a/src/_includes/community/getting-support.html b/src/_includes/community/getting-support.html
index 8ae311a..3b116f4 100644
--- a/src/_includes/community/getting-support.html
+++ b/src/_includes/community/getting-support.html
@@ -6,7 +6,7 @@
   </p>
   <ol>
     <li>
-      Make sure you've read the latest version of how to <a href="{{ page.relative_path }}get-started/">get started</a>.
+      Make sure you've read the latest version of how to <a href="/get-started/">get started</a>.
       It's been updated recently to make Font Awesome even easier to use.
     </li>
     <li>
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
index cb71330..2619fab 100644
--- a/src/_includes/footer.html
+++ b/src/_includes/footer.html
@@ -3,11 +3,11 @@
     <div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8">
       <a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
          onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);">
-        <img src="{{ page.relative_path }}assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
+        <img src="/assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
       </a>
       <a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
          onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);">
-        <img src="{{ page.relative_path }}assets/img/logo-themeisle.png" width="220" height="65" alt="">
+        <img src="/assets/img/logo-themeisle.png" width="220" height="65" alt="">
       </a>
     </div>
     <div>
@@ -28,7 +28,7 @@
     <div class="project">
       <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
       <a href="{{ site.fontawesome.github.url }}/issues">Issues</a> &middot;
-      <a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a>
+      <a href="/3.2.1">Old 3.2.1 Docs</a>
     </div>
   </div>
 </footer>
diff --git a/src/_includes/icons/brand.html b/src/_includes/icons/brand.html
index b7dffae..b5a18ee 100644
--- a/src/_includes/icons/brand.html
+++ b/src/_includes/icons/brand.html
@@ -9,7 +9,7 @@
     {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
 
     {% for icon in icons_brand %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/chart.html b/src/_includes/icons/chart.html
index f513ab3..232ebdc 100644
--- a/src/_includes/icons/chart.html
+++ b/src/_includes/icons/chart.html
@@ -5,7 +5,7 @@
     {% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
 
     {% for icon in icons_chart %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/currency.html b/src/_includes/icons/currency.html
index cab286c..8f59db7 100644
--- a/src/_includes/icons/currency.html
+++ b/src/_includes/icons/currency.html
@@ -5,7 +5,7 @@
     {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
 
     {% for icon in icons_currency %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/directional.html b/src/_includes/icons/directional.html
index 60953ac..205e11c 100644
--- a/src/_includes/icons/directional.html
+++ b/src/_includes/icons/directional.html
@@ -5,7 +5,7 @@
     {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
 
     {% for icon in icons_directional %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/file-type.html b/src/_includes/icons/file-type.html
index 14ccb10..c8c72c1 100644
--- a/src/_includes/icons/file-type.html
+++ b/src/_includes/icons/file-type.html
@@ -5,7 +5,7 @@
     {% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
 
     {% for icon in icons_file_type %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html
index 7d34c87..1fb45bb 100644
--- a/src/_includes/icons/filter.html
+++ b/src/_includes/icons/filter.html
@@ -18,7 +18,7 @@
     {% for icon in icons %}
     <div class="fa-hover col-md-3 col-sm-4 filter-icon"
       data-filter="{{ icon.class }}{% for alias in icon.aliases %}|{{ alias }}{% endfor %}{% for filter in icon.filter %}|{{ filter }}{% endfor %}">
-      <a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a>
+      <a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a>
     </div>
     {% endfor %}
   </div>
diff --git a/src/_includes/icons/form-control.html b/src/_includes/icons/form-control.html
index ed10356..b1e2b75 100644
--- a/src/_includes/icons/form-control.html
+++ b/src/_includes/icons/form-control.html
@@ -5,7 +5,7 @@
     {% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
 
     {% for icon in icons_form_control %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 </section>
diff --git a/src/_includes/icons/gender.html b/src/_includes/icons/gender.html
index 27b23e3..ec16a3c 100644
--- a/src/_includes/icons/gender.html
+++ b/src/_includes/icons/gender.html
@@ -5,7 +5,7 @@
     {% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
 
     {% for icon in icons_gender %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/medical.html b/src/_includes/icons/medical.html
index b29e433..8c7179b 100644
--- a/src/_includes/icons/medical.html
+++ b/src/_includes/icons/medical.html
@@ -5,7 +5,7 @@
     {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
 
     {% for icon in icons_medical %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/new.html b/src/_includes/icons/new.html
index eed47cc..6aa4fb6 100644
--- a/src/_includes/icons/new.html
+++ b/src/_includes/icons/new.html
@@ -3,7 +3,7 @@
   {% if page.navbar_active != "icons" %}
     <div class="margin-botom-large">
       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>.
+      Want to request new icons? <a href="/community/#requesting-new-icons">Here's how</a>.
     </div>
   {% endif %}
 
@@ -11,7 +11,7 @@
     {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
 
     {% for icon in icons_new %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/payment.html b/src/_includes/icons/payment.html
index 9ee0f98..d9fac18 100644
--- a/src/_includes/icons/payment.html
+++ b/src/_includes/icons/payment.html
@@ -5,7 +5,7 @@
     {% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
 
     {% for icon in icons_payment %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/spinner.html b/src/_includes/icons/spinner.html
index c39ffc7..ed14d47 100644
--- a/src/_includes/icons/spinner.html
+++ b/src/_includes/icons/spinner.html
@@ -6,7 +6,7 @@
       <li>
         <i class="fa fa-info-circle fa-lg fa-li"></i>
         These icons work great with the <code>fa-spin</code> class. Check out the
-        <a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
+        <a href="/examples/#animated" class="alert-link">spinning icons example</a>.
       </li>
     </ul>
   </div>
@@ -15,7 +15,7 @@
     {% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
 
     {% for icon in icons_spinner %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 </section>
diff --git a/src/_includes/icons/text-editor.html b/src/_includes/icons/text-editor.html
index 347d66c..a8c3dfd 100644
--- a/src/_includes/icons/text-editor.html
+++ b/src/_includes/icons/text-editor.html
@@ -5,7 +5,7 @@
     {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
 
     {% for icon in icons_text_editor %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/transportation.html b/src/_includes/icons/transportation.html
index 5cc3dd7..d37f0de 100644
--- a/src/_includes/icons/transportation.html
+++ b/src/_includes/icons/transportation.html
@@ -5,7 +5,7 @@
     {% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
 
     {% for icon in icons_transportation %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/video-player.html b/src/_includes/icons/video-player.html
index 0ca598f..2e7e5ec 100644
--- a/src/_includes/icons/video-player.html
+++ b/src/_includes/icons/video-player.html
@@ -5,7 +5,7 @@
     {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
 
     {% for icon in icons_video_player %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/web-application.html b/src/_includes/icons/web-application.html
index f71ec17..74ab103 100644
--- a/src/_includes/icons/web-application.html
+++ b/src/_includes/icons/web-application.html
@@ -5,7 +5,7 @@
     {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
 
     {% for icon in icons_web_application %}
-      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="/icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html
index 5ef0fe0..05b03ca 100644
--- a/src/_includes/jumbotron-carousel.html
+++ b/src/_includes/jumbotron-carousel.html
@@ -5,7 +5,7 @@
         <h1>Font Awesome</h1>
         <p>The iconic font and CSS toolkit</p>
         <div class="actions">
-          <a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
+          <a class="btn btn-default btn-lg" href="/assets/font-awesome-{{ site.fontawesome.version }}.zip"
              onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
             <i class="fa fa-download fa-lg"></i>&nbsp;&nbsp;
             Download
@@ -16,7 +16,7 @@
           <a href="{{ site.fontawesome.github.url }}"
              onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
             GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
-          <a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+          <a href="/3.2.1">Old 3.2.1 Docs</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
           Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
         </div>
       </div>
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index d3649a1..181ede9 100644
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -19,65 +19,65 @@
         <span class="sr-only">Toggle navigation</span>
         <i class="fa fa-bars fa-lg"></i>
       </button>
-      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a>
+      <a class="navbar-brand" href="/"><i class="fa fa-flag"></i> Font Awesome</a>
     </div>
 
     <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
-        <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
+        <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="/">Home</a></li>
         <li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
-          <a href="{{ page.relative_path }}whats-new/">What's New</a>
+          <a href="/whats-new/">What's New</a>
         </li>
         <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
-          <a href="{{ page.relative_path }}whats-new/">New</a>
+          <a href="/whats-new/">New</a>
         </li>
-        <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
-        <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
+        <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="/get-started/">Get Started</a></li>
+        <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="/icons/">Icons</a></li>
         <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <i class="fa fa-caret-down"></i>
           </a>
           <ul class="dropdown-menu pull-right">
-            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
+            <li><a href="/icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
             <li class="divider"></li>
-            <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-diamond fa-fw"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
-            <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fw"></i>&nbsp; Directional Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
+            <li><a href="/icons/#new"><i class="fa fa-diamond fa-fw"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
+            <li><a href="/icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
+            <li><a href="/icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
+            <li><a href="/icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
+            <li><a href="/icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
+            <li><a href="/icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
+            <li><a href="/icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
+            <li><a href="/icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
+            <li><a href="/icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
+            <li><a href="/icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
+            <li><a href="/icons/#directional"><i class="fa fa-hand-o-right fa-fw"></i>&nbsp; Directional Icons</a></li>
+            <li><a href="/icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
+            <li><a href="/icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
+            <li><a href="/icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
           </ul>
         </li>
-        <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
+        <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="/examples/">Examples</a></li>
         <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             <i class="fa fa-caret-down"></i>
           </a>
           <ul class="dropdown-menu pull-right">
-            <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
+            <li><a href="/examples/">Examples</a></li>
             <li class="divider"></li>
-            <li><a href="{{ page.relative_path }}examples/#basic">Basic Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
-            <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
+            <li><a href="/examples/#basic">Basic Icons</a></li>
+            <li><a href="/examples/#larger">Larger Icons</a></li>
+            <li><a href="/examples/#fixed-width">Fixed Width Icons</a></li>
+            <li><a href="/examples/#list">List Icons</a></li>
+            <li><a href="/examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
+            <li><a href="/examples/#animated">Animated Icons</a></li>
+            <li><a href="/examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
+            <li><a href="/examples/#stacked">Stacked Icons</a></li>
+            <li><a href="/examples/#bootstrap">Bootstrap 3 Examples</a></li>
+            <li><a href="/examples/#custom">Custom CSS</a></li>
           </ul>
         </li>
-        <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
-        <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
+        <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="/community/">Community</a></li>
+        <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="/license/">License</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
diff --git a/src/_includes/new-upgrading.html b/src/_includes/new-upgrading.html
index 5d2d88d..206a63a 100644
--- a/src/_includes/new-upgrading.html
+++ b/src/_includes/new-upgrading.html
@@ -2,7 +2,7 @@
   <h2 class="page-header">Upgrading from 3.2.1?</h2>
   <p>
     For complete documentation of the syntax changes in {{ site.fontawesome.minor_version }}, check out the
-    <a href="{{ page.relative_path }}examples">examples</a>. For the changes to icon names,
+    <a href="/examples">examples</a>. For the changes to icon names,
     <a href="https://twitter.com/gtagliala">@gtagliala</a> has put together a
     <a href="{{ site.fontawesome.github.url }}/wiki/Upgrading-from-3.2.1-to-4">great wiki page</a> that
     documents all the changes.
diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html
index aebcb3d..bf84c76 100644
--- a/src/_includes/thanks-to.html
+++ b/src/_includes/thanks-to.html
@@ -19,7 +19,7 @@
       <p>
         Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent
         <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
-        <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
+        <a href="/get-started/#bootstrapcdn">get started</a> with Font Awesome.
       </p>
     </div>
   </div>
diff --git a/src/_includes/why.html b/src/_includes/why.html
index 4998293..8599ccf 100644
--- a/src/_includes/why.html
+++ b/src/_includes/why.html
@@ -14,7 +14,7 @@
     </div>
     <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
-      Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
+      Font Awesome is completely free for commercial use. Check out the <a href="/license/">license</a>.
     </div>
     <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-pencil"></i> CSS Control</h4>
@@ -31,7 +31,7 @@
     <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
       To use on the desktop or for a complete set of vectors,
-      check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
+      check out the <a href="/cheatsheet/">cheatsheet</a>.
     </div>
     <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index dfe0ddd..0fa1d4b 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -8,19 +8,19 @@
   <meta name="description" content="Font Awesome, the iconic font and CSS framework">
   <meta name="author" content="Dave Gandy">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
+  <link rel="shortcut icon" href="/assets/ico/favicon.ico">
 
   <title>{% if page.title %}{{ page.title }}{% endif %}</title>
 
   <!-- CSS
   ================================================== -->
-  <link rel="stylesheet" href="{{ page.relative_path }}assets/css/site.css">
-  <link rel="stylesheet" href="{{ page.relative_path }}assets/css/pygments.css">
-  <link rel="stylesheet" href="{{ page.relative_path }}assets/font-awesome/css/font-awesome.css">
+  <link rel="stylesheet" href="/assets/css/site.css">
+  <link rel="stylesheet" href="/assets/css/pygments.css">
+  <link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.css">
 
   <!--[if lt IE 9]>
-    <script src="{{ page.relative_path }}assets/js/html5shiv.js"></script>
-    <script src="{{ page.relative_path }}assets/js/respond.min.js"></script>
+    <script src="/assets/js/html5shiv.js"></script>
+    <script src="/assets/js/respond.min.js"></script>
   <![endif]-->
 
   <script src="https://use.typekit.net/wnc7ioh.js"></script>
@@ -60,7 +60,7 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
 <script src="https://netdna.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
 <script src="{{ page.relative_path}}assets/js/tabcomplete.min.js"></script>
-<script src="{{ page.relative_path }}assets/js/site.js"></script>
+<script src="/assets/js/site.js"></script>
 <script>
   (function() {
     window._pa = window._pa || {};
diff --git a/src/_layouts/icon.html b/src/_layouts/icon.html
index 0ff016c..e854a10 100644
--- a/src/_layouts/icon.html
+++ b/src/_layouts/icon.html
@@ -42,7 +42,7 @@ relative_path: ../../
   <section>
     <div class="row">
       <div class="col-md-9 col-sm-9">
-        <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
+        <p>After you get <a href="/get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
         <div class="well well-transparent">
           <div style="font-size: 24px; line-height: 1.5em;">
             <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
@@ -52,7 +52,7 @@ relative_path: ../../
 <i class="fa fa-{{ page.icon.id }}"></i>
 {% endhighlight %}
         <br>
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
+        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="/examples/">examples</a>.</div>
       </div>
       <div class="col-md-3 col-sm-3">
         <div class="vertical-ad">{% include ads/fusion.html %}</div>
diff --git a/src/cheatsheet.html b/src/cheatsheet.html
index dfd6d13..14cd73c 100644
--- a/src/cheatsheet.html
+++ b/src/cheatsheet.html
@@ -1,7 +1,6 @@
 ---
 layout: base
 title: Font Awesome Cheatsheet
-relative_path: ../
 ---
 {% capture jumbotron_h1 %}<i class="fa fa-list-ul"></i>&nbsp; Cheatsheet{% endcapture %}
 {% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %}
diff --git a/src/community.html b/src/community.html
index 371f18c..10e304d 100644
--- a/src/community.html
+++ b/src/community.html
@@ -2,7 +2,6 @@
 layout: base
 title: The Font Awesome Community
 navbar_active: community
-relative_path: ../
 ---
 {% capture jumbotron_h1 %}<i class="fa fa-thumbs-o-up"></i>&nbsp; Community{% endcapture %}
 {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
diff --git a/src/examples.html b/src/examples.html
index 99706dc..e82d89f 100644
--- a/src/examples.html
+++ b/src/examples.html
@@ -2,7 +2,6 @@
 layout: base
 title: Font Awesome Examples
 navbar_active: examples
-relative_path: ../
 ---
 {% capture jumbotron_h1 %}<i class="fa fa-magic"></i>&nbsp; Examples{% endcapture %}
 {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
@@ -13,7 +12,7 @@ relative_path: ../
 <div class="container">
   {% 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
+    After you <a href="/get-started/">get up and running</a>, you can place Font Awesome icons just about
     anywhere with the <code>&lt;i&gt;</code> tag.
     Some examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
   </p>
diff --git a/src/get-started.html b/src/get-started.html
index 1861ae8..70d5ef6 100644
--- a/src/get-started.html
+++ b/src/get-started.html
@@ -2,7 +2,6 @@
 layout: base
 title: Get Started with Font Awesome
 navbar_active: get-started
-relative_path: ../
 ---
 {% capture jumbotron_h1 %}<i class="fa fa-cogs"></i>&nbsp; Get Started{% endcapture %}
 {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
@@ -36,7 +35,7 @@ relative_path: ../
         <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!
+        Check out the <a href="/examples/">examples</a> to start using Font Awesome!
       </li>
     </ol>
   </div>
@@ -52,7 +51,7 @@ relative_path: ../
 <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>
+      <li>Check out the <a href="/examples/">examples</a> to start using Font Awesome!</li>
     </ol>
   </section>
 
@@ -138,7 +137,7 @@ $ gem install font-awesome-sass
         <p class="alert alert-success"><i class="fa fa-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
       </li>
       <li>Re-compile your LESS or SASS 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>
+      <li>Check out the <a href="/examples/">examples</a> to start using Font Awesome!</li>
     </ol>
   </section>
 
@@ -153,7 +152,7 @@ $ gem install font-awesome-sass
     <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
+      <a href="/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/glyphicons-test.html b/src/glyphicons-test.html
index fefb8ba..1f8010b 100644
--- a/src/glyphicons-test.html
+++ b/src/glyphicons-test.html
@@ -1,6 +1,5 @@
 ---
 title: Glyphicons Visual Test Cases
-relative_path: ../
 ---
 
 
@@ -29,7 +28,7 @@ relative_path: ../
 
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
   <!-- Le fav and touch icons -->
-  <link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
+  <link rel="shortcut icon" href="/assets/ico/favicon.ico">
 
   <script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
@@ -785,8 +784,8 @@ relative_path: ../
 </div>
 
 <script src="http://platform.twitter.com/widgets.js"></script>
-<script src="{{ page.relative_path }}assets/js/jquery-1.7.1.min.js"></script>
-<script src="{{ page.relative_path }}assets/js/ZeroClipboard-1.1.7.min.js"></script>
+<script src="/assets/js/jquery-1.7.1.min.js"></script>
+<script src="/assets/js/ZeroClipboard-1.1.7.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 
 </body>
diff --git a/src/icons.html b/src/icons.html
index becbb02..c841bba 100644
--- a/src/icons.html
+++ b/src/icons.html
@@ -14,9 +14,9 @@ relative_path: ../
   {% 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>.
+    Want to request new icons? <a href="/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>.
+    Need vectors or want to use on the desktop? Check the <a href="/cheatsheet/">cheatsheet</a>.
   </p>
   {% endcapture %}
   {% include stripe-ad.html %}
diff --git a/src/index.html b/src/index.html
index ebe1750..a06c636 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,6 @@
 layout: base
 title: Font Awesome, the iconic font and CSS toolkit
 navbar_active: home
-relative_path: ./
 ---
 
 {% include jumbotron-carousel.html %}
diff --git a/src/license.html b/src/license.html
index 802433c..7ebd862 100644
--- a/src/license.html
+++ b/src/license.html
@@ -2,7 +2,6 @@
 layout: base
 title: Font Awesome License
 navbar_active: license
-relative_path: ../
 ---
 {% capture jumbotron_h1 %}<i class="fa fa-gavel"></i>&nbsp; License{% endcapture %}
 {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
diff --git a/src/test-2.3.2.html b/src/test-2.3.2.html
index ea75a5d..406dbad 100644
--- a/src/test-2.3.2.html
+++ b/src/test-2.3.2.html
@@ -1,6 +1,5 @@
 ---
 title: Font Awesome + Bootstrap 2.3.2 Test Cases
-relative_path: ../
 ---
 
 
@@ -28,9 +27,9 @@ relative_path: ../
  ================================================== -->
 
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
-  <link rel="stylesheet" href="{{ page.relative_path }}assets/font-awesome/css/font-awesome.css">
+  <link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.css">
   <!-- Le fav and touch icons -->
-  <link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
+  <link rel="shortcut icon" href="/assets/ico/favicon.ico">
 
   <script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
diff --git a/src/whats-new.html b/src/whats-new.html
index cd2e9a3..5287aa0 100644
--- a/src/whats-new.html
+++ b/src/whats-new.html
@@ -15,7 +15,7 @@ relative_path: ../
   <p class="lead">
     Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
     {{ site.fontawesome.minor_version }}. Have some ideas for new features?
-    <a href="{{ page.relative_path }}community/">Help contribute</a>.
+    <a href="/community/">Help contribute</a>.
   </p>
   {% endcapture %}
   {% include stripe-ad.html %}