Table of Contents

Previewing and selecting predefined icons with the icon class picker


Only available versions of this content are shown in the dropdown

A single skin can have multiple icon fonts, including the standard icon font set provided in py-icons. To preview and select the correct icon for a control, use the icon class picker on the Properties panel for the button, link, or icon. Using predefined icons brings greater consistency to your user interface and helps users to understand the control's purpose.

  1. Open the section that contains the control and then open the control's Properties panel.

  2. In the Image source list on the General tab, select Icon Class.

  3. Click the Open the icon class picker icon beside the Image source fields.

    An overlay displays all available icons.

  4. Optional:

    To filter icons by class name, use the search field on the overlay.

  5. Click an icon on the overlay to use it for the control.

  6. Optional:

    To adjust the element's styling without creating a new skin format, apply one or more CSS helper classes on the Presentation tab of the Properties panel.

    For example, you can use a helper class to center an element in a layout. For more information, see Adjusting cell styling with helper classes.

  7. Submit the updated properties and save the section.

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.