Icon
See my comment for the first part of your question. The icon already is a Glyph icon:
.panel-heading a.panel-title-link:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
If you want to change the icon, you need to override the CSS rule with a more specific one. For example:
body .panel-heading a.panel-title-link:after {
content: "\e114"; // Change the icon here
}
Prefixing the rule with body
will make it more specific.
See also:
Header
The header is demonstrated in the showcase: https://showcase.bootsfaces.net/layout/Accordion.jsf
However, the JSF markup they show is incorrect. It actually is:
<b:panel id="panel3">Content 3
<f:facet name="heading">
<h:outputText value="Panel heading with a facet in place of a title " />
<b:badge style="margin-left:10px" value="since version 0.4" />
</f:facet>
<f:facet name="footer">
Footer of panel 3
</f:facet>
<b:panel>
See: https://github.com/TheCoder4eu/BootsFacesWeb/blob/master/src/main/webapp/layout/Accordion.xhtml
You could use headings there, but you run into the issue it will be wrapped into an anchor attribute, which will result in invalid HTML. Also the position of the icon will be wrong. If you want a proper solution, try submitting a feature request, or, if you can, create it and submit a pull request.