如何将FontAwesome图标放在文字旁 图标单独显示在上一行怎么办

问题核心原因 #

你代码中<h5>是块级元素，默认会独占一整行，即便和图标同放在行内元素<span>里，也会自动触发换行，这是你之前调整fa-fw、加宽容器都无效的根本原因。

最优解决方案 #

给包裹图标和文字的外层<span>添加flex布局，同时修改<h5>的默认块级属性，就能实现并排且自动垂直对齐：

<div className="block col-1">
    <p>
        <span style="display: inline-flex; align-items: center; gap: 8px;">
            <FontAwesomeIcon icon={faUser} className="fa-fw" />
            <h5 style="display: inline-block; margin: 0;">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>

补充说明 #

• display: inline-flex 不会让外层容器独占整行，同时启用flex布局能力
• align-items: center 自动让图标和文字垂直居中对齐
• gap: 8px 控制图标和文字的间距，你可以根据需求调整数值
• 也可以直接把h5替换为<span>配合自定义样式实现同样的文字大小加粗效果，更符合行内元素嵌套语义

内容的提问来源于stack exchange，提问作者Randy