getting stacked and rotated moved over to new prefix

This commit is contained in:
davegandy 2013-09-30 20:27:45 -04:00
parent 6ce5780b79
commit 676f6ad7b4
11 changed files with 125 additions and 125 deletions

34
css/font-awesome.css vendored
View File

@ -254,7 +254,7 @@ a [class*=" fa-"] {
/* EXTRAS /* EXTRAS
* -------------------------- */ * -------------------------- */
/* Stacked and layered icon */ /* Stacked and layered icon */
.icon-stack { .fa-stack {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 2em; width: 2em;
@ -262,8 +262,8 @@ a [class*=" fa-"] {
line-height: 2em; line-height: 2em;
vertical-align: -35%; vertical-align: -35%;
} }
.icon-stack [class^="icon-"], .fa-stack [class^="fa-"],
.icon-stack [class*=" icon-"] { .fa-stack [class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -273,12 +273,12 @@ a [class*=" fa-"] {
*line-height: 2em; *line-height: 2em;
text-align: center; text-align: center;
} }
.icon-stack .icon-stack-base { .fa-stack .fa-stack-base {
font-size: 2em; font-size: 2em;
*line-height: 1em; *line-height: 1em;
} }
/* Animated rotating icon */ /* Animated rotating icon */
.icon-spin { .fa-spin {
display: inline-block; display: inline-block;
-webkit-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear;
@ -286,8 +286,8 @@ a [class*=" fa-"] {
animation: spin 2s infinite linear; animation: spin 2s infinite linear;
} }
/* Prevent stack and spinners from being taken inline when inside a link */ /* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack, a .fa-stack,
a .icon-spin { a .fa-spin {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -332,7 +332,7 @@ a .icon-spin {
} }
} }
/* Icon rotations and mirroring */ /* Icon rotations and mirroring */
.icon-rotate-90:before { .fa-rotate-90:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
@ -340,7 +340,7 @@ a .icon-spin {
-o-transform: rotate(90deg); -o-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
} }
.icon-rotate-180:before { .fa-rotate-180:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
@ -348,7 +348,7 @@ a .icon-spin {
-o-transform: rotate(180deg); -o-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
} }
.icon-rotate-270:before { .fa-rotate-270:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
@ -356,14 +356,14 @@ a .icon-spin {
-o-transform: rotate(270deg); -o-transform: rotate(270deg);
transform: rotate(270deg); transform: rotate(270deg);
} }
.icon-flip-horizontal:before { .fa-flip-horizontal:before {
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1); -moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1); -ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); transform: scale(-1, 1);
} }
.icon-flip-vertical:before { .fa-flip-vertical:before {
-webkit-transform: scale(1, -1); -webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1); -moz-transform: scale(1, -1);
-ms-transform: scale(1, -1); -ms-transform: scale(1, -1);
@ -371,11 +371,11 @@ a .icon-spin {
transform: scale(1, -1); transform: scale(1, -1);
} }
/* ensure rotation occurs inside anchor tags */ /* ensure rotation occurs inside anchor tags */
a .icon-rotate-90:before, a .fa-rotate-90:before,
a .icon-rotate-180:before, a .fa-rotate-180:before,
a .icon-rotate-270:before, a .fa-rotate-270:before,
a .icon-flip-horizontal:before, a .fa-flip-horizontal:before,
a .icon-flip-vertical:before { a .fa-flip-vertical:before {
display: inline-block; display: inline-block;
} }
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen

View File

@ -30,16 +30,16 @@ a [class^="fa-"],a [class*=" fa-"]{display:inline;}
.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;} .btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;} .btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;}
.nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;} .nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;}
.icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
.icon-stack .icon-stack-base{font-size:2em;*line-height:1em;} .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;}
.icon-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;} a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;}
@-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-rotate-90:before{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);} @-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:before{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);}
.icon-rotate-180:before{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-180:before{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);}
.icon-rotate-270:before{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-rotate-270:before{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);}
.icon-flip-horizontal:before{-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-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
.icon-flip-vertical:before{-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:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;} a .fa-rotate-90:before,a .fa-rotate-180:before,a .fa-rotate-270:before,a .fa-flip-horizontal:before,a .fa-flip-vertical:before{display:inline-block;}
.fa-glass:before{content:"\f000";} .fa-glass:before{content:"\f000";}
.fa-music:before{content:"\f001";} .fa-music:before{content:"\f001";}
.fa-search:before{content:"\f002";} .fa-search:before{content:"\f002";}

View File

@ -5,7 +5,7 @@
.icon-stack(); .icon-stack();
/* Animated rotating icon */ /* Animated rotating icon */
.icon-spin { .fa-spin {
display: inline-block; display: inline-block;
-webkit-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear;
@ -14,8 +14,8 @@
} }
/* Prevent stack and spinners from being taken inline when inside a link */ /* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack, a .fa-stack,
a .icon-spin { a .fa-spin {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -42,7 +42,7 @@ a .icon-spin {
} }
/* Icon rotations and mirroring */ /* Icon rotations and mirroring */
.icon-rotate-90:before { .fa-rotate-90:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
@ -51,7 +51,7 @@ a .icon-spin {
transform: rotate(90deg); transform: rotate(90deg);
} }
.icon-rotate-180:before { .fa-rotate-180:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
@ -60,7 +60,7 @@ a .icon-spin {
transform: rotate(180deg); transform: rotate(180deg);
} }
.icon-rotate-270:before { .fa-rotate-270:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
@ -69,7 +69,7 @@ a .icon-spin {
transform: rotate(270deg); transform: rotate(270deg);
} }
.icon-flip-horizontal:before { .fa-flip-horizontal:before {
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1); -moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1); -ms-transform: scale(-1, 1);
@ -77,7 +77,7 @@ a .icon-spin {
transform: scale(-1, 1); transform: scale(-1, 1);
} }
.icon-flip-vertical:before { .fa-flip-vertical:before {
-webkit-transform: scale(1, -1); -webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1); -moz-transform: scale(1, -1);
-ms-transform: scale(1, -1); -ms-transform: scale(1, -1);
@ -87,7 +87,7 @@ a .icon-spin {
/* ensure rotation occurs inside anchor tags */ /* ensure rotation occurs inside anchor tags */
a { a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { .fa-rotate-90, .fa-rotate-180, .fa-rotate-270, .fa-flip-horizontal, .fa-flip-vertical {
&:before { display: inline-block; } &:before { display: inline-block; }
} }
} }

View File

@ -24,15 +24,15 @@
} }
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.icon-stack { .fa-stack {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @width; width: @width;
height: @height; height: @height;
line-height: @width; line-height: @width;
vertical-align: -35%; vertical-align: -35%;
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -42,7 +42,7 @@
*line-height: @height; *line-height: @height;
text-align: center; text-align: center;
} }
.icon-stack-base { .fa-stack-base {
font-size: @base-font-size; font-size: @base-font-size;
*line-height: (@height / @base-font-size); *line-height: (@height / @base-font-size);
} }

