間眅埶AV

Using Icons

Icons can be used to enhance your message, indicate calls to action, or serve as a stand-in for text where brevity is required. 

Font icons are typically used on contact pages or staff directories. Below are some examples for sites using the Horizontal template.

For Horizontal Template websites

To add them to your page, use the class "icon" and include the additional corresponding class for each icon.

  • <span class="icon icon-comment"></span> or <i class="icon icon-comment"></i> will produce 
  • <span class="icon icon-building"></span> or <i class"icon icon-building"></i> will produce 
  • <span class="icon icon-envelope"></span> or <i class"icon icon-envelope"></i> will produce 
  • <span class="icon icon-globe"></span> or <i class"icon icon-globe"></i> will produce 
  • <span class="icon icon-map-marker"></span> or <i class"icon icon-map-marker"></i> will produce 
  • <span class="icon icon-phone"></span> or <i class="icon icon-phone"></i> will produce 
  • <span class="icon icon-print"></span> or <i class="icon icon-print"></i> will produce 

For a complete list of icons please refer to and note the corresponding code for each icon. Pro icons will not work in AEM.

Creating links

To create a link, use either of the above two methods within an <a></a> tag

  • <a href="http://www.facebook.com" class="icon">F</a> or <a href="http://www.facebook.com" class="icon icon-facebook"></a> will produce a clickable
  • <a href="http://www.google.com" class="icon">G</a> or <a href="http://www.google.com" class="icon icon-google-plus"></a> will produce a clickable