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

    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 also be found on Sapient’s ZeroHeight documentation site. It can also be found on Remix's website.

    Link to ZeroHeight
    Link to Remix

    Adding icons to a page/component

    1.  Authors may be prompted to add an optional icon to either the Page Properties (for a page) or the authoring dialog (for a component). The icon code should be added in the authoring field.

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

    Icon options on ZeroHeight

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

    d. The icon now appears in the component.

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

    Icon modal with name on Remix site

     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 shown in live state

    Quick Tips

    • All icon names follow the structure "ri-*icon name*-*fill or line*".
    • Want an icon that's not in the Remix library? Submit a request to Remix here, or ask Sapient to submit for you. Note that Remix does not accept all requests.