Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 241
Mincong Huang Avatar asked Jul 06 '15 07:07

Mincong Huang


2 Answers

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.

like image 76
Alberto I.N.J. Avatar answered Sep 22 '22 08:09

Alberto I.N.J.


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).

like image 45
odedta Avatar answered Sep 24 '22 08:09

odedta