Buttons

Go to link

Buttons with icons

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

Buttons with loading indicator

Click the buttons to see the effect

Block level buttons
Dropdown

Dropdown buttons

Split button dropdowns

Dropdown button with icons

Dropdowns button groups

Dropdown with checkboxes.

NOTE:   By adding dropdown-enduring class you can avoid closing the dropdown on click

Dropup menu options.

NOTE:   By adding dropup class you make dropup menu.

Social Network Buttons
Responsive Icons Buttons

Clip-Font pictographic font

390 icons in pictographic font form. Add .clip-* class to <i> to display icon.

  • clip-settings
  • clip-camera
  • clip-tag
  • clip-bulb
  • clip-paperplane
  • clip-bubble
  • clip-banknote
  • clip-music
  • clip-data
  • clip-t-shirt
  • clip-clip
  • clip-calendar
  • clip-vynil
  • clip-truck
  • clip-note
  • clip-world
  • clip-key
  • clip-pencil
  • clip-pencil-2
  • clip-images
  • clip-images-2
  • clip-list
  • clip-earth
  • clip-pictures
  • clip-cog
  • clip-home
  • clip-home-2
  • clip-pencil-3
  • clip-images-3
  • clip-eyedropper
  • clip-droplet
  • clip-droplet-2
  • clip-image
  • clip-music-2
  • clip-camera-2
  • clip-camera-3
  • clip-headphones
  • clip-headphones-2
  • clip-gamepad
  • clip-podcast
  • clip-connection
  • clip-connection-2
  • clip-new
  • clip-book
  • clip-file
  • clip-file-2
  • clip-file-plus
  • clip-file-minus
  • clip-file-check
  • clip-file-remove
  • clip-file-3
  • clip-copy
  • clip-copy-2
  • clip-copy-3
  • clip-copy-4
  • clip-paste
  • clip-stack
  • clip-stack-2
  • clip-folder
  • clip-folder-upload
  • clip-folder-download
  • clip-folder-remove
  • clip-folder-plus
  • clip-folder-2
  • clip-folder-open
  • clip-cc
  • clip-tag-2
  • clip-barcode
  • clip-cart
  • clip-phone-hang-up
  • clip-phone
  • clip-phone-2
  • clip-location
  • clip-compass
  • clip-map
  • clip-alarm
  • clip-clock
  • clip-history
  • clip-stopwatch
  • clip-keyboard
  • clip-screen
  • clip-laptop
  • clip-mobile
  • clip-mobile-2
  • clip-tablet
  • clip-mobile-3
  • clip-rotate
  • clip-rotate-2
  • clip-redo
  • clip-undo
  • clip-database
  • clip-bubble-2
  • clip-bubbles
  • clip-bubble-3
  • clip-bubble-4
  • clip-bubble-dots
  • clip-bubble-dots-2
  • clip-bubbles-2
  • clip-bubbles-3
  • clip-user
  • clip-users
  • clip-user-plus
  • clip-user-minus
  • clip-user-cancel
  • clip-user-block
  • clip-user-2
  • clip-user-3
  • clip-users-2
  • clip-user-4
  • clip-user-5
  • clip-hanger
  • clip-quotes-left
  • clip-quotes-right
  • clip-busy
  • clip-spinner
  • clip-spinner-2
  • clip-spinner-3
  • clip-spinner-4
  • clip-spinner-5
  • clip-spinner-6
  • clip-microscope
  • clip-search
  • clip-zoom-in
  • clip-zoom-out
  • clip-search-2
  • clip-key-2
  • clip-key-3
  • clip-keyhole
  • clip-wrench
  • clip-wrench-2
  • clip-cog-2
  • clip-cogs
  • clip-health
  • clip-stats
  • clip-inject
  • clip-bars
  • clip-rating
  • clip-rating-2
  • clip-rating-3
  • clip-leaf
  • clip-balance
  • clip-atom
  • clip-atom-2
  • clip-lamp
  • clip-remove
  • clip-puzzle
  • clip-puzzle-2
  • clip-cube
  • clip-cube-2
  • clip-pyramid
  • clip-puzzle-3
  • clip-puzzle-4
  • clip-clipboard
  • clip-switch
  • clip-list-2
  • clip-list-3
  • clip-list-4
  • clip-list-5
  • clip-list-6
  • clip-grid
  • clip-grid-2
  • clip-grid-3
  • clip-grid-4
  • clip-grid-5
  • clip-grid-6
  • clip-menu
  • clip-menu-2
  • clip-circle-small
  • clip-tree
  • clip-menu-3
  • clip-menu-4
  • clip-cloud
  • clip-download
  • clip-upload
  • clip-download-2
  • clip-upload-2
  • clip-globe
  • clip-upload-3
  • clip-download-3
  • clip-earth-2
  • clip-network
  • clip-link
  • clip-link-2
  • clip-link-3
  • clip-link-4
  • clip-attachment
  • clip-attachment-2
  • clip-eye
  • clip-eye-2
  • clip-windy
  • clip-bookmark
  • clip-bookmark-2
  • clip-brightness-high
  • clip-brightness-medium
  • clip-star
  • clip-star-2
  • clip-star-3
  • clip-star-4
  • clip-star-5
  • clip-star-6
  • clip-heart
  • clip-thumbs-up
  • clip-thumbs-up-2
  • clip-cursor
  • clip-stack-empty
  • clip-question
  • clip-notification
  • clip-notification-2
  • clip-question-2
  • clip-plus-circle
  • clip-plus-circle-2
  • clip-minus-circle
  • clip-minus-circle-2
  • clip-info
  • clip-info-2
  • clip-cancel-circle
  • clip-cancel-circle-2
  • clip-checkmark-circle
  • clip-checkmark-circle-2
  • clip-close
  • clip-close-2
  • clip-close-3
  • clip-checkmark
  • clip-checkmark-2
  • clip-close-4
  • clip-wave
  • clip-wave-2
  • clip-arrow-up-left
  • clip-arrow-up
  • clip-arrow-up-right
  • clip-arrow-right
  • clip-arrow-down-right
  • clip-arrow-down
  • clip-arrow-down-left
  • clip-arrow-left
  • clip-arrow-up-left-2
  • clip-arrow-up-2
  • clip-arrow-up-right-2
  • clip-arrow-right-2
  • clip-arrow-down-right-2
  • clip-arrow-down-2
  • clip-arrow-down-left-2
  • clip-arrow-left-2
  • clip-arrow
  • clip-arrow-2
  • clip-arrow-3
  • clip-arrow-4
  • clip-arrow-up-3
  • clip-arrow-right-3
  • clip-arrow-down-3
  • clip-arrow-left-3
  • clip-checkbox-unchecked
  • clip-checkbox
  • clip-checkbox-checked
  • clip-checkbox-unchecked-2
  • clip-square
  • clip-checkbox-partial
  • clip-checkbox-partial-2
  • clip-checkbox-checked-2
  • clip-checkbox-unchecked-3
  • clip-radio-checked
  • clip-radio-unchecked
  • clip-circle
  • clip-circle-2
  • clip-new-tab
  • clip-popout
  • clip-embed
  • clip-code
  • clip-seven-segment-0
  • clip-seven-segment-1
  • clip-seven-segment-2
  • clip-seven-segment-3
  • clip-seven-segment-4
  • clip-seven-segment-5
  • clip-seven-segment-6
  • clip-seven-segment-7
  • clip-seven-segment-8
  • clip-seven-segment-9
  • clip-share
  • clip-google
  • clip-google-plus
  • clip-facebook
  • clip-twitter
  • clip-feed
  • clip-youtube
  • clip-youtube-2
  • clip-vimeo
  • clip-flickr
  • clip-picassa
  • clip-dribbble
  • clip-forrst
  • clip-deviantart
  • clip-steam
  • clip-github
  • clip-github-2
  • clip-wordpress
  • clip-blogger
  • clip-tumblr
  • clip-yahoo
  • clip-tux
  • clip-apple
  • clip-finder
  • clip-android
  • clip-windows
  • clip-windows8
  • clip-soundcloud
  • clip-skype
  • clip-reddit
  • clip-linkedin
  • clip-lastfm
  • clip-stumbleupon
  • clip-stackoverflow
  • clip-pinterest
  • clip-xing
  • clip-foursquare
  • clip-paypal
  • clip-paypal-2
  • clip-libreoffice
  • clip-file-pdf
  • clip-file-openoffice
  • clip-file-word
  • clip-file-excel
  • clip-file-zip
  • clip-file-powerpoint
  • clip-file-xml
  • clip-file-css
  • clip-html5
  • clip-css3
  • clip-chrome
  • clip-firefox
  • clip-IE
  • clip-opera
  • clip-safari
  • clip-IcoMoon
  • clip-fullscreen-exit-alt
  • clip-fullscreen
  • clip-fullscreen-alt
  • clip-fullscreen-exit
  • clip-transfer
  • clip-left-quote
  • clip-right-quote
  • clip-heart-2
  • clip-study
  • clip-wand
  • clip-zoom-in-2
  • clip-zoom-out-2
  • clip-search-3
  • clip-user-6
  • clip-users-3
  • clip-archive
  • clip-keyboard-2
  • clip-paperclip
  • clip-home-3
  • clip-chevron-up
  • clip-chevron-right
  • clip-chevron-left
  • clip-chevron-down
  • clip-error
  • clip-add
  • clip-minus
  • clip-alert
  • clip-pictures-2
  • clip-atom-3
  • clip-eyedropper-2
  • clip-warning
  • clip-expand
  • clip-clock-2
  • clip-target
  • clip-loop
  • clip-refresh
  • clip-spin-alt
  • clip-exit
  • clip-enter
  • clip-locked
  • clip-unlocked
  • clip-arrow-5
  • clip-music-3
  • clip-droplet-3
  • clip-credit
  • clip-phone-3
  • clip-phone-4
  • clip-map-2
  • clip-clock-3
  • clip-calendar-2
  • clip-calendar-3
  • clip-pie
  • clip-airplane
  • clip-tree-2
  • clip-sun
  • clip-bubble-paperclip