View File

@ -1,6 +1,6 @@
<a href="#"><i class="icon-flag"></i>&nbsp; normal</a><br> <a href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
<a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br> <a href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
<a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br> <a href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
<a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br> <a href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
<a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br> <a href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
<a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a> <a href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

View File

@ -1,6 +1,6 @@
<a class="btn" href="#"><i class="icon-flag"></i>&nbsp; normal</a><br> <a class="btn" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br> <a class="btn" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br> <a class="btn" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br> <a class="btn" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
<a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br> <a class="btn" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
<a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a> <a class="btn" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

View File

@ -1,6 +1,6 @@
<i class="icon-flag"></i>&nbsp; normal<br> <i class="fa fa-flag"></i>&nbsp; normal<br>
<i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90<br> <i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180<br> <i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270<br> <i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br> <i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical

View File

@ -1,68 +1,68 @@
<p> <p>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-twitter icon-light"></i> <i class="fa fa-twitter fa-light"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-facebook icon-light"></i> <i class="fa fa-facebook fa-light"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-github icon-light"></i> <i class="fa fa-github fa-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>
</p> </p>
<p> <p>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-twitter icon-light"></i> <i class="fa fa-twitter fa-light"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-facebook icon-light"></i> <i class="fa fa-facebook fa-light"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-github icon-light"></i> <i class="fa fa-github fa-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>
</p> </p>
<p> <p>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-facebook"></i> <i class="fa fa-facebook"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-github"></i> <i class="fa fa-github"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>

