Icon Font Reference

View Icon Reference

Icon fonts are being served through a service called Fort Awesome. These icons can be used in any content area using simple code.

Please note: you will need to add icons using HTML code — these are not available in the WYSIWYG editor. Please view the WebHelp documentation to learn how you can do this.

Text after icon...

<i class="ic ic-heart" aria-hidden="true"></i> Text after icon...

Making icons larger

If an icon is contained inside of a header, it will be sized in the same way as the font. You can increase icon sizes relative to their container by adding one of the following classes defined below:

ic-lg ic-2x ic-3x ic-4x ic-5x

  <i class="ic ic-search ic-lg"></i> ic-lg
  <i class="ic ic-search ic-2x"></i> ic-2x
  <i class="ic ic-search ic-3x"></i> ic-3x
  <i class="ic ic-search ic-4x"></i> ic-4x
  <i class="ic ic-search ic-5x"></i> ic-5x

Changing the colour of the icons (displayed at 2x)

The icon will automatically be the same colour as the text it is beside. You can change the colour of the icon by adding one of the following classes defined below:

  <i class="ic ic-star blue"></i>
  <i class="ic ic-star red"></i>
  <i class="ic ic-star gold"></i>
  <i class="ic ic-star green"></i>
  <i class="ic ic-star light"></i>
  <i class="ic ic-star dark"></i>

Icons in bulleted lists

You can use ic-ul and ic-li to easily replace default bullets in unordered lists.

  • List icons
  • can be used
  • as bullets
  • in lists
  <ul class="ic-ul">
    <li><i class="ic-li ic ic-check-circle"></i>List icons</li>
    <li><i class="ic-li ic ic-check-circle"></i>can be used</li>
    <li><i class="ic-li ic ic-cancel"></i>as bullets</li>
    <li><i class="ic-li ic ic-check-circle"></i>in lists</li>
  </ul>

Pulling icons left or right

You can pull icons to the left or right of the page and have the content float around the icon (similar to floating images). This is best used with icons displayed at larger sizes. You can use the pull-left or pull-right classes — examples below:

Tyndale University was founded in 1894 in Toronto, Ontario. Legislated by the Government of Ontario, Tyndale University is a Christian university with a growing number of undergraduate programs, offering a wide range of academic disciplines. Tyndale Seminary is Canada’s largest graduate school of theology, offering degrees at the master’s and doctoral levels. Tyndale’s community, representing 60 ethnic backgrounds and 40 different denominations, inspires students to think analytically, serve faithfully and live passionately.

  <p>
    <i class="ic ic-tyndale-crest ic-5x ic-blue pull-right"></i> Tyndale
    University was founded in 1894 in Toronto, Ontario.
    .... live passionately.
  </p>

Icon Reference (subject to change)

Tyndale specific icons (displayed at 4x)

  • ic-tyndale-dot-ol
    f07a
  • ic-tyndale-dot-sem
    f07b
  • ic-tyndale-dot-tu
    f079
  • ic-tyndale-crest
    f07c
  • ic-tyndale-crest-blank
    f078
  • ic-tyndale-lamp
    f07e
  • ic-tyndale-t
    f07f

General icon set (displayed at 4x)

  • ic-youtube-play
    f000
  • ic-facebook-square
    f001
  • ic-twitter
    f004
  • ic-instagram
    f005
  • ic-spotify
    f007
  • ic-lock
    f008
  • ic-circle
    f009
  • ic-square
    f00a
  • ic-bed
    f00b
  • ic-pencil
    f00c
  • ic-chat
    f00d
  • ic-check-box
    f00e
  • ic-check-circle
    f00f
  • ic-cancel
    f010
  • ic-email
    f011
  • ic-desktop
    f012
  • ic-bookmark
    f013
  • ic-plus-circle
    f014
  • ic-headphones
    f015
  • ic-compass
    f017
  • ic-pages
    f019
  • ic-book
    f01a
  • ic-heart
    f01b
  • ic-person-id
    f01e
  • ic-open-in-new
    f01f
  • ic-clipboard
    f020
  • ic-camera
    f024
  • ic-car
    f025
  • ic-eye
    f026
  • ic-globe
    f027
  • ic-ticket
    f028
  • ic-clock
    f029
  • ic-graduation
    f02a
  • ic-tag
    f02b
  • ic-coffee
    f02c
  • ic-phone
    f02d
  • ic-thumb-up
    f02e
  • ic-bell
    f02f
  • ic-map
    f031
  • ic-laptop
    f033
  • ic-star
    f034
  • ic-stars
    f035
  • ic-place
    f036
  • ic-mic
    f037
  • ic-work
    f038
  • ic-warning
    f039
  • ic-people
    f03b
  • ic-trending-up
    f03c
  • ic-navigation
    f03d
  • ic-person
    f03e
  • ic-today
    f03f
  • ic-help
    f040
  • ic-menu
    f041
  • ic-box
    f043
  • ic-search
    f044
  • ic-certificate
    f045
  • ic-calendar
    f046
  • ic-link
    f047
  • ic-info
    f048
  • ic-home
    f049
  • ic-list
    f04a
  • ic-photo
    f04b
  • ic-flag
    f04c
  • ic-map-signs
    f04e
  • ic-address-card
    f04f
  • ic-rss
    f052
  • ic-file-text-solid
    f053
  • ic-file-text
    f054
  • ic-tablet
    f055
  • ic-mobile
    f056
  • ic-square-open
    f057
  • ic-bar-chart
    f058
  • ic-book-opent
    f059
  • ic-person-circle
    f05a
  • ic-bank
    f05b
  • ic-grid
    f05c
  • ic-arrow-down
    f05d
  • ic-arrow-left
    f05e
  • ic-arrow-right
    f05f
  • ic-arrow-up
    f060
  • ic-play-circle
    f062
  • ic-block
    f065
  • ic-pie-chart
    f069
  • ic-paperclip
    f06a
  • ic-alert
    f06b
  • ic-minus-circle
    f06c
  • ic-leaf
    f06d
  • ic-folder
    f06f
  • ic-credit-card
    f071
  • ic-circle-outline
    f072
  • ic-circle-dash
    f073
  • ic-plus
    f074
  • ic-minus
    f075
  • ic-download
    f076
  • ic-quote
    f077
  • ic-angles-right
    f081
  • ic-angles-left
    f082
  • ic-discuss
    f083
  • ic-bus
    f085
  • ic-graduation-person
    f086
  • ic-newspaper
    f089
  • ic-life-ring
    f08a
  • ic-snow
    f08b
  • ic-transfer
    f08c
  • ic-file-pdf
    f08d
  • ic-file-word
    f08e
  • ic-file-excel
    f08f
  • ic-audio
    f090
  • ic-edit
    f091