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>

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

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

Answer 1

在按钮中添加代码（即eventHandler）后，您可以在其中添加图标。这是我有一个包含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：之前在按钮中添加图标：

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

您可能需要稍微玩一下CSS，但希望这可以提供帮助。

如何将glyphicon添加到xPage bootstrap dropdownbutton？

1 个答案: