re-writing & simplifying stacked icons, massive re-organization of less include files

This commit is contained in:
davegandy 2013-10-22 15:55:08 -04:00
parent 2879ed25ad
commit 448d3ddb7f
36 changed files with 381 additions and 485 deletions

104
css/font-awesome.css vendored
View File

@ -31,8 +31,6 @@
font-weight: normal;
font-style: normal;
}
/* FONT AWESOME CORE
* -------------------------- */
.fa {
display: inline-block;
font-family: FontAwesome;
@ -48,6 +46,18 @@
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
.fa-fw {
width: 1.2857142857142858em;
text-align: center;
@ -70,50 +80,11 @@
.fa-li.fa-lg {
left: -1.8571428571428572em;
}
.fa.hide {
display: none;
}
.fa-muted {
color: #eeeeee;
}
.fa-light {
color: #ffffff;
}
.fa-dark {
color: #333333;
}
.fa-border {
padding: .2em .25em .15em;
border: solid 1px #eeeeee;
border-radius: 3px;
}
.fa-2x {
font-size: 2em;
}
.fa-2x.fa-border {
border-width: 2px;
border-radius: 4px;
}
.fa-3x {
font-size: 3em;
}
.fa-3x.fa-border {
border-width: 3px;
border-radius: 5px;
}
.fa-4x {
font-size: 4em;
}
.fa-4x.fa-border {
border-width: 4px;
border-radius: 6px;
}
.fa-5x {
font-size: 5em;
}
.fa-5x.fa-border {
border-width: 5px;
border-radius: 7px;
border-width: .08em;
border-radius: .1em;
}
.pull-right {
float: right;
@ -127,30 +98,6 @@
.fa.pull-right {
margin-left: .3em;
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: -35%;
}
.fa-stack .fa {
position: absolute;
display: block;
width: 100%;
height: 100%;
font-size: 1em;
line-height: inherit;
text-align: center;
}
.fa-stack .fa-stack-base {
font-size: 2em;
}
/* Animated rotating icon */
.fa-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
@ -235,6 +182,29 @@
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-stack-top,
.fa-stack-bottom {
position: absolute;
width: 100%;
text-align: center;
}
.fa-stack-top {
line-height: inherit;
}
.fa-stack-bottom {
font-size: 2em;
}
.fa-inverse {
color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-glass:before {

View File

@ -1,29 +1,28 @@
@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-2x{font-size:2em}
.fa-3x{font-size:3em}
.fa-4x{font-size:4em}
.fa-5x{font-size:5em}
.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}
.fa-muted{color:#eee}
.fa-light{color:#fff}
.fa-dark{color:#333}
.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-radius:3px}
.fa-2x{font-size:2em}.fa-2x.fa-border{border-width:2px;border-radius:4px}
.fa-3x{font-size:3em}.fa-3x.fa-border{border-width:3px;border-radius:5px}
.fa-4x{font-size:4em}.fa-4x.fa-border{border-width:4px;border-radius:6px}
.fa-5x{font-size:5em}.fa-5x.fa-border{border-width:5px;border-radius:7px}
.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-width:.08em;border-radius:.1em}
.pull-right{float:right}
.pull-left{float:left}
.fa.pull-left{margin-right:.3em}
.fa.pull-right{margin-left:.3em}
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;text-align:center}
.fa-stack .fa-stack-base{font-size:2em}
.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
.fa-flip-horizontal{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}
.fa-flip-vertical{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
.fa-stack-top,.fa-stack-bottom{position:absolute;width:100%;text-align:center}
.fa-stack-top{line-height:inherit}
.fa-stack-bottom{font-size:2em}
.fa-inverse{color:#fff}
.fa-glass:before{content:"\f000"}
.fa-music:before{content:"\f001"}
.fa-search:before{content:"\f002"}

17
less/bordered-pulled.less Normal file
View File

@ -0,0 +1,17 @@
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-width: .08em;
border-radius: .1em;
}
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -1,5 +1,5 @@
/* FONT AWESOME CORE
* -------------------------- */
// Base Class Definition
// -------------------------
.@{fa-css-prefix} {
display: inline-block;
@ -10,101 +10,3 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
// Icon UL & LI
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-icon-li-width;
width: @fa-icon-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
}
}
// allows usage of the hide class directly on font awesome icons
.@{fa-css-prefix}.hide { display: none; }
.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
.@{fa-css-prefix}-light { color: @fa-icon-light; }
.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
// Icon Borders
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-radius: 3px;
}
// Icon Sizes
// -------------------------
.@{fa-css-prefix}-2x {
font-size: 2em;
&.@{fa-css-prefix}-border {
border-width: 2px;
border-radius: 4px;
}
}
.@{fa-css-prefix}-3x {
font-size: 3em;
&.@{fa-css-prefix}-border {
border-width: 3px;
border-radius: 5px;
}
}
.@{fa-css-prefix}-4x {
font-size: 4em;
&.@{fa-css-prefix}-border {
border-width: 4px;
border-radius: 6px;
}
}
.@{fa-css-prefix}-5x {
font-size: 5em;
&.@{fa-css-prefix}-border {
border-width: 5px;
border-radius: 7px;
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -1,45 +1,2 @@
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.fa-icon-stack();
/* Animated rotating icon */
.@{fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
// Icon rotations & flipping
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }
// Extras
// --------------------------

6
less/fixed-width.less Normal file
View File

@ -0,0 +1,6 @@
// Fixed Width Icons
// -------------------------
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}

View File

@ -24,9 +24,15 @@
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "extras.less";
@import "icons.less";
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

13
less/larger.less Normal file
View File

@ -0,0 +1,13 @@
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }

20
less/list.less Normal file
View File

@ -0,0 +1,20 @@
// Icon UL & LI
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-icon-li-width;
width: @fa-icon-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
}
}

View File

@ -17,26 +17,3 @@
-o-transform: scale(@horiz, @vert);
transform: scale(@horiz, @vert);
}
.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.@{fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: @width;
height: @height;
line-height: @width;
vertical-align: -35%;
.@{fa-css-prefix} {
position: absolute;
display: block;
width: 100%;
height: 100%;
font-size: @top-font-size;
line-height: inherit;
text-align: center;
}
.@{fa-css-prefix}-stack-base {
font-size: @base-font-size;
}
}
}

