Using Icons


The CMU Website provides Content Editors with the opportunity to use icons on their website in place of images. The advantage to using icons is that they are smaller in size than images and download much quicker for visitors to your site. In addition, because the icons are part of a font package that is installed in the CMU Website, their color and size can be easily changed with CSS. Please see below for examples.

Modification classes

Modification classes will modify how the icon looks. Applying the following modification classes listed below will change the size of the icon.

icon-large
Example usage:
<i class="icon-cmich-notebook icon-large"></li>
icon-medium
Example usage:
<i class="icon-cmich-notebook icon-medium"></li>
icon-small
(Note, this is the default size for each icon, even if 'icon-small' is not included as a modifier class.)
Example usage :
<i class="icon-cmich-notebook icon-small"></li>

Changing colors

Because the icons are part of a font package, it is very easy to change their color using CSS.

Changing color using an in-line style
Example usage:
<i class="icon-cmich-notebook" style="color:#6a0032;"></li>

Available Icons

To use any of the icons listed, simply copy the HTML code and paste it into the source of one of your web pages. To modify their size, use one of the modifier classes listed above.

HTML
ICON
<i class="icon-cmich-notebook"></li>
<i class="icon-cmich-envelop2"></li>
<i class="icon-cmich-eventscalendar"></li>
<i class="icon-cmich-bubble12"></li>
<i class="icon-cmich-bubble13"></li>
<i class="icon-cmich-bubble-dots4"></li>
<i class="icon-cmich-bubbles10"></li>
<i class="icon-cmich-bubbles9"></li>
<i class="icon-cmich-user2"></li>
<i class="icon-cmich-users2"></li>
<i class="icon-cmich-vcard"></li>
<i class="icon-cmich-search2"></li>
<i class="icon-cmich-zoom-in"></li>
<i class="icon-cmich-zoom-out"></li>
<i class="icon-cmich-accessibility2"></li>
<i class="icon-cmich-clipboard2"></li>
<i class="icon-cmich-list2"></li>
<i class="icon-cmich-numbered-list"></li>
<i class="icon-cmich-download7"></li>
<i class="icon-cmich-upload7"></li>
<i class="icon-cmich-home2"></li>
<i class="icon-cmich-tree4"></li>
<i class="icon-cmich-arrow-up-left4"></li>
<i class="icon-cmich-arrow-up6"></li>
<i class="icon-cmich-arrow-up-right4"></li>
<i class="icon-cmich-arrow-up-right7"></li>
<i class="icon-cmich-arrow-down-right4"></li>
<i class="icon-cmich-arrow-down6"></li>
<i class="icon-cmich-arrow-down-left4"></li>
<i class="icon-cmich-arrow-left6"></li>
<i class="icon-cmich-arrow-up-left"></li>
<i class="icon-cmich-arrow-up"></li>
<i class="icon-cmich-arrow-up-right"></li>
<i class="icon-cmich-arrow-right"></li>
<i class="icon-cmich-arrow-down-right"></li>
<i class="icon-cmich-arrow-down"></li>
<i class="icon-cmich-arrow-down--left"></li>
<i class="icon-cmich-arrow-left"></li>
<i class="icon-cmich-arrow-up12"></li>
<i class="icon-cmich-arrow-right14"></li>
<i class="icon-cmich-arrow-down12"></li>
<i class="icon-cmich-arrow-left13"></li>
<i class="icon-cmich-home2"></li>
<i class="icon-cmich-google"></li>
<i class="icon-cmich-facebook"></li>
<i class="icon-cmich-instagram"></li>
<i class="icon-cmich-twitter"></li>
<i class="icon-cmich-feed2"></li>
<i class="icon-cmich-flickr2"></li>
<i class="icon-cmich-apple"></li>
<i class="icon-cmich-finder"></li>
<i class="icon-cmich-android"></li>
<i class="icon-cmich-windows8"></li>
<i class="icon-cmich-skype"></li>
<i class="icon-cmich-linkedin"></li>
<i class="icon-cmich-pinterest"></li>
<i class="icon-cmich-file-pdf"></li>
<i class="icon-cmich-file-word"></li>
<i class="icon-cmich-file-excel"></li>
<i class="icon-cmich-chrome"></li>
<i class="icon-cmich-firefox"></li>
<i class="icon-cmich-IE"></li>
<i class="icon-cmich-safari"></li>
<i class="icon-cmich-notification-empty"></li>
<i class="icon-cmich-question"></li>
<i class="icon-cmich-play4"></li>
<i class="icon-cmich-pause2"></li>
<i class="icon-cmich-stop2"></li>
<i class="icon-cmich-backward2"></li>
<i class="icon-cmich-forward3"></li>
<i class="icon-cmich-last"></li>
<i class="icon-cmich-previous"></li>
<i class="icon-cmich-next"></li>
<i class="icon-cmich-eject"></li>
<i class="icon-cmich-volume-high"></li>
<i class="icon-cmich-volume-medium"></li>
<i class="icon-cmich-volume-low"></li>
<i class="icon-cmich-volume-mute"></li>
<i class="icon-cmich-volume-increase"></li>
<i class="icon-cmich-volume-decrease"></li>


Central Michigan University • 1200 S. Franklin St. • Mount Pleasant, Mich. 48859 • 989-774-4000