如何在文本旁边放置一个 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>

我已经尝试使用中的 fixed-width class，没有任何变化。我也试过 float: left，把它放在同一条线上，但让它走到了最左边。我还尝试扩大我的菜单 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：IMO 不需要该行中的 <span /> 和 <p />。

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

How do I place a FontAwesome Icon right next to text

javascript

css

reactjs

font-awesome-5