Panel Configuration
- UI Lab
- Buttons & icons
Buttons & icons 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
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.
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
605 icons in pictographic font form. Add .fa fa-*
class to <i>
to display icon. Provided by
Font Awesome.
23 New Icons in 4.6
- american-sign-language-interpreting
- asl-interpreting
- assistive-listening-systems
- -audio-description
- blind
- braille
- deaf
- wpbeginner
- wpforms
- deafness
- envira
- gitlab
- glide
- glide-g
- hard-of-hearing
- low-vision
- question-circle-o
- sign-language
- signing
- snapchat
- snapchat-ghost
- snapchat-square
- universal-access
- viadeo
- viadeo-square
- volume-control-phone
- wheelchair-alt
Web Application Icons
- adjust
- american-sign-language-interpreting
- anchor
- archive
- area-chart
- arrows
- arrows-h
- arrows-v
- asl-interpreting
- assistive-listening-systems
- asterisk
- at
- audio-description
- automobile
- balance-scale
- ban
- bank
- bar-chart
- bar-chart-o
- barcode
- bars
- battery-0
- battery-1
- battery-2
- battery-3
- battery-4
- battery-empty
- battery-full
- battery-half
- battery-quarter
- battery-three-quarters
- bed
- beer
- bell
- bell-o
- bell-slash
- bell-slash-o
- bicycle
- binoculars
- birthday-cake
- blind
- bluetooth
- bluetooth-b
- bolt
- bomb
- book
- bookmark
- bookmark-o
- braille
- briefcase
- bug
- building
- building-o
- bullhorn
- bullseye
- bus
- cab
- calculator
- calendar
- calendar-check-o
- calendar-minus-o
- calendar-o
- calendar-plus-o
- calendar-times-o
- camera
- camera-retro
- car
- caret-square-o-down
- caret-square-o-left
- caret-square-o-right
- caret-square-o-up
- cart-arrow-down
- cart-plus
- cc
- certificate
- check
- check-circle
- check-circle-o
- check-square
- check-square-o
- child
- circle
- circle-o
- circle-o-notch
- circle-thin
- clock-o
- clone
- close
- cloud
- cloud-download
- cloud-upload
- code
- code-fork
- coffee
- cog
- cogs
- comment
- comment-o
- commenting
- commenting-o
- comments
- comments-o
- compass
- copyright
- creative-commons
- credit-card
- credit-card-alt
- crop
- crosshairs
- cube
- cubes
- cutlery
- dashboard
- database
- deaf
- deafness
- desktop
- diamond
- dot-circle-o
- download
- edit
- ellipsis-h
- ellipsis-v
- envelope
- envelope-o
- envelope-square
- eraser
- exchange
- exclamation
- exclamation-circle
- exclamation-triangle
- external-link
- external-link-square
- eye
- eye-slash
- eyedropper
- fax
- feed
- female
- fighter-jet
- file-archive-o
- file-audio-o
- file-code-o
- file-excel-o
- file-image-o
- file-movie-o
- file-pdf-o
- file-photo-o
- file-picture-o
- file-powerpoint-o
- file-sound-o
- file-video-o
- file-word-o
- file-zip-o
- film
- filter
- fire
- fire-extinguisher
- flag
- flag-checkered
- flag-o
- flash
- flask
- folder
- folder-o
- folder-open
- folder-open-o
- frown-o
- futbol-o
- gamepad
- gavel
- gear
- gears
- gift
- glass
- globe
- graduation-cap
- group
- hand-grab-o
- hand-lizard-o
- hand-paper-o
- hand-peace-o
- hand-pointer-o
- hand-rock-o
- hand-scissors-o
- hand-spock-o
- hand-stop-o
- hard-of-hearing
- hashtag
- hdd-o
- headphones
- heart
- heart-o
- heartbeat
- history
- home
- hotel
- hourglass
- hourglass-1
- hourglass-2
- hourglass-3
- hourglass-end
- hourglass-half
- hourglass-o
- hourglass-start
- i-cursor
- image
- inbox
- industry
- info
- info-circle
- institution
- key
- keyboard-o
- language
- laptop
- leaf
- legal
- lemon-o
- level-down
- level-up
- life-bouy
- life-buoy
- life-ring
- life-saver
- lightbulb-o
- line-chart
- location-arrow
- lock
- low-vision
- magic
- magnet
- mail-forward
- mail-reply
- mail-reply-all
- male
- map
- map-marker
- map-o
- map-pin
- map-signs
- meh-o
- microphone
- microphone-slash
- minus
- minus-circle
- minus-square
- minus-square-o
- mobile
- mobile-phone
- money
- moon-o
- mortar-board
- motorcycle
- mouse-pointer
- music
- navicon
- newspaper-o
- object-group
- object-ungroup
- paint-brush
- paper-plane
- paper-plane-o
- paw
- pencil
- pencil-square
- pencil-square-o
- percent
- phone
- phone-square
- photo
- picture-o
- pie-chart
- plane
- plug
- plus
- plus-circle
- plus-square
- plus-square-o
- power-off
- puzzle-piece
- qrcode
- question
- question-circle
- question-circle-o
- quote-left
- quote-right
- random
- recycle
- refresh
- registered
- remove
- reorder
- reply
- reply-all
- retweet
- road
- rocket
- rss
- rss-square
- search
- search-minus
- search-plus
- send
- send-o
- server
- share
- share-alt
- share-alt-square
- share-square
- share-square-o
- shield
- ship
- shopping-bag
- shopping-basket
- shopping-cart
- sign-in
- sign-language
- sign-out
- signal
- signing
- sitemap
- sliders
- smile-o
- soccer-ball-o
- sort
- sort-alpha-asc
- sort-alpha-desc
- sort-amount-asc
- sort-amount-desc
- sort-asc
- sort-desc
- sort-down
- sort-numeric-asc
- sort-numeric-desc
- sort-up
- space-shuttle
- spinner
- spoon
- square
- square-o
- star
- star-half
- star-half-empty
- star-half-full
- star-half-o
- star-o
- sticky-note
- sticky-note-o
- street-view
- suitcase
- sun-o
- support
- tablet
- tachometer
- tag
- tags
- tasks
- taxi
- television
- terminal
- thumb-tack
- thumbs-down
- thumbs-o-down
- thumbs-o-up
- thumbs-up
- ticket
- times
- times-circle
- times-circle-o
- tint
- toggle-down
- toggle-left
- toggle-off
- toggle-on
- toggle-right
- toggle-up
- trademark
- trash
- trash-o
- tree
- trophy
- truck
- tty
- tv
- umbrella
- universal-access
- university
- unlock
- unlock-alt
- unsorted
- upload
- user
- user-plus
- user-secret
- user-times
- users
- video-camera
- volume-control-phone
- volume-down
- volume-off
- volume-up
- warning
- wheelchair
- wheelchair-alt
- wifi
- wrench
Accessibility Icons
- american-sign-language-interpreting
- asl-interpreting
- assistive-listening-systems
- audio-description
- blind
- braille
- cc
- deaf
- deafness
- hard-of-hearing
- low-vision
- question-circle-o
- sign-language
- signing
- tty
- universal-access
- volume-control-phone
- wheelchair
- wheelchair-alt
Hand Icons
- hand-grab-o
- hand-lizard-o
- hand-o-down
- hand-o-left
- hand-o-right
- hand-o-up
- hand-paper-o
- hand-peace-o
- hand-pointer-o
- hand-rock-o
- hand-scissors-o
- hand-spock-o
- hand-stop-o
- thumbs-down
- thumbs-o-down
- thumbs-o-up
- thumbs-up
File Type Icons
- file
- file-archive-o
- file-audio-o
- file-code-o
- file-excel-o
- file-image-o
- file-movie-o
- file-o
- file-pdf-o
- file-photo-o
- file-picture-o
- file-powerpoint-o
- file-sound-o
- file-text
- file-text-o
- file-video-o
- file-word-o
- file-zip-o
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
- 500px
- adn
- amazon
- android
- angellist
- apple
- behance
- behance-square
- bitbucket
- bitbucket-square
- bitcoin
- black-tie
- bluetooth
- bluetooth-b
- btc
- buysellads
- cc-amex
- cc-diners-club
- cc-discover
- cc-jcb
- cc-mastercard
- cc-paypal
- cc-stripe
- cc-visa
- chrome
- codepen
- codiepie
- connectdevelop
- contao
- css3
- dashcube
- delicious
- deviantart
- digg
- dribbble
- dropbox
- drupal
- edge
- empire
- envira
- expeditedssl
- facebook-f
- facebook-official
- facebook-square
- firefox
- flickr
- fonticons
- fort-awesome
- forumbee
- foursquare
- ge
- get-pocket
- gg
- gg-circle
- git
- git-square
- github
- github-alt
- github-square
- gitlab
- gittip
- glide
- glide-g
- google-plus
- google-plus-square
- google-wallet
- gratipay
- hacker-news
- houzz
- html5
- internet-explorer
- ioxhost
- joomla
- jsfiddle
- lastfm
- lastfm-square
- leanpub
- linkedin-square
- linux
- maxcdn
- meanpath
- medium
- mixcloud
- modx
- odnoklassniki
- odnoklassniki-square
- opencart
- openid
- opera
- optin-monster
- pagelines
- paypal
- pied-piper
- pied-piper-alt
- pinterest-p
- pinterest-square
- product-hunt
- ra
- rebel
- reddit-alien
- reddit-square
- renren
- safari
- scribd
- sellsy
- share-alt
- share-alt-square
- shirtsinbulk
- simplybuilt
- skyatlas
- skype
- slack
- slideshare
- snapchat
- snapchat-ghost
- snapchat-square
- soundcloud
- spotify
- stack-exchange
- stack-overflow
- steam
- steam-square
- stumbleupon
- stumbleupon-circle
- tencent-weibo
- trello
- tripadvisor
- tumblr
- tumblr-square
- twitch
- twitter-square
- usb
- viacoin
- viadeo
- viadeo-square
- vimeo
- vimeo-square
- vine
- vk
- weixin
- wikipedia-w
- windows
- wordpress
- wpbeginner
- wpforms
- xing-square
- y-combinator
- y-combinator-square
- yahoo
- yc
- yc-square
- yelp
- youtube
- youtube-play
- youtube-square
Medical Icons
- fa-ambulance
- fa-h-square
- fa-hospital
- fa-medkit
- fa-plus-square
- fa-stethoscope
- fa-user-md
- fa-wheelchair