diff options
author | davegandy <dave@davegandy.com> | 2013-10-22 19:11:34 +0400 |
---|---|---|
committer | davegandy <dave@davegandy.com> | 2013-10-22 19:11:34 +0400 |
commit | 2879ed25addd03583cd6e5d85d40775f6ae3b8c4 (patch) | |
tree | 7000604ef22754248354cd6c85dde9b1db644104 /src | |
parent | 4628990555baa7c64182702c4c6e79d067d5d2b5 (diff) |
refactoring and documenting fixed width icon class
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/examples/bootstrap.html | 16 | ||||
-rw-r--r-- | src/_includes/examples/button-dropdowns.html | 12 | ||||
-rw-r--r-- | src/_includes/examples/fixed-width.html | 26 | ||||
-rw-r--r-- | src/_includes/examples/navigation.html | 16 | ||||
-rw-r--r-- | src/_includes/examples/spinning.html (renamed from src/_includes/examples/animated-spinner.html) | 4 | ||||
-rw-r--r-- | src/_includes/navbar.html | 23 | ||||
-rw-r--r-- | src/assets/font-awesome/less/core.less | 12 | ||||
-rw-r--r-- | src/assets/font-awesome/scss/_core.scss | 10 | ||||
-rw-r--r-- | src/cheatsheet.html | 2 | ||||
-rw-r--r-- | src/examples.html | 3 | ||||
-rw-r--r-- | src/test.html | 4 |
11 files changed, 74 insertions, 54 deletions
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 @@ </div> <div class="margin-bottom"> <div class="btn-group open"> - <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a> + <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> @@ -76,13 +76,13 @@ </div> <div class="btn-group open"> - <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a> + <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> 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 @@ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> @@ -22,9 +22,9 @@ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> 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 @@ +<section id="fixed-width"> + <h2 class="page-header">Fixed Width Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <ul class="nav nav-pills nav-stacked"> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> + </ul> + </div> + <div class="col-md-9 col-sm-8"> + <p> + For use when variable width throws off alignment. Especially useful in things like nav lists. + </p> +{% highlight html %} +<ul class="nav nav-pills nav-stacked"> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> +</ul> +{% endhighlight %} + </div> + </div> +</section> 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 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <ul class="nav nav-pills nav-stacked"> - <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> - <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> - <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> </ul> </div> <div class="col-md-9 col-sm-8"> <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p> {% highlight html %} <ul class="nav nav-pills nav-stacked"> - <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> - <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> - <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> - <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> </ul> {% endhighlight %} </div> diff --git a/src/_includes/examples/animated-spinner.html b/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 @@ -<section id="animated-spinner"> - <h2 class="page-header">Animated Spinner</h2> +<section id="spinning"> + <h2 class="page-header">Spinning Icons</h2> <div class="row"> <div class="col-md-3 col-sm-4"> <p> 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 @@ <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-fixed-width"></i> Icons</a></li> + <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i> Icons</a></li> <li class="divider"></li> - <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub fa-fixed-width"></i> 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-fixed-width"></i> Web Application Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-checkbox-checked fa-fixed-width"></i> Form Control Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i> Currency Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fixed-width"></i> Text Editor Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fixed-width"></i> Directional Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fixed-width"></i> Video Player Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i> Brand Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i> Medical Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub fa-fw"></i> 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> Web Application Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i> Form Control Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i> Currency Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i> Text Editor Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fw"></i> Directional Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i> Video Player Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i> Brand Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i> 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> @@ -49,9 +49,10 @@ <li class="divider"></li> <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li> <li><a href="{{ page.relative_path }}examples/#larger-icons">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/#bulleted-lists">Bulleted Lists</a></li> <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li> - <li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li> + <li><a href="{{ page.relative_path }}examples/#spinning">Spinning Icons</a></li> <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated & Flipped</a></li> <li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li> <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3</a></li> 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: ../ <div class="row"> {% for icon in icons %} <div class="col-md-4 col-sm-6"> - <i class="fa fa-fixed-width">&#x{{ icon.unicode }}</i> + <i class="fa fa-fw">&#x{{ icon.unicode }}</i> fa-{{ icon.id }} <span class="muted">(&#x{{ icon.unicode }};)</span> </div> 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: ../ <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active"> - Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> + Overview<i class="fa fa-chevron-right fa-fw pull-right"></i> </a> <a href="#" class="list-group-item"> - Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> + Overview<i class="fa fa-chevron-right fa-fw pull-right"></i> </a> </div> </div> |