• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Icons

    Icon SVG Fonts

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


    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

    Previous (Creating a sandbox)Next (How to create banners)