Rename utility classes pull-left/pull-right

Fix #6028

css/font-awesome.css

@@ -65,6 +65,19 @@
   border: solid 0.08em #eeeeee;
   border-radius: .1em;
 }
+.fa-pull-left {
+  float: left;
+}
+.fa-pull-right {
+  float: right;
+}
+.fa.fa-pull-left {
+  margin-right: .3em;
+}
+.fa.fa-pull-right {
+  margin-left: .3em;
+}
+/* Deprecated as of 4.3.1 */
 .pull-right {
   float: right;
 }

less/bordered-pulled.less

@@ -7,6 +7,15 @@
   border-radius: .1em;
 }
 
+.@{fa-css-prefix}-pull-left { float: left; }
+.@{fa-css-prefix}-pull-right { float: right; }
+
+.@{fa-css-prefix} {
+  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.3.1 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 

scss/_bordered-pulled.scss

@@ -7,6 +7,15 @@
   border-radius: .1em;
 }
 
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.3.1 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 

src/_includes/examples/bordered-pulled.html

@@ -9,18 +9,18 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        <i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
+        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
         &hellip;tomorrow we will run faster, stretch out our arms farther&hellip; And then one fine morning—
         So we beat on, boats against the current, borne back ceaselessly into the past.
       </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>
-        Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
+        Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
         article icons.
       </p>
 {% highlight html %}
-<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
+<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
 ...tomorrow we will run faster, stretch out our arms farther...
 And then one fine morning— So we beat on, boats against the
 current, borne back ceaselessly into the past.

src/assets/font-awesome/less/bordered-pulled.less

@@ -10,6 +10,15 @@
   border-radius: .1em;
 }
 
+.@{fa-css-prefix}-pull-left { float: left; }
+.@{fa-css-prefix}-pull-right { float: right; }
+
+.@{fa-css-prefix} {
+  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.3.1 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 

src/assets/font-awesome/scss/_bordered-pulled.scss

@@ -10,6 +10,15 @@
   border-radius: .1em;
 }
 
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.3.1 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 

src/test.html

@@ -509,28 +509,28 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <p class="lead">
-        <i class="fa fa-stethoscope fa-3x pull-left fa-border"></i>
+        <i class="fa fa-stethoscope fa-3x fa-pull-left fa-border"></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.
       </p>
     </div>
     <div class="col-md-6">
       <p class="lead">
-        <i class="fa fa-ambulance fa-4x pull-right fa-border"></i>
+        <i class="fa fa-ambulance fa-4x fa-pull-right fa-border"></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.
       </p>
     </div>
   </div>
   <div class="row">
     <div class="col-md-4">
-      <i class="fa fa-building-o fa-2x pull-left fa-border"></i>
+      <i class="fa fa-building-o fa-2x fa-pull-left fa-border"></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.
     </div>
     <div class="col-md-4">
-      <i class="fa fa-stethoscope fa-3x pull-right fa-border"></i>
+      <i class="fa fa-stethoscope fa-3x fa-pull-right fa-border"></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.
     </div>
     <div class="col-md-4">
-      <i class="fa fa-ambulance fa-4x pull-left"></i>
+      <i class="fa fa-ambulance fa-4x fa-pull-left"></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.
     </div>
   </div>