Buttons buttons, icons, dropdowns and more
Examples to use buttons with font awesome icons.
Examples to use buttons with glyphicon halflings icons.
Buttons with both text and icon.
Navigation icons.
Toolbar icon example
Star Rating Example
Dropdown buttons
Dropdown button with icons
Dropdown with checkboxes.
NOTE:
By adding hold-on-click class you can avoid closing the dropdown on click
Dropup menu options.
NOTE:
By adding bottom-up class you make dropup menu.
New Icons in 3.2.0
- icon-compass
- icon-eur
- icon-dollar (alias)
- icon-yen (alias)
- icon-won (alias)
- icon-file-text
- icon-sort-by-attributes-alt
- icon-thumbs-down
- icon-xing-sign
- icon-instagram
- icon-bitbucket-sign
- icon-long-arrow-up
- icon-windows
- icon-skype
- icon-male
- icon-archive
- icon-renren
- icon-collapse
- icon-euro (alias)
- icon-inr
- icon-cny
- icon-btc
- icon-sort-by-alphabet
- icon-sort-by-order
- icon-youtube-sign
- icon-youtube-play
- icon-flickr
- icon-tumblr
- icon-long-arrow-left
- icon-android
- icon-foursquare
- icon-gittip
- icon-bug
- icon-collapse-top
- icon-gbp
- icon-rupee (alias)
- icon-renminbi (alias)
- icon-bitcoin (alias)
- icon-sort-by-alphabet-alt
- icon-sort-by-order-alt
- icon-youtube
- icon-dropbox
- icon-adn
- icon-tumblr-sign
- icon-long-arrow-right
- icon-linux
- icon-trello
- icon-sun
- icon-vk
- icon-expand
- icon-usd
- icon-jpy
- icon-krw
- icon-file
- icon-sort-by-attributes
- icon-thumbs-up
- icon-xing
- icon-stackexchange
- icon-bitbucket
- icon-long-arrow-down
- icon-apple
- icon-dribble
- icon-female
- icon-moon
- icon-weibo
Web Application Icons
- icon-adjust
- icon-asterisk
- icon-ban-circle
- icon-bar-chart
- icon-barcode
- icon-beaker
- icon-bell
- icon-bolt
- icon-book
- icon-bookmark
- icon-bookmark-empty
- icon-briefcase
- icon-bullhorn
- icon-calendar
- icon-camera
- icon-camera-retro
- icon-certificate
- icon-check
- icon-check-empty
- icon-cloud
- icon-cog
- icon-cogs
- icon-comment
- icon-comment-alt
- icon-comments
- icon-comments-alt
- icon-credit-card
- icon-dashboard
- icon-download
- icon-download-alt
- icon-edit
- icon-envelope
- icon-envelope-alt
- icon-exclamation-sign
- icon-external-link
- icon-eye-close
- icon-eye-open
- icon-facetime-video
- icon-film
- icon-filter
- icon-fire
- icon-flag
- icon-folder-close
- icon-folder-open
- icon-gift
- icon-glass
- icon-globe
- icon-group
- icon-hdd
- icon-headphones
- icon-heart
- icon-heart-empty
- icon-home
- icon-inbox
- icon-info-sign
- icon-key
- icon-leaf
- icon-legal
- icon-lemon
- icon-lock
- icon-unlock
- icon-magic
- icon-magnet
- icon-map-marker
- icon-minus
- icon-minus-sign
- icon-money
- icon-move
- icon-music
- icon-off
- icon-ok
- icon-ok-circle
- icon-ok-sign
- icon-pencil
- icon-picture
- icon-plane
- icon-plus
- icon-plus-sign
- icon-print
- icon-pushpin
- icon-qrcode
- icon-question-sign
- icon-random
- icon-refresh
- icon-remove
- icon-remove-circle
- icon-remove-sign
- icon-reorder
- icon-resize-horizontal
- icon-resize-vertical
- icon-retweet
- icon-road
- icon-rss
- icon-screenshot
- icon-search
- icon-share
- icon-share-alt
- icon-shopping-cart
- icon-signal
- icon-signin
- icon-signout
- icon-sitemap
- icon-sort
- icon-sort-down
- icon-sort-up
- icon-star
- icon-star-empty
- icon-star-half
- icon-tag
- icon-tags
- icon-tasks
- icon-thumbs-down
- icon-thumbs-up
- icon-time
- icon-tint
- icon-trash
- icon-trophy
- icon-truck
- icon-umbrella
- icon-upload
- icon-upload-alt
- icon-user
- icon-user-md
- icon-volume-off
- icon-volume-down
- icon-volume-up
- icon-warning-sign
- icon-wrench
- icon-zoom-in
- icon-zoom-out
Currency Icons
- icon-bitcoin (alias)
- icon-eur
- icon-jpy
- icon-usd
- icon-btc
- icon-euro (alias)
- icon-won (alias)
- icon-cny
- icon-gbp
- icon-renminbi (alias)
- (alias)
- icon-dollar
- icon-inr
- icon-rupee (alias)
Text Editor Icons
- icon-file
- icon-cut
- icon-copy
- icon-paste
- icon-save
- icon-undo
- icon-repeat
- icon-paper-clip
- icon-text-height
- icon-text-width
- icon-align-left
- icon-align-center
- icon-align-right
- icon-align-justify
- icon-indent-left
- icon-indent-right
- icon-font
- icon-bold
- icon-italic
- icon-strikethrough
- icon-underline
- icon-link
- icon-columns
- icon-table
- icon-th-large
- icon-th
- icon-th-list
- icon-list
- icon-list-ol
- icon-list-ul
- icon-list-alt
Directional Icons
- icon-arrow-down
- icon-arrow-left
- icon-arrow-right
- icon-arrow-up
- icon-chevron-down
- icon-circle-arrow-down
- icon-circle-arrow-left
- icon-circle-arrow-right
- icon-circle-arrow-up
- icon-chevron-left
- icon-caret-down
- icon-caret-left
- icon-caret-right
- icon-caret-up
- icon-chevron-right
- icon-hand-down
- icon-hand-left
- icon-hand-right
- icon-hand-up
- icon-chevron-up
Video Player Icons
- icon-play-circle
- icon-play
- icon-pause
- icon-stop
- icon-step-backward
- icon-fast-backward
- icon-backward
- icon-forward
- icon-fast-forward
- icon-step-forward
- icon-eject
- icon-fullscreen
- icon-resize-full
- icon-resize-small
Brand Icons
- icon-adn
- icon-bitbucket-sign
- icon-dribble
- icon-flickr
- icon-github-sign
- icon-html5
- icon-linux
- icon-renren
- icon-tumblr
- icon-vk
- icon-xing-sign
- icon-android
- icon-bitcoin
- icon-dropbox
- icon-foursquare
- icon-gittip
- icon-instagram
- icon-maxcdn
- icon-skype
- icon-tumblr-sign
- icon-weibo
- icon-youtube
- icon-apple
- icon-facebook
- icon-github
- icon-google-plus
- icon-linkedin
- icon-pinterest
- icon-stackexchange
- icon-twitter
- icon-windows
- icon-youtube-play
- icon-bitbucket
- icon-css3
- icon-facebook-sign
- icon-github-alt
- icon-google-plus-sign
- icon-linkedin-sign
- icon-pinterest-sign
- icon-trello
- icon-twitter-sign
- icon-xing
- icon-youtube-sign
Medical Icons
- icon-ambulance
- icon-plus-sign-alt
- icon-h-sign
- icon-stethoscope
- icon-hospital
- icon-user-md
- icon-medkit
Image
glass
music
search
envelope
heart
star
star-empty
user
film
th-large
th
th-list
ok
remove
zoom-in
zoom-out
off
signal
cog
trash
home
file
time
road
download-alt
download
upload
inbox
play-circle
repeat
refresh
list-alt
lock
flag
headphones
volume-off
volume-down
volume-up
qrcode
barcode
tag
tags
book
bookmark
camera
font
bold
italic
text-height
text-width
align-left
align-center
align-right
align-justify
list
indent-left
indent-right
facetime-video
picture
pencil
map-marker
adjust
tint
edit
share
check
move
step-backward
fast-backward
backward
play
pause
stop
forward
fast-forward
step-forward
eject
chevron-left
chevron-right
plus-sign
minus-sign
remove-sign
ok-sign
question-sign
info-sign
screenshot
remove-circle
ok-circle
ban-circle
arrow-left
arrow-right
arrow-up
arrow-down
share-alt
resize-full
resize-small
plus
minus
asterisk
exclamation-sign
gift
leaf
fire
eye-open
eye-close
warning-sign
plane
calendar
random
comments
magnet
chevron-up
chevron-down
retweet
shopping-cart
folder-close
folder-open
resize-vertical
resize-horizontal
hdd
bullhorn
bell
certificate
thumbs-up
thumbs-down
hand-right
hand-left
hand-top
hand-down
circle-arrow-right
circle-arrow-left
circle-arrow-top
circle-arrow-down
globe
wrench
tasks
filter
briefcase
fullscreen
dashboard
paperclip
heart-empty
link
phone
pushpin
euro
usd
gbp
sort
sort-by-alphabet
sort-by-alphabet-alt
sort-by-order
sort-by-order-alt
sort-by-attributes
sort-by-attributes-alt
unchecked
expand
collapse
collapse-top
Image - white
glass
music
search
envelope
heart
star
star-empty
user
film
th-large
th
th-list
ok
remove
zoom-in
zoom-out
off
signal
cog
trash
home
file
time
road
download-alt
download
upload
inbox
play-circle
repeat
refresh
list-alt
lock
flag
headphones
volume-off
volume-down
volume-up
qrcode
barcode
tag
tags
book
bookmark
camera
font
bold
italic
text-height
text-width
align-left
align-center
align-right
align-justify
list
indent-left
indent-right
facetime-video
picture
pencil
map-marker
adjust
tint
edit
share
check
move
step-backward
fast-backward
backward
play
pause
stop
forward
fast-forward
step-forward
eject
chevron-left
chevron-right
plus-sign
minus-sign
remove-sign
ok-sign
question-sign
info-sign
screenshot
remove-circle
ok-circle
ban-circle
arrow-left
arrow-right
arrow-up
arrow-down
share-alt
resize-full
resize-small
plus
minus
asterisk
exclamation-sign
gift
leaf
fire
eye-open
eye-close
warning-sign
plane
calendar
random
comments
magnet
chevron-up
chevron-down
retweet
shopping-cart
folder-close
folder-open
resize-vertical
resize-horizontal
hdd
bullhorn
bell
certificate
thumbs-up
thumbs-down
hand-right
hand-left
hand-top
hand-down
circle-arrow-right
circle-arrow-left
circle-arrow-top
circle-arrow-down
globe
wrench
tasks
filter
briefcase
fullscreen
dashboard
paperclip
heart-empty
link
phone
pushpin
euro
usd
gbp
sort
sort-by-alphabet
sort-by-alphabet-alt
sort-by-order
sort-by-order-alt
sort-by-attributes
sort-by-attributes-alt
unchecked
expand
collapse
collapse-top