September 30, 2014

How to place text or icons inside fontawesome icon?

How to place text or icons inside fontawesome icon

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.

I have shown various examples.

HTML

<span class="fa-stack fa-3x">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

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

<span class="fa-stack fa-3x">
  <i class="fa fa-comment fa-stack-2x"></i>
  <strong class="fa-stack-1x fa-stack-text fa-inverse">5</strong>
</span>

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

<span class="fa-stack fa-3x">
  <i class="fa fa-certificate fa-stack-2x"></i>
  <span class="fa fa-stack-1x fa-inverse">20</span>
</span>

The only CSS i used here to vertically align the text for the calendar, since the empty spot in the calendar isn't centered. So we'll push it down a little bit.

CSS

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

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views