From a3f056991c815e0e12edd5f22b1401bf2e54f510 Mon Sep 17 00:00:00 2001
From: davegandy <dave@davegandy.com>
Date: Mon, 30 Sep 2013 20:55:40 -0400
Subject: [PATCH] final adjustments to changing css icon prefix

---
 css/font-awesome.css                        | 106 ++++++--------------
 css/font-awesome.min.css                    |  41 ++++----
 less/bootstrap.less                         |  38 ++-----
 less/core.less                              |  20 ++--
 src/assets/font-awesome/less/bootstrap.less |  50 +++------
 src/assets/font-awesome/less/core.less      |  52 +++++-----
 src/test.html                               |  40 ++++----
 7 files changed, 121 insertions(+), 226 deletions(-)

diff --git a/css/font-awesome.css b/css/font-awesome.css
index 8e7435a27..c4e6729fa 100644
--- a/css/font-awesome.css
+++ b/css/font-awesome.css
@@ -34,8 +34,7 @@
 }
 /* FONT AWESOME CORE
  * -------------------------- */
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   *margin-right: .3em;
   font-family: FontAwesome;
   -webkit-font-smoothing: antialiased;
@@ -45,8 +44,7 @@
   text-rendering: auto;
   -moz-osx-font-smoothing: grayscale;
 }
