Stacked icons with one css class

Question

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" />

Do you mean with a single `span` with both classes for square and twitter icons? You can't use `:before` twice on the same element (second declaration for `content` will override the first one) but there may still have a solution — FelipeAls, Oct 25 '13 at 12:44

Michał Rybak · Accepted Answer · 2013-10-25T14:25:32.670

4

(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.

edited Oct 25 '13 at 14:25

answered Oct 25 '13 at 13:22

Michał Rybak

8,648
3
42
54

Thank you for your answer! Would be it possible to do something like: `.myclass {content: ">"} `. And what do you mean with positioning issues for :after? I've updated my question – Tony Oct 25 '13 at 13:39
Ok, I've edited my question. But would be it possible to use it with html code as content – Tony Oct 25 '13 at 13:51
as documentation says, html can't be used as a value of `content` attribute. I'm digging the `:after` case right now, it may work *in some cases*. – Michał Rybak Oct 25 '13 at 13:53
@Tony, I have achieved desired result with `:after`, but this still has some limitations. I hope you'll be satisfied, though. See my updated answer. – Michał Rybak Oct 25 '13 at 14:26
Thank you! Do you think it is possible to reach the same (nice) result as with fa-* css styles to stack icons, if I use absolute position and :after? – Tony Oct 25 '13 at 14:36
If I understood your question well then yes, you should be able the get any desired result as this is fully customizable. Just fiddle a bit with `font-size`, '`top`, '`left` and (possibly) `color`. – Michał Rybak Oct 25 '13 at 14:46

score 3 · Answer 2 · edited May 23 '17 at 11:59

About your update, if 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" />

It's not, as it is explained there : CSS content property: is it possible to insert HTML instead of Text?

If you want to keep control of the two stacked icon in a single HTML tag you can get it with something like that.

div{
  display:flex;
  justify-content: center;
  position:relative;
}

i:before {
    content: attr(icon-before); // "\f099";
    position: absolute; 
    font-size: 1.5em;
    margin:0.1em;
}

i:after {
    content: attr(icon-after); // "\f096";
    position: absolute; 
    font-size: 2.1em;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<!--https://stackoverflow.com/questions/22600464/html-special-characters-in-css-content-using-attr-->

<div><i class="fa" icon-before="&#xf099" icon-after="&#xf096"></i></div>

Stacked icons with one css class

2 Answers2

Linked