Icons

Markup

The class .icon is used to display an icon. The theme JavaScript will replace the element with an icon class with the SVG that matches the data-icon attribute.

Note: The icons are dependent on the the ND Icon set (https://static.nd.edu/images/icons/base-v1.svg) being loaded inline in the document. This is handled by the site-specific JavaScript file.

Tuesday, 10 am
Events

<!-- Icon used next to text -->
<span class="icon" data-icon="clock-o"></span> Tuesday, 10 am

<!-- Icon used within button -->
<a href="#" class="btn">Events <span class="icon" data-icon="calendar"></span></a>

<!-- Icon used by itself -->
<span class="icon" data-icon="nd-monogram"></span>

Icon Set

Icon	Name (`data-icon`)
	`nd-monogram`
	`calendar`
	`calendar-add`
	`map-o`
	`map-pin`
	`search`
	`envelope-o`
	`home`
	`newspaper`
	`clock`
	`clock-o`
	`history`
	`lock`
	`external-link`
	`external-link-square`
	`heart`
	`plus`
	`minus`
	`check`
	`close`
	`user`
	`download`
	`linkedin`
	`twitter`
	`twitter-reply`
	`twitter-retweet`
	`twitter-like`
	`facebook`
	`google`
	`youtube`
	`vimeo`
	`instagram`
	`snapchat`
	`feed`
	`retweet`
	`chevron-left`
	`chevron-right`
	`chevron-up`
	`chevron-down`
	`angle-left`
	`angle-right`
	`angle-up`
	`angle-down`
	`file-code-o`
	`file-movie-o`
	`file-audio-o`
	`file-archive-o`
	`file-image-o`
	`file-powerpoint-o`
	`file-excel-o`
	`file-word-o`
	`file-pdf-o`

Color & Size

The icon size is dependent on the font-size of the element. The color is dependent on the value of the fill property of the element.

<style>
   /* Custom CSS to change the `fill` and `font-size` properties of the element */
  .custom-icon { font-size:3em; fill:var(--brand-gold); }
</style>

<span class="icon custom-icon" data-icon="map-pin"></span>