Stacking Text and Icons

@davegandy wrote this on 19 May 2014

Want to stack regular text on top of Font Awesome icons? It turns out that Font Awesome stacked icons are already pretty much what we need.

FA-CALENDAR-O WITH DATE

When we re-wrote the CSS in FA version 4, we separated out the icon font declaration into the fa class instead of using a star selector. This saves us the trouble of needing to add any font-family overrides in the CSS. This would not have been so trivial in 3.2. Here's the HTML:

HTML

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS

The only CSS we really need to add is to vertically align the text, since the empty spot in the calendar isn't centered. So we'll push it down a tad:

.calendar-text { margin-top: .3em; }

RESULT

See the Pen dlCuq by Dave Gandy (@davegandy) on CodePen.

FA-COMMENT & FA-FILE-O

We threw in a couple of other examples in there too. The comment icon already happens to align vertically, so there's no extra CSS to add. The file-o icon also works great with text after we give it a .2em top margin.

Have any great use cases for stacking text on top of icons? Drop us a note on Twitter at @fontawesome.

See All Articles  »