-[class^="fa-"]:before,
-[class*=" fa-"]:before {
+.fa:before {
   display: inline-block;
   text-decoration: inherit;
   speak: none;
@@ -57,39 +55,35 @@
   vertical-align: -10%;
 }
 /* makes sure icons active on rollover in links */
-a [class^="fa-"],
-a [class*=" fa-"] {
+a .fa {
   display: inline;
 }
 /* increased font size for icon-large */
-[class^="fa-"].fa-fixed-width,
-[class*=" fa-"].fa-fixed-width {
+.fa.fa-fixed-width {
   display: inline-block;
   width: 1.1428571428571428em;
   padding-right: 0.2857142857142857em;
   text-align: right;
 }
-[class^="fa-"].fa-fixed-width.fa-large,
-[class*=" fa-"].fa-fixed-width.fa-large {
+.fa.fa-fixed-width.fa-large {
   width: 1.4285714285714286em;
 }
-.fas-ul {
+.fa-ul {
   padding-left: 0;
   margin-left: 2.142857142857143em;
   list-style-type: none;
 }
-.fas-ul > li {
+.fa-ul > li {
   position: relative;
 }
-.fas-ul .fa-li {
+.fa-ul .fa-li {
   position: absolute;
   left: -2.142857142857143em;
   width: 2.142857142857143em;
   line-height: inherit;
   text-align: center;
 }
-[class^="fa-"].hide,
-[class*=" fa-"].hide {
+.fa.hide {
   display: none;
 }
 .fa-muted {
@@ -150,19 +144,16 @@ a [class*=" fa-"] {
 .pull-left {
   float: left;
 }
-[class^="fa-"].pull-left,
-[class*=" fa-"].pull-left {
+.fa.pull-left {
   margin-right: .3em;
 }
-[class^="fa-"].pull-right,
-[class*=" fa-"].pull-right {
+.fa.pull-right {
   margin-left: .3em;
 }
 /* BOOTSTRAP SPECIFIC CLASSES
  * -------------------------- */
 /* Bootstrap 2.0 sprites.less reset */
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   display: inline;
   width: auto;
   height: auto;
@@ -173,82 +164,47 @@ a [class*=" fa-"] {
   background-position: 0 0;
   background-repeat: repeat;
 }
-/* more sprites.less reset */
-.icon-white,
-.nav-pills > .active > a > [class^="fa-"],
-.nav-pills > .active > a > [class*=" fa-"],
-.nav-list > .active > a > [class^="fa-"],
-.nav-list > .active > a > [class*=" fa-"],
-.navbar-inverse .nav > .active > a > [class^="fa-"],
-.navbar-inverse .nav > .active > a > [class*=" fa-"],
-.dropdown-menu > li > a:hover > [class^="fa-"],
-.dropdown-menu > li > a:hover > [class*=" fa-"],
-.dropdown-menu > .active > a > [class^="fa-"],
-.dropdown-menu > .active > a > [class*=" fa-"],
-.dropdown-submenu:hover > a > [class^="fa-"],
-.dropdown-submenu:hover > a > [class*=" fa-"] {
-  background-image: none;
-}
 /* keeps Bootstrap styles with and without icons the same */
-.btn [class^="fa-"].fa-large,
-.nav [class^="fa-"].fa-large,
-.btn [class*=" fa-"].fa-large,
-.nav [class*=" fa-"].fa-large {
+.btn .fa.fa-large,
+.nav .fa.fa-large {
   line-height: .9em;
 }
-.btn [class^="fa-"].fa-spin,
-.nav [class^="fa-"].fa-spin,
-.btn [class*=" fa-"].fa-spin,
-.nav [class*=" fa-"].fa-spin {
+.btn .fa.fa-spin,
+.nav .fa.fa-spin {
   display: inline-block;
 }
-.nav-tabs [class^="fa-"],
-.nav-pills [class^="fa-"],
-.nav-tabs [class*=" fa-"],
-.nav-pills [class*=" fa-"],
-.nav-tabs [class^="fa-"].fa-large,
-.nav-pills [class^="fa-"].fa-large,
-.nav-tabs [class*=" fa-"].fa-large,
-.nav-pills [class*=" fa-"].fa-large {
+.nav-tabs .fa,
+.nav-pills .fa,
+.nav-tabs .fa.fa-large,
+.nav-pills .fa.fa-large {
   line-height: .9em;
 }
-.btn [class^="fa-"].pull-left.fa-2x,
-.btn [class*=" fa-"].pull-left.fa-2x,
-.btn [class^="fa-"].pull-right.fa-2x,
-.btn [class*=" fa-"].pull-right.fa-2x {
+.btn .fa.pull-left.fa-2x,
+.btn .fa.pull-right.fa-2x {
   margin-top: .18em;
 }
-.btn [class^="fa-"].fa-spin.fa-large,
-.btn [class*=" fa-"].fa-spin.fa-large {
+.btn .fa.fa-spin.fa-large {
   line-height: .8em;
 }
-.btn.btn-small [class^="fa-"].pull-left.fa-2x,
-.btn.btn-small [class*=" fa-"].pull-left.fa-2x,
-.btn.btn-small [class^="fa-"].pull-right.fa-2x,
-.btn.btn-small [class*=" fa-"].pull-right.fa-2x {
+.btn.btn-small .fa.pull-left.fa-2x,
+.btn.btn-small .fa.pull-right.fa-2x {
   margin-top: .25em;
 }
-.btn.btn-large [class^="fa-"],
-.btn.btn-large [class*=" fa-"] {
+.btn.btn-large .fa {
   margin-top: 0;
 }
-.btn.btn-large [class^="fa-"].pull-left.fa-2x,
-.btn.btn-large [class*=" fa-"].pull-left.fa-2x,
-.btn.btn-large [class^="fa-"].pull-right.fa-2x,
-.btn.btn-large [class*=" fa-"].pull-right.fa-2x {
+.btn.btn-large .fa.pull-left.fa-2x,
+.btn.btn-large .fa.pull-right.fa-2x {
   margin-top: .05em;
 }
-.btn.btn-large [class^="fa-"].pull-left.fa-2x,
-.btn.btn-large [class*=" fa-"].pull-left.fa-2x {
+.btn.btn-large .fa.pull-left.fa-2x {
   margin-right: .2em;
 }
-.btn.btn-large [class^="fa-"].pull-right.fa-2x,
-.btn.btn-large [class*=" fa-"].pull-right.fa-2x {
+.btn.btn-large .fa.pull-right.fa-2x {
   margin-left: .2em;
 }
 /* Fixes alignment in nav lists */
-.nav-list [class^="fa-"],
-.nav-list [class*=" fa-"] {
+.nav-list .fa {
   line-height: inherit;
 }
 /* EXTRAS
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
index 06fea5a8a..0bb2e997e 100644
--- a/css/font-awesome.min.css
+++ b/css/font-awesome.min.css
@@ -1,11 +1,11 @@
-@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}[class^="fa-"],[class*=" fa-"]{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
-[class^="fa-"]:before,[class*=" fa-"]:before{display:inline-block;text-decoration:inherit;speak:none;}
+@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
+.fa:before{display:inline-block;text-decoration:inherit;speak:none;}
 .fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;}
-a [class^="fa-"],a [class*=" fa-"]{display:inline;}
-[class^="fa-"].fa-fixed-width,[class*=" fa-"].fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}[class^="fa-"].fa-fixed-width.fa-large,[class*=" fa-"].fa-fixed-width.fa-large{width:1.4285714285714286em;}
-.fas-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fas-ul>li{position:relative;}
-.fas-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
-[class^="fa-"].hide,[class*=" fa-"].hide{display:none;}
+a .fa{display:inline;}
+.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;}
+.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
+.fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
+.fa.hide{display:none;}
 .fa-muted{color:#eeeeee;}
 .fa-light{color:#ffffff;}
 .fa-dark{color:#333333;}
@@ -16,20 +16,19 @@ a [class^="fa-"],a [class*=" fa-"]{display:inline;}
 .fa-5x{font-size:5em;}.fa-5x.fa-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
 .pull-right{float:right;}
 .pull-left{float:left;}
-[class^="fa-"].pull-left,[class*=" fa-"].pull-left{margin-right:.3em;}
-[class^="fa-"].pull-right,[class*=" fa-"].pull-right{margin-left:.3em;}
-[class^="fa-"],[class*=" fa-"]{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
-.icon-white,.nav-pills>.active>a>[class^="fa-"],.nav-pills>.active>a>[class*=" fa-"],.nav-list>.active>a>[class^="fa-"],.nav-list>.active>a>[class*=" fa-"],.navbar-inverse .nav>.active>a>[class^="fa-"],.navbar-inverse .nav>.active>a>[class*=" fa-"],.dropdown-menu>li>a:hover>[class^="fa-"],.dropdown-menu>li>a:hover>[class*=" fa-"],.dropdown-menu>.active>a>[class^="fa-"],.dropdown-menu>.active>a>[class*=" fa-"],.dropdown-submenu:hover>a>[class^="fa-"],.dropdown-submenu:hover>a>[class*=" fa-"]{background-image:none;}
-.btn [class^="fa-"].fa-large,.nav [class^="fa-"].fa-large,.btn [class*=" fa-"].fa-large,.nav [class*=" fa-"].fa-large{line-height:.9em;}
-.btn [class^="fa-"].fa-spin,.nav [class^="fa-"].fa-spin,.btn [class*=" fa-"].fa-spin,.nav [class*=" fa-"].fa-spin{display:inline-block;}
-.nav-tabs [class^="fa-"],.nav-pills [class^="fa-"],.nav-tabs [class*=" fa-"],.nav-pills [class*=" fa-"],.nav-tabs [class^="fa-"].fa-large,.nav-pills [class^="fa-"].fa-large,.nav-tabs [class*=" fa-"].fa-large,.nav-pills [class*=" fa-"].fa-large{line-height:.9em;}
-.btn [class^="fa-"].pull-left.fa-2x,.btn [class*=" fa-"].pull-left.fa-2x,.btn [class^="fa-"].pull-right.fa-2x,.btn [class*=" fa-"].pull-right.fa-2x{margin-top:.18em;}
-.btn [class^="fa-"].fa-spin.fa-large,.btn [class*=" fa-"].fa-spin.fa-large{line-height:.8em;}
-.btn.btn-small [class^="fa-"].pull-left.fa-2x,.btn.btn-small [class*=" fa-"].pull-left.fa-2x,.btn.btn-small [class^="fa-"].pull-right.fa-2x,.btn.btn-small [class*=" fa-"].pull-right.fa-2x{margin-top:.25em;}
-.btn.btn-large [class^="fa-"],.btn.btn-large [class*=" fa-"]{margin-top:0;}.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x,.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-top:.05em;}
-.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;}
-.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;}
-.nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;}
+.fa.pull-left{margin-right:.3em;}
+.fa.pull-right{margin-left:.3em;}
+.fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
+.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;}
+.btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;}
+.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;}
+.btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;}
+.btn .fa.fa-spin.fa-large{line-height:.8em;}
+.btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;}
+.btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;}
+.btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;}
+.btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;}
+.nav-list .fa{line-height:inherit;}
 .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
 .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;}
 .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 7a407e317..6115cda97 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -2,8 +2,7 @@
  * -------------------------- */
 
 /* Bootstrap 2.0 sprites.less reset */
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   display: inline;
   width: auto;
   height: auto;
@@ -15,42 +14,22 @@
   background-repeat: repeat;
 }
 
-/* more sprites.less reset */
-.icon-white,
-.nav-pills > .active > a > [class^="fa-"],
-.nav-pills > .active > a > [class*=" fa-"],
-.nav-list > .active > a > [class^="fa-"],
-.nav-list > .active > a > [class*=" fa-"],
-.navbar-inverse .nav > .active > a > [class^="fa-"],
-.navbar-inverse .nav > .active > a > [class*=" fa-"],
-.dropdown-menu > li > a:hover > [class^="fa-"],
-.dropdown-menu > li > a:hover > [class*=" fa-"],
-.dropdown-menu > .active > a > [class^="fa-"],
-.dropdown-menu > .active > a > [class*=" fa-"],
-.dropdown-submenu:hover > a > [class^="fa-"],
-.dropdown-submenu:hover > a > [class*=" fa-"] {
-  background-image: none;
-}
-
 
 /* keeps Bootstrap styles with and without icons the same */
 .btn, .nav {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
 //    display: inline;
     &.fa-large { line-height: .9em; }
     &.fa-spin { display: inline-block; }
   }
 }
 .nav-tabs, .nav-pills {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
     &, &.fa-large { line-height: .9em; }
   }
 }
 .btn {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
     &.pull-left, &.pull-right {
       &.fa-2x { margin-top: .18em; }
     }
@@ -58,16 +37,14 @@
   }
 }
 .btn.btn-small {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
     &.pull-left, &.pull-right {
       &.fa-2x { margin-top: .25em; }
     }
   }
 }
 .btn.btn-large {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
     margin-top: 0; // overrides bootstrap default
     &.pull-left, &.pull-right {
       &.fa-2x { margin-top: .05em; }
@@ -78,7 +55,6 @@
 }
 
 /* Fixes alignment in nav lists */
-.nav-list [class^="fa-"],
-.nav-list [class*=" fa-"] {
+.nav-list .fa {
   line-height: inherit;
 }
diff --git a/less/core.less b/less/core.less
index 8ca3bf7c1..e43a54a6d 100644
--- a/less/core.less
+++ b/less/core.less
@@ -1,13 +1,11 @@
 /* FONT AWESOME CORE
  * -------------------------- */
 
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   .icon-FontAwesome();
 }
 
-[class^="fa-"]:before,
-[class*=" fa-"]:before {
+.fa:before {
   display: inline-block;
   text-decoration: inherit;
   speak: none;
@@ -21,15 +19,13 @@
 
 /* makes sure icons active on rollover in links */
 a {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .fa {
     display: inline;
   }
 }
 
 /* increased font size for icon-large */
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   &.fa-fixed-width {
     display: inline-block;
     width: (16em / 14);
@@ -41,7 +37,7 @@ a {
   }
 }
 
-.fas-ul {
+.fa-ul {
   padding-left: 0;
   margin-left: @icons-li-width;
   list-style-type: none;
@@ -58,8 +54,7 @@ a {
 }
 
 // allows usage of the hide class directly on font awesome icons
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   &.hide {
     display: none;
   }
@@ -119,8 +114,7 @@ a {
 .pull-right { float: right; }
 .pull-left { float: left; }
 
-[class^="fa-"],
-[class*=" fa-"] {
+.fa {
   &.pull-left {
     margin-right: .3em;
   }
diff --git a/src/assets/font-awesome/less/bootstrap.less b/src/assets/font-awesome/less/bootstrap.less
index 5b10c8a4f..90ddc1b73 100644
--- a/src/assets/font-awesome/less/bootstrap.less
+++ b/src/assets/font-awesome/less/bootstrap.less
@@ -4,8 +4,7 @@
  * -------------------------- */
 
 /* Bootstrap 2.0 sprites.less reset */
-[class^="fa-"],
-[class*=" fa-"] {
+.{{ site.fontawesome.css_prefix }} {
   display: inline;
   width: auto;
   height: auto;
@@ -17,59 +16,37 @@
   background-repeat: repeat;
 }
 
-/* more sprites.less reset */
-.icon-white,
-.nav-pills > .active > a > [class^="fa-"],
-.nav-pills > .active > a > [class*=" fa-"],
-.nav-list > .active > a > [class^="fa-"],
-.nav-list > .active > a > [class*=" fa-"],
-.navbar-inverse .nav > .active > a > [class^="fa-"],
-.navbar-inverse .nav > .active > a > [class*=" fa-"],
-.dropdown-menu > li > a:hover > [class^="fa-"],
-.dropdown-menu > li > a:hover > [class*=" fa-"],
-.dropdown-menu > .active > a > [class^="fa-"],
-.dropdown-menu > .active > a > [class*=" fa-"],
-.dropdown-submenu:hover > a > [class^="fa-"],
-.dropdown-submenu:hover > a > [class*=" fa-"] {
-  background-image: none;
-}
-
 
 /* keeps Bootstrap styles with and without icons the same */
 .btn, .nav {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .{{ site.fontawesome.css_prefix }} {
 //    display: inline;
-    &.fa-large { line-height: .9em; }
-    &.fa-spin { display: inline-block; }
+    &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
+    &.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; }
   }
 }
 .nav-tabs, .nav-pills {
-  [class^="fa-"],
-  [class*=" fa-"] {
-    &, &.fa-large { line-height: .9em; }
+  .{{ site.fontawesome.css_prefix }} {
+    &, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
   }
 }
 .btn {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .{{ site.fontawesome.css_prefix }} {
     &.pull-left, &.pull-right {
-      &.fa-2x { margin-top: .18em; }
+      &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; }
     }
-    &.fa-spin.fa-large { line-height: .8em; }
+    &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-large { line-height: .8em; }
   }
 }
 .btn.btn-small {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .{{ site.fontawesome.css_prefix }} {
     &.pull-left, &.pull-right {
-      &.fa-2x { margin-top: .25em; }
+      &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .25em; }
     }
   }
 }
 .btn.btn-large {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .{{ site.fontawesome.css_prefix }} {
     margin-top: 0; // overrides bootstrap default
     &.pull-left, &.pull-right {
       &.fa-2x { margin-top: .05em; }
@@ -80,7 +57,6 @@
 }
 
 /* Fixes alignment in nav lists */
-.nav-list [class^="fa-"],
-.nav-list [class*=" fa-"] {
+.nav-list .fa {
   line-height: inherit;
 }
diff --git a/src/assets/font-awesome/less/core.less b/src/assets/font-awesome/less/core.less
index 262357fe9..30a3709d2 100644
--- a/src/assets/font-awesome/less/core.less
+++ b/src/assets/font-awesome/less/core.less
@@ -3,54 +3,50 @@
 /* FONT AWESOME CORE
  * -------------------------- */
 
-[class^="fa-"],
-[class*=" fa-"] {
+.{{ site.fontawesome.css_prefix }} {
   .icon-FontAwesome();
 }
 
-[class^="fa-"]:before,
-[class*=" fa-"]:before {
+.{{ site.fontawesome.css_prefix }}:before {
   display: inline-block;
   text-decoration: inherit;
   speak: none;
 }
 
 /* makes the font 33% larger relative to the icon container */
-.fa-large:before {
+.{{ site.fontawesome.css_prefix }}-large:before {
   font-size: (4em / 3);
   vertical-align: -10%;
 }
 
 /* makes sure icons active on rollover in links */
 a {
-  [class^="fa-"],
-  [class*=" fa-"] {
+  .{{ site.fontawesome.css_prefix }} {
     display: inline;
   }
 }
 
 /* increased font size for icon-large */
-[class^="fa-"],
-[class*=" fa-"] {
-  &.fa-fixed-width {
+.{{ site.fontawesome.css_prefix }} {
+  &.{{ site.fontawesome.css_prefix }}-fixed-width {
     display: inline-block;
     width: (16em / 14);
     padding-right: (4em / 14);
     text-align: right;
-    &.fa-large {
+    &.{{ site.fontawesome.css_prefix }}-large {
       width: (20em / 14);
     }
   }
 }
 
-.fas-ul {
+.{{ site.fontawesome.css_prefix }}-ul {
   padding-left: 0;
   margin-left: @icons-li-width;
   list-style-type: none;
 
   > li { position: relative; }
 
-  .fa-li {
+  .{{ site.fontawesome.css_prefix }}-li {
     position: absolute;
     left: -@icons-li-width;
     width: @icons-li-width;
@@ -60,21 +56,20 @@ a {
 }
 
 // allows usage of the hide class directly on font awesome icons
-[class^="fa-"],
-[class*=" fa-"] {
+.{{ site.fontawesome.css_prefix }} {
   &.hide {
     display: none;
   }
 }
 
-.fa-muted { color: @iconMuted; }
-.fa-light { color: @iconLight; }
-.fa-dark { color: @iconDark; }
+.{{ site.fontawesome.css_prefix }}-muted { color: @iconMuted; }
+.{{ site.fontawesome.css_prefix }}-light { color: @iconLight; }
+.{{ site.fontawesome.css_prefix }}-dark { color: @iconDark; }
 
 // Icon Borders
 // -------------------------
 
-.fa-border {
+.{{ site.fontawesome.css_prefix }}-border {
   padding: .2em .25em .15em;
   border: solid 1px @borderColor;
   .border-radius(3px);
@@ -83,31 +78,31 @@ a {
 // Icon Sizes
 // -------------------------
 
-.fa-2x {
+.{{ site.fontawesome.css_prefix }}-2x {
   font-size: 2em;
-  &.fa-border {
+  &.{{ site.fontawesome.css_prefix }}-border {
     border-width: 2px;
     .border-radius(4px);
   }
 }
-.fa-3x {
+.{{ site.fontawesome.css_prefix }}-3x {
   font-size: 3em;
-  &.fa-border {
+  &.{{ site.fontawesome.css_prefix }}-border {
     border-width: 3px;
     .border-radius(5px);
   }
 }
-.fa-4x {
+.{{ site.fontawesome.css_prefix }}-4x {
   font-size: 4em;
-  &.fa-border {
+  &.{{ site.fontawesome.css_prefix }}-border {
     border-width: 4px;
     .border-radius(6px);
   }
 }
 
-.fa-5x {
+.{{ site.fontawesome.css_prefix }}-5x {
   font-size: 5em;
-  &.fa-border {
+  &.{{ site.fontawesome.css_prefix }}-border {
     border-width: 5px;
     .border-radius(7px);
   }
@@ -121,8 +116,7 @@ a {
 .pull-right { float: right; }
 .pull-left { float: left; }
 
-[class^="fa-"],
-[class*=" fa-"] {
+.{{ site.fontawesome.css_prefix }} {
   &.pull-left {
     margin-right: .3em;
   }
diff --git a/src/test.html b/src/test.html
index eb8656277..b516c2596 100644
--- a/src/test.html
+++ b/src/test.html
@@ -450,7 +450,7 @@ relative_path: ../
           </ul>
         </li>
         <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
-        <li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
         <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
         <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
       </ul>
@@ -477,7 +477,7 @@ relative_path: ../
           </ul>
         </li>
         <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
-        <li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
         <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
         <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
       </ul>
@@ -536,7 +536,7 @@ relative_path: ../
   <div class="row">
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -549,7 +549,7 @@ relative_path: ../
     </div>
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -560,7 +560,7 @@ relative_path: ../
   <div class="row">
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul lead">
+        <ul class="fa-ul lead">
           <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -569,7 +569,7 @@ relative_path: ../
     </div>
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul lead">
+        <ul class="fa-ul lead">
           <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -580,7 +580,7 @@ relative_path: ../
   <div class="row">
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -589,7 +589,7 @@ relative_path: ../
     </div>
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><a href="#"><i class="fa-li fa fa-arrow-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><a href="#"><i class="fa-li fa fa-building fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -600,10 +600,10 @@ relative_path: ../
   <div class="row">
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-          <li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-          <li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
             <span class="label">foo</span>
             <a class="btn">foo</a>
@@ -613,10 +613,10 @@ relative_path: ../
     </div>
     <div class="span6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fas-ul">
+        <ul class="fa-ul">
           <li><i class="fa-li fa fa-refresh fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-          <li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-          <li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <li><i class="fa-li fa fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li><i class="fa-li fa fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
             <span class="label">foo</span>
             <a class="btn">foo</a>
@@ -666,8 +666,8 @@ relative_path: ../
     <button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-spinner fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa-spinner fa-spin"></i> Loading...</button>
+    <i class="fa fa-spinner fa-spin"></i> Loading...
+    <button class="btn btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
     <button class="btn btn-large">Loading...</button>
     <i class="fa fa-circle-blank fa-spin"></i> Loading...
     <button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
@@ -688,8 +688,8 @@ relative_path: ../
     <button class="btn"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-spinner fa-large fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa-spinner fa-large fa-spin"></i> Loading...</button>
+    <i class="fa fa-spinner fa-large fa-spin"></i> Loading...
+    <button class="btn btn-large"><i class="fa fa-spinner fa-large fa-spin"></i> Loading...</button>
     <button class="btn btn-large">Loading...</button>
     <i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...
     <button class="btn btn-large"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
@@ -698,14 +698,14 @@ relative_path: ../
   <div class="row">
     <div class="span6">
       <div class="input-prepend">
-        <span class="add-on"><i class="fa-spinner fa-spin"></i></span>
+        <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
         <input class="span2" id="prependedInput" type="text" placeholder="Username">
       </div>
     </div>
     <div class="span6">
       <div class="input-append">
         <input class="span2" id="appendedInput" type="text">
-        <span class="add-on"><i class="fa-spinner fa-spin"></i></span>
+        <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
       </div>
     </div>
   </div>