library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring and documenting fixed width icon class

Browse Source
This commit is contained in:
davegandy 2013-10-22 11:11:34 -04:00
parent 4628990555
commit 2879ed25ad
14 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/font-awesome.css vendored
View File

@ -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;

2
css/font-awesome.min.css vendored
View File

@ -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}

12
less/core.less
View File

@ -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;
}

16
src/_includes/examples/bootstrap.html
View File

@ -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>

12
src/_includes/examples/button-dropdowns.html
View File

@ -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>

26
src/_includes/examples/fixed-width.html Normal file
View File

@ -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>&nbsp; Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fw"></i>&nbsp; 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>

16
src/_includes/examples/navigation.html
View File

@ -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>

4
src/_includes/examples/animated-spinner.html → src/_includes/examples/spinning.html
View File

@ -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>

23
src/_includes/navbar.html
View File

@ -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>&nbsp; Icons</a></li>
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; Icons</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub fa-fixed-width"></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-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-checkbox-checked fa-fixed-width"></i>&nbsp; Form Control Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub 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/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control 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>
</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 &amp; 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>

12
src/assets/font-awesome/less/core.less vendored
View File

@ -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;
}

10
src/assets/font-awesome/scss/_core.scss vendored
View File

@ -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;
}

2
src/cheatsheet.html
View File

@ -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">(&amp;#x{{ icon.unicode }};)</span>
</div>

3
src/examples.html
View File

@ -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 %}

4
src/test.html
View File

@ -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>