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 Font Awesome 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 F
- <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