Using Numbers With Font Awesome

Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.

Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.

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:

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)