Icons

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