Skip to main content

Icons

There are many icons built into the template. To add an icon to your page, simply add an element with a class of icon-xxxx, as shown below.

HTML
<span class="icon-checklist"></span>
Rendered HTML

Styling Examples:

You can pair icons with the panel, color, and button classes, or use them to feature your social networking presence by adding the class social to an unordered list.

HTML
<span class="icon-more-info orange"></span>
<span class="icon-more-info orange panel"></span>
Rendered HTML

HTML
<a href="" class="button expand blueridge">
    <span class="icon-grad-hat"></span>
    Expanded Button
</a>
<a href="" class="button bowman">
    <span class="icon-play"></span>
    Regular Button
</a>
Code Structure
<ul class="social">
    <li>
        <a href="">
            <span class="icon-facebook"></span>
            <span class="screen-reader-text">Your Department or Program Name on Faceboook</span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="icon-twitter"></span>
            <span class="screen-reader-text">Your Department or Program Name on Twitter</span>
        </a>
    </li>
</ul>

Available Icons


  • icon-youtube
  • icon-facebook
  • icon-facebook-like
  • icon-twitter
  • icon-flickr
  • icon-google-plus
  • icon-pinterest
  • icon-foursquare
  • icon-linkedin
  • icon-wordpress
  • icon-instagram
  • icon-rss
  • icon-canvas
  • icon-calendar
  • icon-time
  • icon-location
  • icon-gps
  • icon-compass
  • icon-map
  • icon-home
  • icon-home2
  • icon-checkmark
  • icon-refresh
  • icon-search
  • icon-grid
  • icon-menu
  • icon-loading
  • icon-lock
  • icon-alert
  • icon-more-info
  • icon-upload
  • icon-close
  • icon-close-light
  • icon-close-bold
  • icon-plus
  • icon-plus-light
  • icon-down
  • icon-down2
  • icon-up
  • icon-arrow-left
  • icon-arrow-left-fat
  • icon-arrow-right
  • icon-arrow-right-fat
  • icon-arrow-down
  • icon-scroll-down
  • icon-play
  • icon-play-thin
  • icon-play-circle
  • icon-pause
  • icon-stop
  • icon-writer
  • icon-category
  • icon-heart
  • icon-heart2
  • icon-comments
  • icon-tag
  • icon-handicap
  • icon-vending
  • icon-retail
  • icon-administrative
  • icon-dining
  • icon-dining2
  • icon-parking
  • icon-lab
  • icon-printer
  • icon-recreation
  • icon-visitor
  • icon-academic
  • icon-emergency
  • icon-emergency-square
  • icon-grad-hat
  • icon-pencil
  • icon-apply
  • icon-checklist
  • icon-camera
  • icon-camera-play
  • icon-gift
  • icon-apple
  • icon-pictures
  • icon-pie
  • icon-briefcase
  • icon-chart-growth
  • icon-tools
  • icon-feather
  • icon-newspaper
  • icon-atom
  • icon-earth
  • icon-book
  • icon-trophy
  • icon-steps
  • icon-history
  • icon-cog
  • icon-wrench
  • icon-hammer
  • icon-bus
  • icon-screen
  • icon-television
  • icon-ribbon-complete