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.
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
- Date modified: