Skip to content

Commit

Permalink
better class names for fa-stack. code is basically good to ship, just…
Browse files Browse the repository at this point in the history 
… a few changes left to doc
  • Loading branch information
@davegandy
davegandy committed Oct 23, 2013
1 parent f212beb commit 2ebd7ab
Show file tree
Hide file tree
Showing 10 changed files with 919 additions and 909 deletions.
1,672 changes: 841 additions & 831 deletions css/font-awesome.css
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions css/font-awesome.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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"}
Expand Down
6 changes: 3 additions & 3 deletions less/stacked.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 3 additions & 3 deletions scss/_stacked.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 3 additions & 3 deletions src/Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}/* ../
Expand Down
46 changes: 23 additions & 23 deletions src/_includes/examples/stacked.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
36 changes: 18 additions & 18 deletions src/_includes/tests/stacked-inside-anchor.html
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
<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>
</p>
<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>
</p>
<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>
Expand Down
36 changes: 18 additions & 18 deletions src/_includes/tests/stacked.html
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions src/assets/font-awesome/less/stacked.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 3 additions & 3 deletions src/assets/font-awesome/scss/_stacked.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

0 comments on commit 2ebd7ab

Please sign in to comment.