View File

@ -0,0 +1,9 @@
// Rotated & Flipped Icons
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }

30
less/spinning.less Normal file
View File

@ -0,0 +1,30 @@
// Spinning Icons
// --------------------------
.@{fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}

19
less/stacked.less Normal file
View File

@ -0,0 +1,19 @@
// Stacked Icons
// -------------------------
.@{fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
position: absolute;
width: 100%;
text-align: center;
}
.@{fa-css-prefix}-stack-top { line-height: inherit; }
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }

View File

@ -6,9 +6,7 @@
@fa-css-prefix: fa;
@fa-version: "4.0.0";
@fa-border-color: #eee;
@fa-icon-muted: #eee;
@fa-icon-light: #fff;
@fa-icon-dark: #333;
@fa-icon-inverse: #fff;
@fa-icon-li-width: (30em / 14);
@fa-var-glass: "\f000";

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);
}
width: (18em / 14);
text-align: center;
}

View File

@ -9,13 +9,13 @@
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent">
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
<i class="fa fa-quote-left fa-4x pull-left"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities.
</div>
{% highlight html %}
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
<i class="fa fa-quote-left fa-4x pull-left"></i>
Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %}
<div class="well well-large well-transparent clearfix">

View File

@ -11,7 +11,7 @@
</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.
The <code>fa-fw</code> sets icons at a fixed width. 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">

View File

@ -1,5 +1,5 @@
<section id="list-bullets">
<h2 class="page-header">List Bullets</h2>
<section id="list-icons">
<h2 class="page-header">List Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<ul class="fa-ul">
@ -12,7 +12,7 @@
</ul>
</div>
<div class="col-md-9 col-sm-8">
<p>Easily replace individual list bullets.</p>
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace individual list bullets.</p>
{% highlight html %}
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li>

View File

@ -23,12 +23,12 @@
fa-twitter on fa-unchecked<br>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-flag fa-light"></i>
<i class="fa fa-flag fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-terminal fa-light"></i>
<i class="fa fa-terminal fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack">

View File

@ -2,51 +2,52 @@
<h2 class="page-header">Stacked Icons</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
<code>fa-stack-base</code> for the bottom icon.
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-top</code>
for the regularly sized icon, and <code>fa-stack-bottom</code> for the larger bottom icon. <code>fa-inverse</code>
can be used as an alternative icon color.
</div>
<div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead">
<span class="fa-stack">
<i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-square-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
</span>
fa-twitter on fa-unchecked<br>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-flag fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-terminal fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack">
<i class="fa fa-camera"></i>
<i class="fa fa-ban fa-stack-base text-danger"></i>
<i class="fa fa-camera fa-stack-top"></i>
<i class="fa fa-ban fa-stack-bottom text-danger"></i>
</span>
fa-camera on fa-ban
</div>
{% highlight html %}
<span class="fa-stack">
<i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-square-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
</span>
fa-twitter on fa-unchecked<br>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-flag fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<i class="fa fa-sign-blank fa-stack-base"></i>
<i class="fa fa-terminal fa-light"></i>
<i class="fa fa-sign-blank fa-stack-bottom"></i>
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
</span>
fa-terminal on fa-sign-blank<br>
<span class="fa-stack">
<i class="fa fa-camera"></i>
<i class="fa fa-ban-circle fa-stack-base text-danger"></i>
<i class="fa fa-camera fa-stack-top"></i>
<i class="fa fa-ban-circle fa-stack-bottom text-danger"></i>
</span>
fa-camera on fa-ban-circle
{% endhighlight %}

View File

@ -50,7 +50,7 @@
<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/#list-icons">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</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>

View File

@ -1,22 +1,22 @@
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-twitter fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-facebook fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-github fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
</span>
GitHub Icon
</a>
@ -24,22 +24,22 @@
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-twitter fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-facebook fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-github fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
</span>
GitHub Icon
</a>
@ -47,22 +47,22 @@
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-github"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top"></i>
</span>
GitHub Icon
</a>

