Drupal Template: 
UQ Base Template

Icon SVG Fonts

The current package has been compiled to incorporate specific Entypo glyphs and Font Awesome social icons. Demo sheet

  • We've picked a subset of the most usable icons from entypo, on the basis it has a clean, neutral, crisp style, aren't overly 'designed' and extended the set to include social icons.
  • Our methodology to date has been to go with what we need and take the best of two libraries where it fits and we have the ability to extend as required.
  • The reference sheet has been compiled via Fontello (fontello.com) and you can color as required: 
    <h6><i class="icon-phone">&nbsp;</i> Call us</h6>
      Call us
  • The only major caveat at the moment is ckeditor strips out empty tags so <i class='icon-*'> </i> will dissapear.
  • The icons have 'settled in' and are in production with a few sites. We've worked through various issues across platforms. Our main focus was standards compliant browsers and IE8+. For an example check out http://uq.edu.au/news (social icons) and the responsive menus.
  • If there are glyphs you think are missing and globally useful the set can be re-compiled and extended. 

PNG Icons

NOTE: .png icons are being phased out in favour of SVG font icons. Sites currently using .png icons should change them to SVG versions.

A core set of icons can be added to pages and code using the classes provided. To inset an icon, create an empty tag such as a <span> or <i> and apply the necessary classes.

Example: <span class="icon add"></span>

Icon sizes

You can change the icon size using these classes:
.large = 48x48px
.medium = 24x24px (also the default size)
.small = 12x12px

a .add.large a .add.medium a .add.small

Icon opacity

You can change the icon opacity using these classes:
.opacity-25 = 25% opacity
.opacity-50
.opacity-75 (also the default opacity)
.opacity-100 = completely opaque

a .add.opacity-25 a .add.opacity-50 a .add.opacity-75 a .add.opacity-100

White alternative icon

A white alternative of each icon can be used by adding the class: .white
This is useful when including icons inside buttons.

Available icons

a .add

a .remove

a .delete

a .edit

a .settings

a .arrow-back

a .arrow-forward

a .arrow-left

a .arrow-down

a .arrow-up

a .arrow-right

a .arrow-solid-left

a .arrow-solid-down

a .arrow-solid-up

a .arrow-solid-right

a .book

a .calendar

a .help

a .secure

a .insecure

a .link

a .map

a .marker

a .menu

a .mobile

a .phone

a .print

a .rss

a .save

a .star

a .star-selected

a .upload

a .warning

a .chat

a .people

a .creative-commons

a .home

a .info

a .mail

a .refresh

a .search

a .add.white

a .remove.white

a .delete.white

a .edit.white

a .settings.white

a .arrow-back.white

a .arrow-forward.white

a .arrow-left.white

a .arrow-down.white

a .arrow-up.white

a .arrow-right.white

a .arrow-solid-left.white

a .arrow-solid-down.white

a .arrow-solid-up.white

a .arrow-solid-right.white

a .book.white

a .calendar.white

a .help.white

a .secure.white

a .insecure.white

a .link.white

a .map.white

a .marker.white

a .menu.white

a .mobile.white

a .phone.white

a .print.white

a .rss.white

a .save.white

a .star.white

a .star-selected.white

a .upload.white

a .warning.white

a .chat.white

a .people.white

a .creative-commons.white

a .home.white

a .info.white

a .mail.white

a .refresh.white

a .search.white

Social Media icons

a .itunesu

a .blogger

a .delicious

a .digg

.facebook

a .flickr

a .foursquare

a .googleplus

a .instagram

a .linkedin

a .pinterest

a .tumblr

.twitter

a .skype

a .vimeo

a .youtube

a .itunesu.white

a .blogger.white

a .delicious.white

a .digg.white

.facebook.white

a .flickr.white

a .foursquare.white

a .googleplus.white

a .instagram.white

a .linkedin.white

a .pinterest.white

a .tumblr.white

.twitter.white

a .skype.white

a .vimeo.white

a .youtube.white

Icons inside buttons

add Add a new image

delete Delete selected

help Get help

arrow-back