Fontawesome icon calendar days

This is a simple BS 2.3.2 + FA 3.2.1 skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css">
<div class="calendar-stack">
  <i class="icon-calendar-empty"></i>
  <span class="calendar-day">1</span>
</div>
<div class="calendar-stack icon-2x">
  <i class="icon-calendar-empty"></i>
  <span class="calendar-day">22</span>
</div>
<div class="calendar-stack icon-3x">
  <i class="icon-calendar-empty"></i>
  <span class="calendar-day">31</span>
</div>
<div class="calendar-stack icon-4x">
  <i class="icon-calendar-empty"></i>
  <span class="calendar-day">25</span>
</div>
<div class="calendar-stack icon-5x">
  <i class="icon-calendar-empty"></i>
  <span class="calendar-day">3</span>
</div>

SCSS

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

    .icon-calendar-empty,
    .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;
    }
}