How to get space between icon and label on button?

1
votes

I am working on one of my first xPages applications. I want to add a nice little icon (from the FamfamFam collection) to some of my buttons, e.g. "New","Save", "Cancel", etc. I add the GIF images as image resource, and specify the image for the buttons I want the icons on.

It all works, but the label (text) on the button is right next to the icon. I would like them to be spaced out some, perhaps 4-6 pixels. I would prefer not to have to add spaces to the label, I am sure there is a better way, probably using CSS somehow.

Anyone know a good way to do this?

OneUI v2.1 is set as the theme for the application and I am using Domino Designer 8.5.3 and Domino Server 8.5.3.

2
lotus-notesxpages

2 Answers

5
votes

You can use the following custom CSS to add some margin to the right of the icon:

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

To add a space I use an <xp:text themeId="Text.Blank"></xp:text>

Text.Blank is in my Theme resource with the following control block:

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