Icons

Icons, like any picture, grab the eye: use them where it counts.

While you can embellish nearly anything with an icon, you want to use them thoughtfully. Without context, an icon is easily misunderstood, so they tend to work best when paired with a text label.

Since an icon draws the eye, they’re well-suited to calls to action or other important, actionable information.

Buttons

Using icons on buttons can also suggest the sort of content a visitor can expect to find after they click. For example, a play button usually signals a video or podcast, a circled “i” signals more information, and a clipboard/pencil indicates some sort of form. Consider:

Contact information

One of the most commonly accessed pieces of information on our website is contact information. Visitors are often looking for an email address or phone number to ask a specific question. Icons can help a visitor quickly identify ways to get in touch.

In the case of a contact area, icons are added to paragraphs (or other elements) by applying specific classes to the block. To add classes, select the block, and in the sidebar, navigate to Block → Advanced → Additional CSS Classes. Enter icon map. You can substitute map for other common contact related classes:

• tel
• fax
• map
• email