Placing text inside fontawesome icon

Question

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

Answer 1

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>