如何在文本旁边放置一个 FontAwesome 图标

Question

我正在使用 FontAwesome 的图标。 该图标显示在上面的行上，而不是在文本旁边，如下所示：

相关代码：

<div className="block col-1">
    <p><span><FontAwesomeIcon icon={faUser} className="fa-fw" /><h5>My Account</h5></span></p>
    <hr />
    <p><a>Dashboard</a></p>
    <p><div role="menuitem" onClick={this.showInvoices.bind(this)}>Invoices</div></p>
    <p><div role="menuitem" onClick={this.showOrders.bind(this)}>Orders</div></p>
</div>

我尝试使用此处的固定宽度 class ，没有任何变化。 我也尝试过float: left ，将其放在同一行，但将其设置为 go 最左边缘。 我还尝试扩大我的菜单 div。 我错过了什么？

Answer 1

h5元素是一个块元素，这意味着它将成为该行中的唯一元素。 将<FontAwesomeIcon />放入<h5 />中，它应该可以工作：

<div className="block col-1">
    <h5>
        <FontAwesomeIcon icon={faUser} className="fa-fw" />My Account
    </h5>
    <hr />
    <p><a>Dashboard</a></p>
    <p><div role="menuitem" onClick={this.showInvoices.bind(this)}>Invoices</div></p>
    <p><div role="menuitem" onClick={this.showOrders.bind(this)}>Orders</div></p>
</div>

PS：该行中的<span />和<p />不是必需的 IMO。