Font Awesome pictographic font

370 icons in pictographic font form. Add .fa fa-* class to <i> to display icon. Provided by Font Awesome.

New Icons in 4.0

  • fa-rub
  • fa-ruble (alias)
  • fa-rouble (alias)
  • fa-pagelines
  • fa-stack-exchange
  • fa-arrow-circle-o-right
  • fa-arrow-circle-o-left
  • fa-caret-square-o-left
  • fa-toggle-left (alias)
  • fa-dot-circle-o
  • fa-wheelchair
  • fa-vimeo-square
  • fa-try
  • fa-turkish-lira (alias)

Web Application Icons

  • fa-adjust
  • fa-anchor
  • fa-archive
  • fa-asterisk
  • fa-ban
  • fa-bar-chart-o
  • fa-barcode
  • fa-beer
  • fa-bell
  • fa-bell-o
  • fa-bolt
  • fa-book
  • fa-bookmark
  • fa-bookmark-o
  • fa-briefcase
  • fa-bug
  • fa-building
  • fa-bullhorn
  • fa-bullseye
  • fa-calendar
  • fa-calendar-o
  • fa-camera
  • fa-camera-retro
  • fa-caret-square-o-down
  • fa-caret-square-o-left
  • fa-caret-square-o-right
  • fa-caret-square-o-up
  • fa-certificate
  • fa-check
  • fa-check-circle
  • fa-check-circle-o
  • fa-check-square
  • fa-check-square-o
  • fa-circle
  • fa-circle-o
  • fa-clock-o
  • fa-cloud
  • fa-cloud-download
  • fa-cloud-upload
  • fa-code
  • fa-code-fork
  • fa-coffee
  • fa-cog
  • fa-cogs
  • fa-collapse-o
  • fa-comment
  • fa-comment-o
  • fa-comments
  • fa-comments-o
  • fa-compass
  • fa-credit-card
  • fa-crop
  • fa-crosshairs
  • fa-cutlery
  • fa-dashboard (alias)
  • fa-desktop
  • fa-dot-circle-o
  • fa-download
  • fa-edit (alias)
  • fa-ellipsis-horizontal
  • fa-ellipsis-vertical
  • fa-envelope
  • fa-envelope-o
  • fa-eraser
  • fa-exchange
  • fa-exclamation
  • fa-exclamation-circle
  • fa-exclamation-triangle
  • fa-expand-o
  • fa-external-link
  • fa-external-link-square
  • fa-eye
  • fa-eye-slash
  • fa-female
  • fa-fighter-jet
  • fa-film
  • fa-filter
  • fa-fire
  • fa-fire-extinguisher
  • fa-flag
  • fa-flag-checkered
  • fa-flag-o
  • fa-flash (alias)
  • fa-flask
  • fa-folder
  • fa-folder-o
  • fa-folder-open
  • fa-folder-open-o
  • fa-frown-o
  • fa-gamepad
  • fa-gavel
  • fa-gear (alias)
  • fa-gears (alias)
  • fa-gift
  • fa-glass
  • fa-globe
  • fa-group
  • fa-hdd
  • fa-headphones
  • fa-heart
  • fa-heart-o
  • fa-home
  • fa-inbox
  • fa-info
  • fa-info-circle
  • fa-key
  • fa-keyboard-o
  • fa-laptop
  • fa-leaf
  • fa-legal (alias)
  • fa-lemon-o
  • fa-level-down
  • fa-level-up
  • fa-lightbulb-o
  • fa-location-arrow
  • fa-lock
  • fa-magic
  • fa-magnet
  • fa-mail-forward (alias)
  • fa-mail-reply (alias)
  • fa-mail-reply-all
  • fa-male
  • fa-map-marker
  • fa-meh-o
  • fa-microphone
  • fa-microphone-slash
  • fa-minus
  • fa-minus-circle
  • fa-minus-square
  • fa-minus-square-o
  • fa-mobile
  • fa-mobile-phone (alias)
  • fa-money
  • fa-moon-o
  • fa-move
  • fa-music
  • fa-pencil
  • fa-pencil-square
  • fa-pencil-square-o
  • fa-phone
  • fa-phone-square
  • fa-picture-o
  • fa-plane
  • fa-plus
  • fa-plus-circle
  • fa-plus-square
  • fa-power-off
  • fa-print
  • fa-puzzle-piece
  • fa-qrcode
  • fa-question
  • fa-question-circle
  • fa-quote-left
  • fa-quote-right
  • fa-random
  • fa-refresh
  • fa-reorder
  • fa-reply
  • fa-reply-all
  • fa-resize-horizontal
  • fa-resize-vertical
  • fa-retweet
  • fa-road
  • fa-rocket
  • fa-rss
  • fa-rss-square
  • fa-search
  • fa-search-minus
  • fa-search-plus
  • fa-share
  • fa-share-square
  • fa-share-square-o
  • fa-shield
  • fa-shopping-cart
  • fa-sign-in
  • fa-sign-out
  • fa-signal
  • fa-sitemap
  • fa-smile-o
  • fa-sort
  • fa-sort-alpha-asc
  • fa-sort-alpha-desc
  • fa-sort-amount-asc
  • fa-sort-amount-desc
  • fa-sort-asc
  • fa-sort-desc
  • fa-sort-down (alias)
  • fa-sort-numeric-asc
  • fa-sort-numeric-desc
  • fa-sort-up (alias)
  • fa-spinner
  • fa-square
  • fa-square-o
  • fa-star
  • fa-star-half
  • fa-star-half-empty (alias)
  • fa-star-half-full (alias)
  • fa-star-half-o
  • fa-star-o
  • fa-subscript
  • fa-suitcase
  • fa-sun-o
  • fa-superscript
  • fa-tablet
  • fa-tachometer
  • fa-tag
  • fa-tags
  • fa-tasks
  • fa-terminal
  • fa-thumb-tack
  • fa-thumbs-down
  • fa-thumbs-o-down
  • fa-thumbs-o-up
  • fa-thumbs-up
  • fa-ticket
  • fa-times
  • fa-times-circle
  • fa-times-circle-o
  • fa-tint
  • fa-toggle-down (alias)
  • fa-toggle-left (alias)
  • fa-toggle-right (alias)
  • fa-toggle-up (alias)
  • fa-trash-o
  • fa-trophy
  • fa-truck
  • fa-umbrella
  • fa-unlock
  • fa-unlock-o
  • fa-unsorted (alias)
  • fa-upload
  • fa-user
  • fa-video-camera
  • fa-volume-down
  • fa-volume-off
  • fa-volume-up
  • fa-warning (alias)
  • fa-wheelchair
  • fa-wrench

