THEME COLOR

Buttons buttons, icons, dropdowns and more

Buttons

Red Stripe Purple stripe

Disabled Disabled Disabled Disabled

Mini size Default size Large size

Link

Icon Buttons

Examples to use buttons with font awesome icons.

Examples to use buttons with glyphicon halflings icons.

Buttons with both text and icon.

Delete Item Add Item Listen

Submit Entry pricing options

Navigation icons.

Toolbar icon example

Star Rating Example

Social Icons
Block Buttons

Link

Link(big)

Dropdowns

Dropdown buttons

Dropdown button with icons

Dropdown with checkboxes.

Options #1
Options #2

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
glass leaf dog user girl car user_add user_remove film magic envelope camera heart beach_umbrella train print bin music note heart_empty home snowflake fire magnet parents binoculars road search cars notes_2 pencil bus wifi_alt luggage old_man woman file coins airplane notes stats charts pie_chart group keys calendar router camera_small dislikes star link eye_open eye_close alarm clock stopwatch projector history truck cargo compass keynote paperclip power lightbulb tag tags cleaning ruller gift umbrella book bookmark wifi cup stroller headphones headset warning_sign signal retweet refresh roundabout random heat repeat display log_book adress_book building eyedropper adjust tint crop vector_path_square vector_path_circle vector_path_polygon vector_path_line vector_path_curve vector_path_all font italic bold text_underline text_strike text_height text_width text_resize left_indent right_indent align_left align_center align_right justify list text_smaller text_bigger embed embed_close table message_full message_empty message_in message_out message_plus message_minus message_ban message_flag message_lock message_new inbox inbox_plus inbox_minus inbox_lock inbox_in inbox_out cogwheel cogwheels picture adjust_alt database_lock database_plus database_minus database_ban folder_open folder_plus folder_minus folder_lock folder_flag folder_new edit new_window check unchecked more_windows show_big_thumbnails show_thumbnails show_thumbnails_with_lines show_lines playlist imac macbook ipad iphone iphone_transfer iphone_exchange ipod ipod_shuffle ear_plugs phone step_backward fast_backward rewind play pause stop forward fast_forward step_forward eject facetime_video download_alt mute volume_down volume_up screenshot move more brightness_reduce brightness_increase circle_plus circle_minus circle_remove circle_ok circle_question_mark circle_info circle_exclamation_mark remove ok ban download upload shopping_cart lock unlock electricity ok_2 remove_2 cart_out cart_in left_arrow right_arrow down_arrow up_arrow resize_small resize_full circle_arrow_left circle_arrow_right circle_arrow_top circle_arrow_down play_button unshare chevron-right chevron-left bluetooth euro usd gbp retweet_2 moon sun cloud direction brush pen zoom_in zoom_out pin albums rotation_lock flash google_maps anchor conversation chat male female asterisk divide snorkel_diving scuba_diving oxygen_bottle fins fishes boat delete sheriffs_star qrcode barcode pool buoy spade bank vcard electrical_plug flag credit_card keyboard-wireless keyboard-wired shield ring cake drink beer fast_food cutlery pizza birthday_cake tablet settings bullets cardio t-shirt pants sweater fabric leather scissors bomb skull celebration tea_kettle french_press coffe_cup pot grater kettle hospital hospital_h microphone webcam temple_christianity_church temple_islam temple_hindu temple_buddhist bicycle life_preserver comments flower baseball rugby ax table_tennis bowling tree_conifer tree_deciduous more_items sort filter gamepad playing_dices calculator tie wallet piano sampler podium soccer_ball blog dashboard certificate bell candle pushpin iphone_shake pin_flag turtle rabbit globe briefcase hdd thumbs_up thumbs_down hand_right hand_left hand_up hand_down fullscreen shopping_bag book_open nameplate nameplate_alt vases bullhorn dumbbell suitcase file_import file_export bug crown smoking cloud-upload cloud-download restart security_camera expand collapse collapse_top globe_af global spray nails claw_hammer classic_hammer hand_saw riflescope electrical_socket_eu electrical_socket_us pinterest dropbox google_plus jolicloud yahoo blogger picasa amazon tumblr wordpress instapaper evernote xing zootool dribbble deviantart read_it_later linked_in forrst pinboard behance github youtube skitch foursquare quora badoo spotify stumbleupon readability instagram posterous_spaces vimeo flickr last_fm rss skype e-mail

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

print

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

print

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

Fonts

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 print 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 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 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


Fonts - 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 print 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 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 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