Tony Tony - 28 days ago 20
CSS Question

Stacked icons with one css class

In new FontAwesome 4.0.0 there is css styles for stacked items.

<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}

.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-square-o:before {
content: "\f096";
}


enter image description here

I want to do it only without using nested
span
and
i
, just only with some css-classes

.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />


What is the simplest method to achieve the same result (using fa content classes ?)

Update:
or is something like the following possible ?

.myclass1:before { content: '<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>' }

<span class=".... myclass1" />

Answer

(edited)

This is not possible with fa-* classes, because there is no possibility to determine the order of stacked icons: in CSS class="foo bar" is the same as class="bar foo"

On the other side, you can define your own class and style it to achieve one chosen stacked icon - i.e you'll need one custom class per every pair (e.g fa-times stacked on fa-square).

In order to achieve this, use :before and :after selectors (and absolute positioning - little demo).

It also seems (tested using background property) that :after element is on top of :before if you use absolute positioning. In case that's not true, you cvan always use z-index to order those two elements manually.