From 2879ed25addd03583cd6e5d85d40775f6ae3b8c4 Mon Sep 17 00:00:00 2001 From: davegandy Date: Tue, 22 Oct 2013 11:11:34 -0400 Subject: [PATCH] refactoring and documenting fixed width icon class --- css/font-awesome.css | 11 +++----- css/font-awesome.min.css | 2 +- less/core.less | 12 +++------ src/_includes/examples/bootstrap.html | 16 ++++++------ src/_includes/examples/button-dropdowns.html | 12 ++++----- src/_includes/examples/fixed-width.html | 26 +++++++++++++++++++ src/_includes/examples/navigation.html | 16 ++++++------ .../{animated-spinner.html => spinning.html} | 4 +-- src/_includes/navbar.html | 23 ++++++++-------- src/assets/font-awesome/less/core.less | 12 +++------ src/assets/font-awesome/scss/_core.scss | 10 +++---- src/cheatsheet.html | 2 +- src/examples.html | 3 ++- src/test.html | 4 +-- 14 files changed, 82 insertions(+), 71 deletions(-) create mode 100644 src/_includes/examples/fixed-width.html rename src/_includes/examples/{animated-spinner.html => spinning.html} (92%) diff --git a/css/font-awesome.css b/css/font-awesome.css index 6fca57aea..d4351ece2 100644 --- a/css/font-awesome.css +++ b/css/font-awesome.css @@ -48,14 +48,9 @@ line-height: 0.75em; vertical-align: -15%; } -/* increased font size for icon-lg */ -.fa-fixed-width { - width: 1.1428571428571428em; - padding-right: 0.2857142857142857em; - text-align: right; -} -.fa-fixed-width.fa-lg { - width: 1.4285714285714286em; +.fa-fw { + width: 1.2857142857142858em; + text-align: center; } .fa-ul { padding-left: 0; diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css index 4bc4867ae..88c6e054b 100644 --- a/css/font-awesome.min.css +++ b/css/font-awesome.min.css @@ -1,6 +1,6 @@ @font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%} -.fa-fixed-width{width:1.1428571428571428em;padding-right:.2857142857142857em;text-align:right}.fa-fixed-width.fa-lg{width:1.4285714285714286em} +.fa-fw{width:1.2857142857142858em;text-align:center} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative} .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em} .fa.hide{display:none} diff --git a/less/core.less b/less/core.less index ffa63ba30..1de234769 100644 --- a/less/core.less +++ b/less/core.less @@ -17,14 +17,10 @@ line-height: (3em / 4); vertical-align: -15%; } -/* increased font size for icon-lg */ -.@{fa-css-prefix}-fixed-width { - width: (16em / 14); - padding-right: (4em / 14); - text-align: right; - &.@{fa-css-prefix}-lg { - width: (20em / 14); - } + +.@{fa-css-prefix}-fw { + width: (18em / 14); + text-align: center; } diff --git a/src/_includes/examples/bootstrap.html b/src/_includes/examples/bootstrap.html index 2c8f4a468..f8ee71700 100644 --- a/src/_includes/examples/bootstrap.html +++ b/src/_includes/examples/bootstrap.html @@ -35,13 +35,13 @@
- User + User @@ -76,13 +76,13 @@
- User + User diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html index 7a4e67a05..b024c9d4f 100644 --- a/src/_includes/examples/button-dropdowns.html +++ b/src/_includes/examples/button-dropdowns.html @@ -7,9 +7,9 @@ @@ -22,9 +22,9 @@ diff --git a/src/_includes/examples/fixed-width.html b/src/_includes/examples/fixed-width.html new file mode 100644 index 000000000..2a0f8f592 --- /dev/null +++ b/src/_includes/examples/fixed-width.html @@ -0,0 +1,26 @@ +
+

Fixed Width Icons

+
+
+ +
+
+

+ For use when variable width throws off alignment. Especially useful in things like nav lists. +

+{% highlight html %} + +{% endhighlight %} +
+
+
diff --git a/src/_includes/examples/navigation.html b/src/_includes/examples/navigation.html index 360da1f54..e37b5b95f 100644 --- a/src/_includes/examples/navigation.html +++ b/src/_includes/examples/navigation.html @@ -3,20 +3,20 @@

Use Font Awesome icons in navigation to provide helpful visual cues.

{% highlight html %} {% endhighlight %}
diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/spinning.html similarity index 92% rename from src/_includes/examples/animated-spinner.html rename to src/_includes/examples/spinning.html index f83debab6..da8bacfd1 100644 --- a/src/_includes/examples/animated-spinner.html +++ b/src/_includes/examples/spinning.html @@ -1,5 +1,5 @@ -
-

Animated Spinner

+
+

Spinning Icons

diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index e512ba5a8..29f18c922 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -26,17 +26,17 @@

  • Examples
    • @@ -49,9 +49,10 @@
  • Inline Icons
  • Larger Icons
    • +
  • Fixed Width Icons
  • Bulleted Lists
  • Bordered & Pulled
    • -
  • Animated Spinner
    • +
  • Spinning Icons
  • Rotated & Flipped
  • Stacked
  • Bootstrap 3
    • diff --git a/src/assets/font-awesome/less/core.less b/src/assets/font-awesome/less/core.less index df9d895ae..ee26820f6 100644 --- a/src/assets/font-awesome/less/core.less +++ b/src/assets/font-awesome/less/core.less @@ -19,14 +19,10 @@ line-height: (3em / 4); vertical-align: -15%; } -/* increased font size for icon-lg */ -.@{fa-css-prefix}-fixed-width { - width: (16em / 14); - padding-right: (4em / 14); - text-align: right; - &.@{fa-css-prefix}-lg { - width: (20em / 14); - } + +.@{fa-css-prefix}-fw { + width: (18em / 14); + text-align: center; } diff --git a/src/assets/font-awesome/scss/_core.scss b/src/assets/font-awesome/scss/_core.scss index 4f8570a4a..0c789f704 100644 --- a/src/assets/font-awesome/scss/_core.scss +++ b/src/assets/font-awesome/scss/_core.scss @@ -19,14 +19,10 @@ line-height: (3em / 4); vertical-align: -15%; } -/* increased font size for icon-lg */ + .#{$fa-css-prefix}-fixed-width { - width: (16em / 14); - padding-right: (4em / 14); - text-align: right; - &.#{$fa-css-prefix}-lg { - width: (20em / 14); - } + width: (18em / 14); + text-align: center; } diff --git a/src/cheatsheet.html b/src/cheatsheet.html index c0f634bd8..3685a0620 100644 --- a/src/cheatsheet.html +++ b/src/cheatsheet.html @@ -23,7 +23,7 @@ relative_path: ../
    {% for icon in icons %}
    - &#x{{ icon.unicode }} + &#x{{ icon.unicode }} fa-{{ icon.id }} (&#x{{ icon.unicode }};)
    diff --git a/src/examples.html b/src/examples.html index a9f36626d..40ec4c63c 100644 --- a/src/examples.html +++ b/src/examples.html @@ -22,9 +22,10 @@ relative_path: ../ {% include examples/inline-icons.html %} {% include examples/larger-icons.html %} + {% include examples/fixed-width.html %} {% include examples/lists.html %} {% include examples/bordered-pulled.html %} - {% include examples/animated-spinner.html %} + {% include examples/spinning.html %} {% include examples/rotated-flipped.html %} {% include examples/stacked.html %} {% include examples/bootstrap.html %} diff --git a/src/test.html b/src/test.html index ce39cb3d5..cf14f6a50 100644 --- a/src/test.html +++ b/src/test.html @@ -483,10 +483,10 @@ relative_path: ../
    - Overview + Overview - Overview + Overview