如何在 bootstrap 面板的右侧创建一个图标？

Question

我在 bootstrap 面板 上定位 很棒的图标 时遇到问题。我想把这个图标放在面板标题的右侧。但是代码不起作用。有人可以帮忙吗？

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

如果您需要预览结果，请查看此处：http://jsfiddle.net/7q7w0n76/

Answer 1

将此添加到您的 CSS 文件中：

.text-right {
    float: right;
}

如果您使用的是 bootstrap，添加 class pull-right 也可能有效。

最后一件事，如果您要添加 FontAwesome 图标并编写语义 HTML，则使用 <span> 标签代替 <i> 标签 (explanation) .

Answer 2

尝试在 fa fa-question-circle class 中将 text-right 更改为 pull-right。

例如

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

这是JsFiddle Link.

希望对您有所帮助。