Form Control Icons

  • fa-check-square
  • fa-check-square-o
  • fa-circle
  • fa-circle-o
  • fa-dot-circle-o
  • fa-minus-square
  • fa-minus-square-o
  • fa-square
  • fa-square-o

Currency Icons

  • fa-bitcoin (alias)
  • fa-btc
  • fa-cny (alias)
  • fa-dollar (alias)
  • fa-eur
  • fa-euro (alias)
  • fa-gbp
  • fa-inr
  • fa-jpy
  • fa-krw
  • fa-money
  • fa-rmb (alias)
  • fa-rouble (alias)
  • fa-rub
  • fa-ruble (alias)
  • fa-rupee (alias)
  • fa-try
  • fa-turkish-lira (alias)
  • fa-usd
  • fa-won (alias)
  • fa-yen (alias)

Text Editor Icons

  • fa-align-center
  • fa-align-justify
  • fa-align-left
  • fa-align-right
  • fa-bold
  • fa-chain (alias)
  • fa-chain-broken
  • fa-clipboard
  • fa-columns
  • fa-copy (alias)
  • fa-cut (alias)
  • fa-dedent (alias)
  • fa-eraser
  • fa-file
  • fa-file-o
  • fa-file-text
  • fa-file-text-o
  • fa-files-o
  • fa-floppy-o
  • fa-font
  • fa-indent
  • fa-italic
  • fa-link
  • fa-list
  • fa-list-alt
  • fa-list-ol
  • fa-list-ul
  • fa-outdent
  • fa-paperclip
  • fa-paste (alias)
  • fa-repeat
  • fa-rotate-left (alias)
  • fa-rotate-right (alias)
  • fa-save (alias)
  • fa-scissors
  • fa-strikethrough
  • fa-table
  • fa-text-height
  • fa-text-width
  • fa-th
  • fa-th-large
  • fa-th-list
  • fa-underline
  • fa-undo
  • fa-unlink (alias)

Directional Icons

  • fa-angle-double-down
  • fa-angle-double-left
  • fa-angle-double-right
  • fa-angle-double-up
  • fa-angle-down
  • fa-angle-left
  • fa-angle-right
  • fa-angle-up
  • fa-arrow-circle-down
  • fa-arrow-circle-left
  • fa-arrow-circle-o-down
  • fa-arrow-circle-o-left
  • fa-arrow-circle-o-right
  • fa-arrow-circle-o-up
  • fa-arrow-circle-right
  • fa-arrow-circle-up
  • fa-arrow-down
  • fa-arrow-left
  • fa-arrow-right
  • fa-arrow-up
  • fa-caret-down
  • fa-caret-left
  • fa-caret-right
  • fa-caret-square-o-down
  • fa-caret-square-o-left
  • fa-caret-square-o-right
  • fa-caret-square-o-up
  • fa-caret-up
  • fa-chevron-circle-down
  • fa-chevron-circle-left
  • fa-chevron-circle-right
  • fa-chevron-circle-up
  • fa-chevron-down
  • fa-chevron-left
  • fa-chevron-right
  • fa-chevron-up
  • fa-hand-o-down
  • fa-hand-o-left
  • fa-hand-o-right
  • fa-hand-o-up
  • fa-long-arrow-down
  • fa-long-arrow-left
  • fa-long-arrow-right
  • fa-long-arrow-up
  • fa-toggle-down (alias)
  • fa-toggle-left (alias)
  • fa-toggle-right (alias)
  • fa-toggle-up (alias)

Video Player Icons

  • fa-backward
  • fa-eject
  • fa-fast-backward
  • fa-fast-forward
  • fa-forward
  • fa-fullscreen
  • fa-pause
  • fa-play
  • fa-play-circle
  • fa-play-circle-o
  • fa-resize-full
  • fa-resize-small
  • fa-step-backward
  • fa-step-forward
  • fa-stop
  • fa-youtube-play

Brand Icons

  • fa-adn
  • fa-android
  • fa-apple
  • fa-bitbucket
  • fa-bitbucket-square
  • fa-bitcoin (alias)
  • fa-btc
  • fa-css3
  • fa-dribbble
  • fa-dropbox
  • fa-facebook
  • fa-facebook-square
  • fa-flickr
  • fa-foursquare
  • fa-github
  • fa-github-alt
  • fa-github-square
  • fa-gittip
  • fa-google-plus
  • fa-google-plus-square
  • fa-html5
  • fa-instagram
  • fa-linkedin
  • fa-linkedin-square
  • fa-linux
  • fa-maxcdn
  • fa-pagelines
  • fa-pinterest
  • fa-pinterest-square
  • fa-renren
  • fa-skype
  • fa-stack-exchange
  • fa-stack-overflow
  • fa-trello
  • fa-tumblr
  • fa-tumblr-square
  • fa-twitter
  • fa-twitter-square
  • fa-vimeo-square
  • fa-vk
  • fa-weibo
  • fa-windows
  • fa-xing
  • fa-xing-square
  • fa-youtube
  • fa-youtube-play
  • fa-youtube-square

Medical Icons

  • fa-ambulance
  • fa-h-square
  • fa-hospital
  • fa-medkit
  • fa-plus-square
  • fa-stethoscope
  • fa-user-md
  • fa-wheelchair