View File

@ -1,51 +1,51 @@
<p>
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-twitter fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-facebook fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-square fa-stack-base"></i>
<i class="fa fa-github fa-light"></i>
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-twitter fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-facebook fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-base"></i>
<i class="fa fa-github fa-light"></i>
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-base"></i>
<i class="fa fa-github"></i>
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top"></i>
</span>
GitHub Icon
</p>

View File

@ -0,0 +1,20 @@
---
---
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-width: .08em;
border-radius: .1em;
}
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -1,7 +1,8 @@
---
---
/* FONT AWESOME CORE
* -------------------------- */
// Base Class Definition
// -------------------------
.@{fa-css-prefix} {
display: inline-block;
@ -12,101 +13,3 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
// Icon UL & LI
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-icon-li-width;
width: @fa-icon-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
}
}
// allows usage of the hide class directly on font awesome icons
.@{fa-css-prefix}.hide { display: none; }
.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
.@{fa-css-prefix}-light { color: @fa-icon-light; }
.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
// Icon Borders
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid 1px @fa-border-color;
border-radius: 3px;
}
// Icon Sizes
// -------------------------
.@{fa-css-prefix}-2x {
font-size: 2em;
&.@{fa-css-prefix}-border {
border-width: 2px;
border-radius: 4px;
}
}
.@{fa-css-prefix}-3x {
font-size: 3em;
&.@{fa-css-prefix}-border {
border-width: 3px;
border-radius: 5px;
}
}
.@{fa-css-prefix}-4x {
font-size: 4em;
&.@{fa-css-prefix}-border {
border-width: 4px;
border-radius: 6px;
}
}
.@{fa-css-prefix}-5x {
font-size: 5em;
&.@{fa-css-prefix}-border {
border-width: 5px;
border-radius: 7px;
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

View File

@ -0,0 +1,9 @@
---
---
// Fixed Width Icons
// -------------------------
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}

View File

@ -2,9 +2,15 @@
---
{% include license-code.less %}
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "extras.less";
@import "icons.less";
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

View File

@ -0,0 +1,16 @@
---
---
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }

23
src/assets/font-awesome/less/list.less vendored Normal file
View File

@ -0,0 +1,23 @@
---
---
// Icon UL & LI
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-icon-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-icon-li-width;
width: @fa-icon-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: -@fa-icon-li-width + (4em / 14);
}
}

View File

@ -19,26 +19,3 @@
-o-transform: scale(@horiz, @vert);
transform: scale(@horiz, @vert);
}
.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.@{fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: @width;
height: @height;
line-height: @width;
vertical-align: -35%;
.@{fa-css-prefix} {
position: absolute;
display: block;
width: 100%;
height: 100%;
font-size: @top-font-size;
line-height: inherit;
text-align: center;
}
.@{fa-css-prefix}-stack-base {
font-size: @base-font-size;
}
}
}

View File

@ -0,0 +1,12 @@
---
---
// Rotated & Flipped Icons
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }

View File

@ -1,12 +1,9 @@
---
---
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.fa-icon-stack();
// Spinning Icons
// --------------------------
/* Animated rotating icon */
.@{fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
@ -34,14 +31,3 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
// Icon rotations & flipping
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }

View File

@ -0,0 +1,22 @@
---
---
// Stacked Icons
// -------------------------
.@{fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
position: absolute;
width: 100%;
text-align: center;
}
.@{fa-css-prefix}-stack-top { line-height: inherit; }
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }

View File

@ -8,9 +8,7 @@
@fa-css-prefix: {{ site.fontawesome.css_prefix }};
@fa-version: "{{ site.fontawesome.version }}";
@fa-border-color: #eee;
@fa-icon-muted: #eee;
@fa-icon-light: #fff;
@fa-icon-dark: #333;
@fa-icon-inverse: #fff;
@fa-icon-li-width: (30em / 14);
{% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}";

View File

@ -23,7 +23,7 @@ relative_path: ../
{% include examples/inline-icons.html %}
{% include examples/larger-icons.html %}
{% include examples/fixed-width.html %}
{% include examples/lists.html %}
{% include examples/list.html %}
{% include examples/bordered-pulled.html %}
{% include examples/spinning.html %}
{% include examples/rotated-flipped.html %}

View File

@ -88,10 +88,10 @@ relative_path: ../
<a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
<a href="#">Link Here<i class="fa fa-angle-double-right padding-left"></i></a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
<a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left"></i></a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
@ -108,10 +108,10 @@ relative_path: ../
<a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
<a href="#">Link Here<i class="fa fa-angle-double-right padding-left-sm"></i></a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
<a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left-sm"></i></a>
</div>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
@ -541,7 +541,7 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-angle-double-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.
<i class="fa fa-building"></i>
@ -554,9 +554,13 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i>
<span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a>
</li>
</ul>
</div>
</div>
@ -565,7 +569,7 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-angle-double-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>
</ul>
@ -574,7 +578,7 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul lead">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
@ -585,7 +589,7 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-angle-double-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>
</ul>
@ -594,7 +598,7 @@ relative_path: ../
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-angle-double-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>