如何在引导面板的右侧创建一个图标？答案

【问题标题】：How to create an icon on the right side of a bootstrap panel?如何在引导面板的右侧创建一个图标？
【发布时间】：2015-09-23 06:21:00
【问题描述】：

我在引导面板上放置真棒图标时遇到问题。我想将此图标放在面板标题的右侧。但是代码不起作用。有人可以帮忙吗？

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 frontend font-awesome

【解决方案1】：

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

.text-right {
    float: right;
}

如果您使用的是引导程序，添加类 pull-right 也可以解决问题。

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

【讨论】：

你能告诉我为什么我们应该使用<span>而不是<i>吗？
使用 标签不是语义 HTML，fontawesome 使用这个标签是因为： 1. 它很短。 2. i 代表图标。
好的。我现在明白了。谢谢 :-)

【解决方案2】：

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

例如

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

这是JsFiddle Link。

希望对你有帮助。

【讨论】：