FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-27 14:01:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better class names for fa-stack. code is basically good to ship, just a few changes left to doc

Browse Source
This commit is contained in:
davegandy 2013-10-23 00:32:30 -04:00
parent f212bebf6c
commit 2ebd7ab466
10 changed files with 919 additions and 909 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1668
css/font-awesome.css vendored
View File

File diff suppressed because it is too large Load Diff

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

@ -7,7 +7,7 @@
.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-border{padding:.2em .25em .15em;border:solid 1px #eee;border-width:.08em;border-radius:.1em}
.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}
.pull-right{float:right}
.pull-left{float:left}
.fa.pull-left{margin-right:.3em}
@ -19,9 +19,9 @@
.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-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{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-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-stack-1x,.fa-stack-2x{position:absolute;width:100%;text-align:center}
.fa-stack-1x{line-height:inherit}
.fa-stack-2x{font-size:2em}
.fa-inverse{color:#fff}
.fa-glass:before{content:"\f000"}
.fa-music:before{content:"\f001"}

6
less/stacked.less
View File

@ -9,11 +9,11 @@
line-height: 2em;
vertical-align: middle;
}
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
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}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }

6
scss/_stacked.scss
View File

@ -9,11 +9,11 @@
line-height: 2em;
vertical-align: middle;
}
.#{$fa-css-prefix}-stack-top, .#{$fa-css-prefix}-stack-bottom {
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
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}-stack-1x { line-height: inherit; }
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

6
src/Makefile
View File

@ -23,9 +23,9 @@ build:
@echo "Compiling Less files"
@mkdir -p ${FA_CSS_DIRECTORY}
# lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
# lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
# sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
lessc --compress ${SITE_LESS} > ${SITE_CSS_MIN}
cp -r ${FA_ROOT_DIRECTORY}/* ../

46
src/_includes/examples/stacked.html
View File

@ -2,54 +2,54 @@
<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, 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>
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
for the regularly sized icon, and <code>fa-stack-2x</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-square-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-unchecked<br>
fa-twitter on fa-square-o<br>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack">
<i class="fa fa-camera fa-stack-top"></i>
<i class="fa fa-ban fa-stack-bottom text-danger"></i>
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-camera on fa-ban
fa-ban on fa-camera
</div>
{% highlight html %}
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-unchecked<br>
fa-twitter on fa-square-o<br>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack">
<i class="fa fa-sign-blank fa-stack-bottom"></i>
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-sign-blank<br>
fa-terminal on fa-square<br>
<span class="fa-stack">
<i class="fa fa-camera fa-stack-top"></i>
<i class="fa fa-ban-circle fa-stack-bottom text-danger"></i>
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-camera on fa-ban-circle
fa-ban on fa-camera
{% endhighlight %}
</div>
</div>

36
src/_includes/tests/stacked-inside-anchor.html
View File

@ -1,22 +1,22 @@
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x 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-bottom"></i>
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top fa-inverse"></i>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x 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-bottom"></i>
<i class="fa fa-twitter fa-stack-top"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-facebook fa-stack-top"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-bottom"></i>
<i class="fa fa-github fa-stack-top"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub Icon
</a>

36
src/_includes/tests/stacked.html
View File

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

6
src/assets/font-awesome/less/stacked.less vendored
View File

@ -12,11 +12,11 @@
line-height: 2em;
vertical-align: middle;
}
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
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}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }

6
src/assets/font-awesome/scss/_stacked.scss vendored
View File

@ -12,11 +12,11 @@
line-height: 2em;
vertical-align: middle;
}
.#{$fa-css-prefix}-stack-top, .#{$fa-css-prefix}-stack-bottom {
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
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}-stack-1x { line-height: inherit; }
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }