Icont 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"></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 College & Seminary was founded in 1894 in Toronto, Ontario. Legislated by the Government of Ontario, Tyndale University College 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 College &amp; Seminary 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
    f09d
  • ic-tyndale-dot-sem
    f09e
  • ic-tyndale-dot-uc
    f09f
  • ic-tyndale-dot-tu
    f0a7
  • ic-tyndale-crest
    f0a0
  • ic-tyndale-crest-blank
    f0a6
  • ic-tyndale-lamp-tyndale
    f0a1
  • ic-tyndale-lamp
    f0a2
  • ic-tyndale-t
    f0a3
  • ic-tyndale-tyndale
    f0a4

Line icon set (displayed at 4x)

  • ic-line-graduation
    f07a
  • ic-line-megaphone
    f07b
  • ic-line-lightbulb
    f07c
  • ic-line-pen
    f07d
  • ic-line-eye
    f07e
  • ic-line-news
    f07f
  • ic-line-coffee
    f080
  • ic-line-calendar
    f081
  • ic-line-heart
    f082
  • ic-line-star
    f083
  • ic-line-chat
    f084
  • ic-line-email
    f085
  • ic-line-note
    f086
  • ic-line-world
    f087
  • ic-line-tag
    f088
  • ic-line-lab
    f089
  • ic-line-t-shirt
    f08a
  • ic-line-like
    f08b

General icon set (displayed at 4x)

  • ic-twitter-square
    f000
  • ic-facebook-square
    f001
  • ic-youtube-square
    f002
  • ic-youtube-play
    f003
  • ic-instagram
    f004
  • ic-vimeo-square
    f005
  • ic-snapchat-ghost
    f006
  • ic-snapchat-square
    f007
  • ic-spotify
    f008
  • ic-skype
    f009
  • ic-linkedin
    f00b
  • ic-twitter
    f00c
  • ic-facebook
    f00d
  • ic-linkedin-square
    f00e
  • ic-google-plus-square
    f00f
  • ic-google-plus
    f010
  • ic-square
    f011
  • ic-circle
    f012
  • ic-chat
    f013
  • ic-check-circle
    f014
  • ic-check-box
    f015
  • ic-email
    f016
  • ic-pencil
    f018
  • ic-cancel
    f019
  • ic-plus-circle
    f01c
  • ic-person-id
    f01d
  • ic-bookmark
    f01e
  • ic-bookmarked
    f021
  • ic-pages
    f022
  • ic-desktop
    f023
  • ic-file-text-solid
    f024
  • ic-bus
    f025
  • ic-clipboard
    f026
  • ic-compass
    f028
  • ic-heart
    f029
  • ic-discuss
    f02a
  • ic-headphones
    f02b
  • ic-bed
    f02c
  • ic-lock
    f02f
  • ic-label
    f030
  • ic-laptop
    f031
  • ic-coffee
    f033
  • ic-tag
    f034
  • ic-pizza
    f036
  • ic-ticket
    f038
  • ic-loop
    f03a
  • ic-map
    f03c
  • ic-mic
    f03d
  • ic-bell
    f03e
  • ic-phone
    f03f
  • ic-mobile
    f040
  • ic-place
    f041
  • ic-play-circle
    f042
  • ic-globe
    f043
  • ic-graduation
    f045
  • ic-clock
    f046
  • ic-eye
    f047
  • ic-star
    f048
  • ic-stars
    f049
  • ic-car
    f04a
  • ic-watch
    f04b
  • ic-warning
    f04c
  • ic-work
    f04d
  • ic-trending-up
    f04e
  • ic-today
    f04f
  • ic-people
    f050
  • ic-person
    f051
  • ic-camera
    f052
  • ic-navigation
    f053
  • ic-open-in-new
    f054
  • ic-help
    f055
  • ic-forward
    f056
  • ic-arrow-down
    f057
  • ic-arrow-left
    f058
  • ic-arrow-right
    f059
  • ic-arrow-up
    f05a
  • ic-grid
    f05b
  • ic-bank
    f05c
  • ic-person-circle
    f05d
  • ic-rocket
    f05f
  • ic-menu
    f060
  • ic-search
    f061
  • ic-book
    f062
  • ic-book-open
    f063
  • ic-box
    f064
  • ic-calendar
    f065
  • ic-certificate
    f066
  • ic-bar-chart
    f067
  • ic-link
    f068
  • ic-square-open
    f069
  • ic-paperclip
    f06a
  • ic-file-text
    f06b
  • ic-home
    f06c
  • ic-info
    f06d
  • ic-list
    f06e
  • ic-map-signs
    f06f
  • ic-paper-plane
    f070
  • ic-flag
    f072
  • ic-photo
    f073
  • ic-rss
    f074
  • ic-thumb-up
    f076
  • ic-thumb-down
    f077
  • ic-address-card
    f079
  • ic-block
    f08c
  • ic-pie-chart
    f08d
  • ic-settings
    f08e
  • ic-credit-card
    f08f
  • ic-file-pdf
    f090
  • ic-arrow-drop-up
    f091
  • ic-arrow-drop-down
    f092
  • ic-folder
    f093
  • ic-th-large
    f094
  • ic-leaf
    f095
  • ic-minus-circle
    f096
  • ic-newspaper
    f097
  • ic-alert
    f098
  • ic-quote
    f099
  • ic-stop
    f09a
  • ic-tablet
    f09b
  • ic-circle-dash
    f09c
  • ic-circle-outline
    f0a5