View File

@ -1,51 +1,51 @@
<p> <p>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-twitter icon-light"></i> <i class="fa fa-twitter fa-light"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-facebook icon-light"></i> <i class="fa fa-facebook fa-light"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-github icon-light"></i> <i class="fa fa-github fa-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<p> <p>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-twitter icon-light"></i> <i class="fa fa-twitter fa-light"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-facebook icon-light"></i> <i class="fa fa-facebook fa-light"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-github icon-light"></i> <i class="fa fa-github fa-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<p> <p>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-facebook"></i> <i class="fa fa-facebook"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle-blank icon-stack-base"></i> <i class="fa fa-circle-blank fa-stack-base"></i>
<i class="icon-github"></i> <i class="fa fa-github"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>

View File

@ -5,7 +5,7 @@
.icon-stack(); .icon-stack();
/* Animated rotating icon */ /* Animated rotating icon */
.icon-spin { .fa-spin {
display: inline-block; display: inline-block;
-webkit-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear;
@ -14,8 +14,8 @@
} }
/* Prevent stack and spinners from being taken inline when inside a link */ /* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack, a .fa-stack,
a .icon-spin { a .fa-spin {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
@ -42,7 +42,7 @@ a .icon-spin {
} }
/* Icon rotations and mirroring */ /* Icon rotations and mirroring */
.icon-rotate-90:before { .fa-rotate-90:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
@ -51,7 +51,7 @@ a .icon-spin {
transform: rotate(90deg); transform: rotate(90deg);
} }
.icon-rotate-180:before { .fa-rotate-180:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
@ -60,7 +60,7 @@ a .icon-spin {
transform: rotate(180deg); transform: rotate(180deg);
} }
.icon-rotate-270:before { .fa-rotate-270:before {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
@ -69,7 +69,7 @@ a .icon-spin {
transform: rotate(270deg); transform: rotate(270deg);
} }
.icon-flip-horizontal:before { .fa-flip-horizontal:before {
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1); -moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1); -ms-transform: scale(-1, 1);
@ -77,7 +77,7 @@ a .icon-spin {
transform: scale(-1, 1); transform: scale(-1, 1);
} }
.icon-flip-vertical:before { .fa-flip-vertical:before {
-webkit-transform: scale(1, -1); -webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1); -moz-transform: scale(1, -1);
-ms-transform: scale(1, -1); -ms-transform: scale(1, -1);
@ -87,7 +87,7 @@ a .icon-spin {
/* ensure rotation occurs inside anchor tags */ /* ensure rotation occurs inside anchor tags */
a { a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { .fa-rotate-90, .fa-rotate-180, .fa-rotate-270, .fa-flip-horizontal, .fa-flip-vertical {
&:before { display: inline-block; } &:before { display: inline-block; }
} }
} }

View File

@ -24,15 +24,15 @@
} }
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.icon-stack { .fa-stack {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @width; width: @width;
height: @height; height: @height;
line-height: @width; line-height: @width;
vertical-align: -35%; vertical-align: -35%;
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -42,7 +42,7 @@
*line-height: @height; *line-height: @height;
text-align: center; text-align: center;
} }
.icon-stack-base { .fa-stack-base {
font-size: @base-font-size; font-size: @base-font-size;
*line-height: (@height / @base-font-size); *line-height: (@height / @base-font-size);
} }