asked on

float a number over a font awesome icon

I want to float the number of messages a user has over the top of the comment icon . I am not sure how to accomplish this with CSS.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="item-content">
        <div class="item-media">
            <i class="fa fa-envelope-o"></i>
        </div>
        <div class="item-inner">

            <span class="title"> Messages <i id="mailicon" class=" fa fa-comment fa-1x"></i></span>
        </div>
    </div>

Open in new window

The mailicon ID is just used in the javascript to add the fa fa-comment fa-1x class when there is a new message. so if there are two messages I want to float a 3 over the comment icon.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

austinfx

ASKER

ok That is close!
The 3 sits above the icon.

Tom Beck

I want to float the number of messages a user has over the top of the comment icon

Exactly.

You want the number inside the icon you can try this:

sup {
    color: #fff;
    left: -0.9em;
    top: -0.1em;
}

Open in new window

But you should probably change the icon size to "fa-2x" because "fa-1x" is too small to read. If the number goes to double digits, forget about it.

austinfx

ASKER

Perfect and Elegant! Thank you!

Tom Beck

You're welcome. Thanks for the points.