如何在按钮上获得图标和标签之间的间距？

Question

我正在开发我的第一个xPages应用程序之一。我想在我的一些按钮上添加一个漂亮的小图标(来自FamfamFam集合)，例如“新建”、“保存”、“取消”等。我添加GIF图像作为图像资源，并为我想要图标的按钮指定图像。

它都可以工作，但按钮上的标签(文本)就在图标旁边。我希望它们间隔一些，也许是4-6个像素。我不喜欢在标签上添加空格，我相信有更好的方法，可能是使用CSS。

有谁知道做这件事的好方法吗？

Domino v2.1被设置为应用程序的主题，我使用的是OneUI Designer 8.5.3和Domino Server 8.5.3。

Answer 1

您可以使用以下自定义CSS在图标的右侧添加一些边距：

.lotusBtn img {
  margin-right: 10px;
}

Answer 2

要添加空格，我使用<xp:text themeId="Text.Blank"></xp:text>

Text.Blank位于我的主题资源中，包含以下控制块：

<control override="true">
    <name>Text.Blank</name>
    <property mode="override">
        <name>escape</name>
        <value>#{false}</value>
    </property>
    <property mode="override">
        <name>value</name>
        <value>&amp;nbsp;</value>
    </property>
</control>