Icons - Grid System

Table of contents

Overview

The Fugue icon set was created by Yusuke Kamiyamane. Fugue has over 3,400 icons, however only commonly used icons have been incorporated into WET.

An icon is attached to an empty span:

<span class="wb-icon-alarm"></span>

Since the icons are CSS background images, they cannot have an alt attribute. Therefore, the icon must be accompanied by actual text to ensure that there is no loss of information for the visually impaired user. For example:

<p><span class="wb-icon-calendar"></span><a href="#">View the events calendar</a></p>

Icon options

Removing icons

Icons on certain types of links appear by default. To remove this icon, apply the wb-icon-none CSS to the link and apply the button CSS and it will remove the icon automatically.

Icons on links
Default Remove icon Remove icon and add button Keep icon with button
Download link Download link Download link Download link
mailto: link mailto: link mailto: link mailto: link
rel="external" link rel="external" link rel="external" link rel="external" link
external download link external download link external download link external download link
external mailto: link external mailto: link external mailto: link external mailto: link

Adding icons

Add an icon to any type of content

  • wb-icon-alarm
  • wb-icon-bank
  • wb-icon-book
  • wb-icon-book-address
  • wb-icon-book-alt
  • wb-icon-book-open
  • wb-icon-box
  • wb-icon-briefcase
  • wb-icon-bulb
  • wb-icon-bulb-off
  • wb-icon-calculator
  • wb-icon-calculator-arrow
  • wb-icon-calculator-exclamation
  • wb-icon-calculator-minus
  • wb-icon-calculator-plus
  • wb-icon-calendar
  • wb-icon-calendar-day
  • wb-icon-calendar-list
  • wb-icon-calendar-month
  • wb-icon-car
  • wb-icon-chart
  • wb-icon-chart-down
  • wb-icon-chart-pie
  • wb-icon-chart-up
  • wb-icon-clip
  • wb-icon-clipboard
  • wb-icon-clipboard-exclamation
  • wb-icon-clock
  • wb-icon-comment
  • wb-icon-compass
  • wb-icon-cone
  • wb-icon-construction
  • wb-icon-currency
  • wb-icon-desktop
  • wb-icon-direction
  • wb-icon-disk
  • wb-icon-document
  • wb-icon-documents
  • wb-icon-document-zip
  • wb-icon-door
  • wb-icon-door-open
  • wb-icon-drive-arrow
  • wb-icon-drive-download
  • wb-icon-drive-network
  • wb-icon-drive-upload
  • wb-icon-envelope
  • wb-icon-envelope-arrow
  • wb-icon-envelope-share
  • wb-icon-eraser
  • wb-icon-exclamation
  • wb-icon-exclamation-alt
  • wb-icon-exclamation-alt2
  • wb-icon-external
  • wb-icon-fax
  • wb-icon-film
  • wb-icon-folder
  • wb-icon-folder-alt
  • wb-icon-folder-bookmark
  • wb-icon-folder-open
  • wb-icon-folder-search
  • wb-icon-gavel
  • wb-icon-gear
  • wb-icon-globe
  • wb-icon-home
  • wb-icon-hourglass
  • wb-icon-image
  • wb-icon-info
  • wb-icon-info-alt
  • wb-icon-key
  • wb-icon-light
  • wb-icon-light-exclamation
  • wb-icon-light-green
  • wb-icon-light-red
  • wb-icon-light-yellow
  • wb-icon-lock
  • wb-icon-lock-unlock
  • wb-icon-luggage
  • wb-icon-magnet
  • wb-icon-magnifier
  • wb-icon-mail
  • wb-icon-mail-open
  • wb-icon-marker
  • wb-icon-megaphone
  • wb-icon-microphone
  • wb-icon-monitor
  • wb-icon-nav
  • wb-icon-nav-alt
  • wb-icon-nav-090
  • wb-icon-nav-090-alt
  • wb-icon-nav-180
  • wb-icon-nav-180-alt
  • wb-icon-nav-270
  • wb-icon-nav-270-alt
  • wb-icon-newspaper
  • wb-icon-note
  • wb-icon-note-pencil
  • wb-icon-paper
  • wb-icon-paper-pencil
  • wb-icon-paper-share
  • wb-icon-pencil
  • wb-icon-picture
  • wb-icon-printer
  • wb-icon-prohibit
  • wb-icon-question
  • wb-icon-question-alt
  • wb-icon-report
  • wb-icon-report-pencil
  • wb-icon-reports
  • wb-icon-rss
  • wb-icon-safe
  • wb-icon-scale
  • wb-icon-server
  • wb-icon-server-network
  • wb-icon-service-bell
  • wb-icon-sitemap
  • wb-icon-star
  • wb-icon-star-empty
  • wb-icon-star-half
  • wb-icon-table
  • wb-icon-target
  • wb-icon-telephone
  • wb-icon-thermometer
  • wb-icon-thermometer-high
  • wb-icon-thermometer-low
  • wb-icon-tick
  • wb-icon-tick-alt
  • wb-icon-tick-alt2
  • wb-icon-tool
  • wb-icon-toolbox
  • wb-icon-tshirt
  • wb-icon-usb
  • wb-icon-usb-arrow
  • wb-icon-usb-logo
  • wb-icon-user
  • wb-icon-users
  • wb-icon-weather-cloud
  • wb-icon-weather-lightning
  • wb-icon-weather-rain
  • wb-icon-weather-snow
  • wb-icon-weather-sun
  • wb-icon-weather-sun-cloud
  • wb-icon-x
  • wb-icon-x-alt
  • wb-icon-x-alt2