Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Getting Started with AEM

    Using Icons user guide

    Icons use simple images to help communicate ideas. They add a visual element to a page or component, and are a symbol for residents to quickly understand the topic of a page or section of content.

     

    AEM uses icons from the Remix Icon library. The library can be found in the AEM Training Folder on SharePoint. Contact Sapient if you need access to the folder.

     

    The library can also be found on Sapient’s ZeroHeight documentation site here. It can also be found at remixicon.com.

    Link to ZeroHeight
    Link to Remix

    Adding icons to a page/component

    Authors will be prompted to add an optional icon to either the Page Properties (for a page) or the authoring dialog (for a component). When a prompt calls for an icon, follow the below steps.

    1.  On AEM, some components' authoring dialogs call for an optional icon. Ex. in the List component, the Manual List has an option to add a leading icon before each list entry.

    2. If using AEM Training Folder:

    a. In the AEM Training Folder, open the Remix Icon Library.ZIP file. Click Remix Icon Library, then the folder with the needed icon type.

    b.Copy the name of the icon that appears before “.svg”.

    c. Return to the authoring dialog on AEM. Paste the text in the icon field. Click Done.

    d.The icon now appears in the component.

    3. If using Zero Height link:

    a. Navigate to the Zero Height link. Hover over the desired icon.

    b.The icon’s name appears in black over the icon.

    d. Return to the authoring dialog on AEM. Type “ri-“ and then the icon’s name from 3.b. Click Done.

    e. The icon now appears in the component.

    4.  If using remixicon.com:

    a. Select the desired icon.

    b. An icon modal appears. Highlight the text after “< I class=” in between the quotation marks. Copy the text.

     c. Return to the authoring dialog on AEM. Paste the text in the icon field. Click Done.

    d. The icon now appears in the component.

    Icon options
    Icon modal with name
    Icon shown in live state