How to create an icon on the right side of a bootstrap panel?

Question

I got a problem positionning an awesome icon on a bootstrap panel. I want to put this icon on the right side of the panel heading. But the code doesn't work. Can somebody help ?

<div class="panel panel-primary">
    <div class="panel-heading">
        Title
        <i class="fa fa-question-circle text-right"></i>
    </div>
    <div class="panel-body">
        Hello world!
    </div>
</div>

If you need to preview the result, check here : http://jsfiddle.net/7q7w0n76/

Answer 1

Try to change text-right to pull-right in the fa fa-question-circle class.

E.g.

<i class="fa fa-question-circle pull-right"></i>

Here's the JsFiddle Link.

Hope it helps.

Answer 2

Add this to your CSS file:

.text-right {
    float: right;
}

If you're using bootstrap, adding class pull-right might do the trick as well.

One last thing, if you're adding FontAwesome icons and you write semantic HTML then use <span> tags for it instead of <i> tags (explanation).