如何在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/

- Mincong Huang

Answer 1

尝试将fa fa-question-circle类中的text-right更改为pull-right。 例如：

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

这是JsFiddle链接。

希望它有所帮助。

- Alberto I.N.J.

Answer 2

将以下内容添加到您的CSS文件中：

.text-right {
    float: right;
}

如果你正在使用bootstrap，添加class pull-right也可能有用。

最后一件事，如果你在添加FontAwesome图标并且使用语义化HTML，则应该使用<span>标签而不是<i>标签（解释）。

- odedta

---

你能告诉我为什么我们应该使用 <span> 而不是 <i> 吗？ - Mincong Huang

使用<i>标签不是语义化HTML，fontawesome使用这个标签的原因是：1.它很短。2.i代表图标。 - odedta

好的，我现在理解得更清楚了。谢谢 :-) - Mincong Huang