There are a number of standard icons available in the DAM in the Common Assets > Icons folder; however, many of these icons were created to be used at a static pixel dimension — e.g., 12 x 12px. In a fluid, responsive design, these icons may not scale well, and may become pixelated on large desktops or retina devices.

A suite of font icons is available in AEM. The scalable, vector-based icons can be placed on the page using the Text component. They can be rendered at any size without loss of quality.

All the available icons are listed below with their corresponding character. Note these characters are case-sensitive.

Adding icon fonts to your page

1. Add a text component to your page.
2. Click the Source Edit button.
3. Add the following HTML:
   <span class="icon">[corresponding character]</span>
4. Replace "[corresponding character]" with the appropriate character. In this example, we will create the Twitter icon using the "T" character. The new HTML would look as follows:
   <span class="icon">T</span>
   
5. Click OK.

The icon for Twitter ( T ) will appear on your page. Anytime you wish to change the icon, open the Text component again, enter Source Edit mode, and change the character.

To change the colour of the icons, add the following to your site-specific style sheet:

.icon {
    color: #a6192e;
}

The icons on your site will now be rendered in SFU red.