将awesomeFont图标添加到Xpage上的treeNodes

Question

我一直在尝试在XPage上使用Bootstrap和awesomeFont图标构建导航菜单和手风琴。我设法将这些图标添加到手风琴中，但我的所有菜单都在旁边而不是彼此之下，图标不会与文本保持在一起。

以下是代码：

<xe:accordion
    id="accordion1"
    styleClass="col-lg-3">
    <xe:this.treeNodes>
        <xe:basicContainerNode
            label="Menu 1"
            styleClass="fa fa-bell">
            <xe:this.children>
                <xe:basicLeafNode
                    label="1"></xe:basicLeafNode>
                <xe:basicLeafNode
                    label="2"
                    styleClass="fa fa-wifi">
                </xe:basicLeafNode>
                <xe:basicLeafNode
                    label="3"></xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
        <xe:basicContainerNode
            label="Menu 2"
            styleClass="fa fa-database ">
            <xe:this.children>
                <xe:basicLeafNode
                    label="1"></xe:basicLeafNode>
                <xe:basicLeafNode
                    label="2"></xe:basicLeafNode>
                <xe:basicLeafNode
                    label="3"></xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
        <xe:basicContainerNode
            label="Menu 3">
            <xe:this.children>
                <xe:basicLeafNode
                    label="1"></xe:basicLeafNode>
                <xe:basicLeafNode
                    label="2"></xe:basicLeafNode>
                <xe:basicLeafNode
                    label="3"></xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
        <xe:basicContainerNode
            label="Menu 4"
            styleClass="fa fa-lg fa-link">
        </xe:basicContainerNode>
    </xe:this.treeNodes>
</xe:accordion>

手风琴有很多问题：

1. 当我添加FA图标时，它会在与文本分开的div中呈现。
2. 下一个菜单项会在Container旁边呈现，而不是在它下面，虽然它不一致（菜单3在菜单2下）
3. basicLeafNode不呈现FA图标。 （看看菜单1的第二个孩子。它有styleClass =“fa fa-wifi”。）
4. 手风琴的宽度应为col-lg-3，但不一致。