Bootsfaces

Question

正常的 Bootstrap 手风琴看起来像这样：

代码：

<b:accordion>
  <b:panel id="panel1" title="Item 1">Content 1</b:panel>
  <b:panel id="panel2" title="Item 2">Content 2</b:panel>
  <b:panel id="panel3" title="Item 3">Content 3</b:panel>
</b:accordion>

图片

如何将此处的箭头更改为字形？

此外，我正在尝试将副标题添加到标题中，如下所示：

在 html 中工作正常，因为我可以将它添加到 <div class="panel-heading">，但我不知道如何使用 bootsfaces 来管理它...

Answer 1

图标

请参阅我对您问题的第一部分的评论。该图标已经是 Glyph 图标：

.panel-heading a.panel-title-link:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

如果您想更改图标，您需要用更具体的规则覆盖 CSS 规则。例如：

body .panel-heading a.panel-title-link:after {
    content: "\e114"; // Change the icon here
}

在规则前加上 body 会使其更具体。

另请参阅：

Points in CSS specificity
How do I override default PrimeFaces CSS with custom styles?（虽然它针对 PrimeFaces，但同样的原则适用于此）。

Header

header在展示中展示：https://showcase.bootsfaces.net/layout/Accordion.jsf

但是，他们显示的 JSF 标记是 incorrect。它实际上是：

<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>

参见：https://github.com/TheCoder4eu/BootsFacesWeb/blob/master/src/main/webapp/layout/Accordion.xhtml

你可以在那里使用标题，但你运行进入问题它将被包装到锚属性中，这将导致无效 HTML。图标的位置也会出错。如果您想要一个合适的解决方案，请尝试 submitting a feature request，或者，如果可以，请创建它并提交拉取请求。

Bootsfaces - 手风琴：将箭头更改为字形并添加副标题

Bootsfaces - Accordion: Change arrows to glyphicons and add Subtitle

css

jsf

图标

Header