React-Bootstrap / Panel /真棒字体-如何在面板标题中有一个真棒字体图标

Question

For a panel, I wanted to have a font awesome icon in the header with some title. How do I do that?

Want to use:

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

But I need something like this:

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

Answer 1

As i recall you can add an Element in the header attribute

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

or

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

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

hope this helps.