Images and icons

Images exist as controls in their own right, and icons can be associated with many controls. Typically, images are used for branding, whereas icons are used to enhance the UX.

Images

To add an image, drag an Image control onto the page, and then click . If the image is there, select it, and then click . If not, click to upload it. The maximum upload size is 480x480 pixels and 150 DPI. Uploaded images become available for other Image controls.

To change an existing image, click , and then select or upload a new image as described above. This is how you change the branding on an App.

lets you select part of the image to be used.

Note

You can also drag images directly onto the page. This creates an Image control. This method does not limit you to 480x480 pixels, but the facility does not allow you to edit the image or select it for use elsewhere. Only uploaded images are shown in the Edit Image popup.

Icons

Designer supports font-awesome shortcuts for icons, for example, fa-user. If a control has an Icon property, you can type the shortcut (without the fa- prefix), or select the icon from the suggestions.

Tip - Icon only labels

Label controls have the Icon property, and as text in a label is optional, this means that you can add icons as Label objects instead of Image object.

If you want to change the color of icons, use CSS. For example, if you have a Label control called GoldUser that has its icon set to fa-user, adding the following CSS would make the icon gold:

#widget-designer #GoldUser .fa-user { color: #FFD700; }

See CSS in Apps for general information on the role of CSS in Apps.

Article last edited 19 August 2021