如何将 glyphicon 添加到 xPage 引导下拉按钮？

Question

这是我的下拉按钮：

<xp_1:dropDownButton id="dropDownButton1">
    <xp_1:this.treeNodes>
        <xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
            <xp_1:this.children>
                <xp_1:basicLeafNode label="Edit">
                </xp_1:basicLeafNode>
                <xp_1:basicLeafNode label="New">
                </xp_1:basicLeafNode>
                <xp_1:basicLeafNode label="Home">
                </xp_1:basicLeafNode>
            </xp_1:this.children>
        </xp_1:basicContainerNode>
    </xp_1:this.treeNodes>
</xp_1:dropDownButton>

如何将字形添加到主下拉按钮？ 在内部某处添加跨度并不像核心按钮那样工作：

<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
      <span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>

Answer 1

在按钮中添加代码后，即事件处理程序，您可以在其中添加图标。这是我的一个按钮，其中包含一个 Font Awesome 图标，但 Glyphicons 的工作方式相同。创建按钮和操作后，进入源代码并添加图标，如下所示：

<xp:button
    value="Submit"
    id="btnSave"
    styleClass="btn btn-primary"
>
    <i
        class="fa fa-check"
        aria-hidden="true"
    ></i>
    &#160;<xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="complete"
    >
        <xp:this.action>
            <xp:actionGroup>
                <xp:saveDocument
                    var="currentDocument"
                ></xp:saveDocument>
                <xp:openPage
                    name="#{sessionScope.lastPageName}"
                ></xp:openPage>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

更新

我做了一些测试，虽然您无法按照我们都希望的方式添加图标，但您可以使用 CSS。我使用了一个带有一个下拉按钮的页面，并添加了 CSS :before 以在按钮内添加图标：

button::before {
  font-family: "Glyphicons Halflings";
  content: "\e172";
}

您可能需要稍微使用一下 CSS，但希望这会有所帮助。