React-Bootstrap / Panel / Font Awesome - 我如何在面板的 header 中有一个很棒的字体图标

Question

对于一个面板，我希望在 header 中有一个很棒的字体图标和一些标题。我该怎么做？

想用：

<Panel header = "Panel Title" bsStyle="primary">
</Panel>

但我需要这样的东西：

<div class="panel-heading">
     <i class="fa fa-list-alt fa-fw"></i> Panel Title
</div>

Answer 1

我记得你可以在 header 属性中添加一个元素

<Panel header={<div><span className="fa fa-list-alt fa-fw"></span> <span>Header</span></div>}>Content</Panel>

或

const title = (
  <div>
     <span className="fa fa-list-alt fa-fw"></span>
     <span>Header</span>
  </div>
);

<Panel header={title}>Content</Panel>

希望对您有所帮助。

React-Bootstrap / Panel / Font Awesome - 我如何在面板的 header 中有一个很棒的字体图标

React-Bootstrap / Panel / Font Awesome - How do I have a font awesome icon in the header of a panel

font-awesome

react-bootstrap