Placing text inside fontawesome icon

font-awesome

Solution

I think it might be best to create a different class for both the container and the text.

Something like this (I forked the fiddle from my comment and updated for FontAwesome 4.0.3: http://jsfiddle.net/canuk/YzkWs/

  .calendar-stack {
        position: relative;
        display: inline-block;
        width: (13em / 14);
        height: 1em;

    .fa-calendar-o,
    .calendar-day {
        position: absolute;
    }

    .calendar-day {
        top: (7em / 8);
        left: (1em / 8);
        width: (11em / 8);
        height: (6em / 8);
        font-family: sans-serif;
        font-size: (8em / 14);
        font-weight: 700;
        line-height: (8em / 14);
        text-align: center;
      }
  }

And then your HTML looks like this:

<div class="calendar-stack">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">1</span>
</div>

or this for 5x:

<div class="calendar-stack fa-5x">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">3</span>
</div>

Updated for 4.3.x

CSS

.calendar-stack {
    position: relative;
    display: inline-block;
    width: (13em / 14);
    height: 1em;

    .fa-calendar-o,
    .calendar-day {
        position: absolute;
    }

    .calendar-day {
        top: (7em / 8);
        left: (1em / 8);
        width: (11em / 8);
        height: (6em / 8);
        font-family: sans-serif;
        font-size: (8em / 14);
        font-weight: 700;
        line-height: (8em / 14);
        text-align: center;
    }
}

HTML

<div class="calendar-stack fa-5x">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">3</span>
</div>

Problem

I would like to add some text to be stacked inside another icon. Here's my attempt: ``` <!-- How should I style this to work properly with fa-1x and fa-5x ???? --> <span class="fa-stack fa-1x"> <i class="fa fa-calendar-o fa-stack-2x"></i> <span class="fa fa-stack-1x">31</span> </span> ``` Are there any ways this would be correct position when using both fa-1x and fa-5x? http://jsbin.com/opOwENe/3/edit Larsi

Original source