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/

score 18 · Accepted Answer · answered Jul 06 '15 at 07:40

18

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.

answered Jul 06 '15 at 07:40

Alberto I.N.J.

1,855
14
19

score 3 · Answer 2 · edited May 23 '17 at 12:01

3

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

edited May 23 '17 at 12:01

Community

1
1

answered Jul 06 '15 at 07:39

odedta

2,430
4
24
51

Could you tell me why should we use `` instead of `` ? – Mincong Huang Jul 06 '15 at 07:54
1

Using tags is not semantic HTML, fontawesome use this tag because: 1. It's short. 2. i stands for icon. – odedta Jul 06 '15 at 08:05
Ok. I understand better now. Thx :-) – Mincong Huang Jul 06 '15 at 09:26

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

2 Answers2