问题描述:

Here is my dropdownbutton:

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

How to add glyphicon to the main dropdown button?

Adding a span somewhere inside just doesn't work like for core button:

<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">

<span class="glyphicon glyphicon-floppy-disk"></span>

</xp:button>

网友答案:

Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:

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

UPDATE

I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:

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

You may have to play with the CSS a little but hopefully, this can help.

相关阅读:
Top