Buttons

Extra Small

btn btn-xs

<!-- Code for the above example -->

<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>

Small

btn btn-sm

<!-- Code for the above example -->

<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>

Default

btn

<!-- Code for the above example -->

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

Large

btn btn-lg

<!-- Code for the above example -->

<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>

Icons

Composed of a custom selection from Icon Moon

Simply click on an icon box and the classes necessary for its use will appear. These will be highlighted, ready to be copy and pasted into your project. In case you're curious and to help remember, the "ai" stands for "adapto icon."

There are lots of example uses around the theme for your taking and customizing, but also be sure to check-out the icon example section (below).

    Direction Icons

  • ai ai-arrow-up-left
  • ai ai-arrow-up
  • ai ai-arrow-up-right
  • ai ai-arrow-right
  • ai ai-arrow-down-right
  • ai ai-arrow-down
  • ai ai-arrow-down-left
  • ai ai-arrow-left
  • ai ai-arrow-up-left2
  • ai ai-arrow-up2
  • ai ai-arrow-up-right2
  • ai ai-arrow-right2
  • ai ai-arrow-down-right2
  • ai ai-arrow-down2
  • ai ai-arrow-down-left2
  • ai ai-arrow-left2
  • ai ai-arrow-up-left3
  • ai ai-arrow-up3
  • ai ai-arrow-up-right3
  • ai ai-arrow-right3
  • ai ai-arrow-down-right3
  • ai ai-arrow-down3
  • ai ai-arrow-down-left3
  • ai ai-arrow-left3
  • ai ai-point-up
  • ai ai-point-right
  • ai ai-point-down
  • ai ai-point-left
  • ai ai-arrow-down5
  • ai ai-arrow-right5
  • ai ai-arrow-up4
  • ai ai-arrow-left5
  • Emotion Icons

  • ai ai-heart
  • ai ai-heart2
  • ai ai-heart-broken
  • ai ai-thumbs-up
  • ai ai-thumbs-up2
  • ai ai-happy
  • ai ai-happy2
  • ai ai-smiley2
  • ai ai-smiley
  • ai ai-sad
  • ai ai-sad2
  • ai ai-grin2
  • ai ai-grin
  • ai ai-shocked2
  • ai ai-shocked
  • File Related Icons

  • ai ai-cloud-upload
  • ai ai-download2
  • ai ai-upload2
  • ai ai-download3
  • ai ai-upload3
  • ai ai-globe
  • ai ai-file-powerpoint
  • ai ai-file-xml
  • ai ai-file-css
  • ai ai-html5
  • ai ai-html52
  • ai ai-css3
  • ai ai-file
  • ai ai-profile
  • ai ai-file2
  • ai ai-file3
  • ai ai-file4
  • ai ai-copy
  • ai ai-copy2
  • ai ai-copy3
  • ai ai-paste
  • ai ai-paste2
  • ai ai-paste3
  • ai ai-stack
  • ai ai-folder
  • ai ai-folder-open
  • ai ai-tag
  • ai ai-libreoffice
  • ai ai-file-pdf
  • ai ai-file-openoffice
  • ai ai-file-word
  • ai ai-file-excel
  • ai ai-file-zip
  • ai ai-tags
  • ai ai-chrome
  • ai ai-barcode
  • ai ai-qrcode
  • ai ai-ticket
  • ai ai-download
  • ai ai-upload
  • ai ai-disk
  • ai ai-storage
  • ai ai-cabinet
  • ai ai-drawer
  • ai ai-drawer2
  • ai ai-drawer3
  • ai ai-box-add
  • ai ai-box-remove
  • Layout Icons

  • ai ai-list
  • ai ai-list2
  • ai ai-numbered-list
  • ai ai-menu
  • ai ai-menu2
  • ai ai-layout
  • ai ai-list3
  • ai ai-list22
  • ai ai-th-large
  • ai ai-th
  • ai ai-th-list
  • ai ai-layout-list
  • ai ai-tree
  • ai ai-table
  • ai ai-table2
  • ai ai-insert-template
  • ai ai-pilcrow
  • ai ai-left-toright
  • ai ai-right-toleft
  • ai ai-paragraph-left
  • ai ai-paragraph-center
  • ai ai-paragraph-right
  • ai ai-paragraph-justify
  • ai ai-paragraph-left2
  • ai ai-paragraph-center2
  • ai ai-paragraph-right2
  • ai ai-paragraph-justify2
  • ai ai-indent-increase
  • ai ai-indent-decrease
  • Media Icons

  • ai ai-cloud-download
  • ai ai-play2
  • ai ai-pause
  • ai ai-stop
  • ai ai-backward
  • ai ai-forward2
  • ai ai-play3
  • ai ai-pause2
  • ai ai-stop2
  • ai ai-backward2
  • ai ai-forward3
  • ai ai-first
  • ai ai-last
  • ai ai-previous
  • ai ai-next
  • ai ai-eject
  • ai ai-volume-high
  • ai ai-volume-medium
  • ai ai-volume-low
  • ai ai-volume-mute
  • ai ai-volume-mute2
  • ai ai-volume-increase
  • ai ai-volume-decrease
  • ai ai-loop
  • ai ai-loop2
  • ai ai-loop3
  • ai ai-shuffle
  • ai ai-music
  • ai ai-headphones
  • ai ai-play
  • ai ai-film
  • ai ai-bullhorn
  • ai ai-connection
  • ai ai-podcast
  • ai ai-feed
  • Meteorology Icons

  • ai ai-sun
  • ai ai-windy
  • ai ai-weather
  • ai ai-cloudy
  • ai ai-lightning2
  • ai ai-thermometer
  • ai ai-compass2
  • ai ai-Celsius
  • ai ai-Fahrenheit
  • ai ai-lightning3
  • ai ai-cloud2
  • ai ai-weather2
  • ai ai-cloudy2
  • ai ai-windy2
  • ai ai-sunrise
  • ai ai-sun2
  • ai ai-wind
  • ai ai-rainy
  • ai ai-windy3
  • ai ai-rainy2
  • ai ai-rainy3
  • ai ai-lightning4
  • ai ai-lightning5
  • ai ai-lightning6
  • ai ai-rainy4
  • ai ai-cloud3
  • ai ai-cloud4
  • ai ai-cloud5
  • ai ai-cloudy3
  • ai ai-moon
  • ai ai-sun3
  • ai ai-weather3
  • ai ai-weather4
  • ai ai-weather5
  • ai ai-cloud6
  • ai ai-cloudy4
  • ai ai-moon2
  • ai ai-cloud
  • Object Icons

  • ai ai-key
  • ai ai-key2
  • ai ai-lock
  • ai ai-lock2
  • ai ai-unlocked
  • ai ai-wrench
  • ai ai-target
  • ai ai-shield
  • ai ai-lightning
  • ai ai-switch
  • ai ai-power-cord
  • ai ai-signup
  • ai ai-mail2
  • ai ai-mail3
  • ai ai-mail4
  • ai ai-book
  • ai ai-books
  • ai ai-library
  • ai ai-newspaper
  • ai ai-quill
  • ai ai-pencil
  • ai ai-pencil2
  • ai ai-home
  • ai ai-home2
  • ai ai-home3
  • ai ai-office
  • ai ai-pen
  • ai ai-blog
  • ai ai-dice
  • ai ai-droplet
  • ai ai-camera2
  • ai ai-image
  • ai ai-image2
  • ai ai-images
  • ai ai-camera
  • ai ai-star
  • ai ai-star2
  • ai ai-star3
  • ai ai-cart
  • ai ai-cart2
  • ai ai-cart3
  • ai ai-coin
  • ai ai-credit
  • ai ai-calculate
  • ai ai-support
  • ai ai-phone
  • ai ai-phone-hang-up
  • ai ai-address-book
  • ai ai-notebook
  • ai ai-envelope
  • ai ai-pushpin
  • ai ai-location
  • ai ai-location2
  • ai ai-compass
  • ai ai-map
  • ai ai-map2
  • ai ai-history
  • ai ai-clock
  • ai ai-clock2
  • ai ai-alarm
  • ai ai-alarm2
  • ai ai-bell
  • ai ai-stopwatch
  • ai ai-calendar
  • ai ai-calendar2
  • ai ai-print
  • ai ai-keyboard
  • ai ai-screen
  • ai ai-laptop
  • ai ai-mobile
  • ai ai-mobile2
  • ai ai-tablet
  • ai ai-tv
  • ai ai-female
  • ai ai-male
  • ai ai-chart
  • ai ai-bars3
  • ai ai-image3
  • ai ai-earth
  • ai ai-link
  • ai ai-flag
  • ai ai-attachment
  • ai ai-eye
  • ai ai-eye-blocked
  • ai ai-eye2
  • ai ai-binoculars
  • ai ai-bubble
  • ai ai-bubbles
  • ai ai-bubbles2
  • ai ai-bubble2
  • ai ai-bubbles3
  • ai ai-bubbles4
  • ai ai-user
  • ai ai-users
  • ai ai-user2
  • ai ai-users2
  • ai ai-user3
  • ai ai-user4
  • ai ai-quotes-left
  • ai ai-cog
  • ai ai-cogs
  • ai ai-cog2
  • ai ai-hammer
  • ai ai-wand
  • ai ai-aid
  • ai ai-bug
  • ai ai-pie
  • ai ai-stats
  • ai ai-bars
  • ai ai-bars2
  • ai ai-gift
  • ai ai-trophy
  • ai ai-glass
  • ai ai-mug
  • ai ai-food
  • ai ai-leaf
  • ai ai-rocket
  • ai ai-meter
  • ai ai-meter2
  • ai ai-dashboard
  • ai ai-hammer2
  • ai ai-fire
  • ai ai-lab
  • ai ai-magnet
  • ai ai-remove
  • ai ai-remove2
  • ai ai-briefcase
  • ai ai-airplane
  • ai ai-truck
  • ai ai-road
  • ai ai-scissors
  • ai ai-filter
  • ai ai-filter2
  • ai ai-mail
  • ai ai-graph
  • ai ai-microphone
  • ai ai-microphone-off
  • ai ai-feather
  • Social Icons

  • ai ai-google
  • ai ai-google-plus
  • ai ai-google-plus2
  • ai ai-google-plus3
  • ai ai-google-plus4
  • ai ai-google-drive
  • ai ai-facebook
  • ai ai-facebook2
  • ai ai-facebook3
  • ai ai-vk
  • ai ai-instagram
  • ai ai-twitter
  • ai ai-twitter2
  • ai ai-twitter3
  • ai ai-feed2
  • ai ai-feed3
  • ai ai-feed4
  • ai ai-youtube
  • ai ai-youtube2
  • ai ai-youtube3
  • ai ai-youtube-sign
  • ai ai-vimeo
  • ai ai-vimeo2
  • ai ai-vimeo3
  • ai ai-lanyrd
  • ai ai-flickr
  • ai ai-flickr2
  • ai ai-flickr3
  • ai ai-flickr4
  • ai ai-picassa
  • ai ai-picassa2
  • ai ai-dribbble
  • ai ai-dribbble2
  • ai ai-dribbble3
  • ai ai-forrst
  • ai ai-forrst2
  • ai ai-deviantart
  • ai ai-deviantart2
  • ai ai-steam
  • ai ai-steam2
  • ai ai-github
  • ai ai-github2
  • ai ai-github3
  • ai ai-github4
  • ai ai-github5
  • ai ai-wordpress
  • ai ai-wordpress2
  • ai ai-joomla
  • ai ai-blogger
  • ai ai-blogger2
  • ai ai-tumblr
  • ai ai-tumblr2
  • ai ai-yahoo
  • ai ai-tux
  • ai ai-apple
  • ai ai-finder
  • ai ai-android
  • ai ai-windows
  • ai ai-windows8
  • ai ai-soundcloud
  • ai ai-soundcloud2
  • ai ai-skype
  • ai ai-reddit
  • ai ai-linkedin
  • ai ai-lastfm
  • ai ai-lastfm2
  • ai ai-delicious
  • ai ai-stumbleupon
  • ai ai-stumbleupon2
  • ai ai-stackoverflow
  • ai ai-pinterest
  • ai ai-pinterest2
  • ai ai-xing
  • ai ai-xing2
  • ai ai-flattr
  • ai ai-foursquare
  • ai ai-foursquare2
  • ai ai-paypal
  • ai ai-paypal2
  • ai ai-paypal3
  • ai ai-yelp
  • ai ai-firefox
  • ai ai-IE
  • ai ai-opera
  • ai ai-safari
  • ai ai-IcoMoon
  • ai ai-apple2
  • ai ai-windows2
  • ai ai-dropbox
  • Typography Icons

  • ai ai-font
  • ai ai-text-height
  • ai ai-text-width
  • ai ai-bold
  • ai ai-underline
  • ai ai-italic
  • ai ai-strikethrough
  • ai ai-omega
  • ai ai-sigma
  • ai ai-spades
  • ai ai-spell-check
  • Utility Icons

  • ai ai-thumbs-down2
  • ai ai-thumbs-up22
  • ai ai-bookmark
  • ai ai-bookmarks
  • ai ai-brightness-medium
  • ai ai-brightness-contrast
  • ai ai-contrast
  • ai ai-warning
  • ai ai-notification
  • ai ai-question
  • ai ai-info
  • ai ai-info2
  • ai ai-blocked
  • ai ai-cancel-circle
  • ai ai-checkmark-circle
  • ai ai-remove-circle
  • ai ai-ok-circle
  • ai ai-spam
  • ai ai-close
  • ai ai-checkmark
  • ai ai-checkmark2
  • ai ai-minus
  • ai ai-plus
  • ai ai-enter
  • ai ai-exit
  • ai ai-settings
  • ai ai-equalizer
  • ai ai-busy
  • ai ai-spinner
  • ai ai-spinner2
  • ai ai-spinner3
  • ai ai-spinner4
  • ai ai-spinner5
  • ai ai-spinner6
  • ai ai-search
  • ai ai-zoom-in
  • ai ai-zoom-out
  • ai ai-expand
  • ai ai-contract
  • ai ai-expand2
  • ai ai-contract2
  • ai ai-accessibility
  • ai ai-checkbox-checked
  • ai ai-checkbox-unchecked
  • ai ai-checkbox-partial
  • ai ai-radio-checked
  • ai ai-radio-unchecked
  • ai ai-crop
  • ai ai-new-tab
  • ai ai-embed
  • ai ai-code
  • ai ai-console
  • ai ai-share
  • ai ai-tab
  • ai ai-undo
  • ai ai-redo
  • ai ai-flip
  • ai ai-flip2
  • ai ai-undo2
  • ai ai-redo2
  • ai ai-forward
  • ai ai-reply

Icon Example Usage

Enlarge

<!-- Code for the above example -->

<ul class="list-unstyled list-inline">
  <li><i class="ai ai-home3 ai-lg"></i></li>
  <li><i class="ai ai-home3 ai-2x"></i></li>
  <li><i class="ai ai-home3 ai-3x"></i></li>
  <li><i class="ai ai-home3 ai-4x"></i></li>
  <li><i class="ai ai-home3 ai-5x"></i></li>
</ul>

In-List

  • Replace List Bullets
  • Replace List Bullets
  • Replace List Bullets
  • Replace List Bullets
  • Replace List Bullets
  • Replace List Bullets
<!-- Code from the above example -->

<ul class="ai-ul">
  <li><i class="ai ai-li ai-checkmark"></i> Replace List Bullets</li>
  <li><i class="ai ai-li ai-close"></i> Replace List Bullets</li>
</ul>
  • Add Color
  • Add Color
  • Add Color
  • Add Color
  • Add Color
  • Add Color
<!-- Code from the above example -->

<ul class="ai-ul">
  <li><i class="ai ai-li ai-checkmark color-success"></i> Add Color</li>
  <li><i class="ai ai-li ai-close color-danger"></i> Add Color</li>
</ul>

Flip and Rotate

  normal
  ai-rotate-90
  ai-rotate-180
  ai-rotate-270
  ai-flip-horizontal
  icon-flip-vertical

<!-- Code for the above example -->

<i class="ai ai ai-wrench"></i>  normal<br>
<i class="ai ai ai-wrench ai-rotate-90"></i>  ai-rotate-90<br>
<i class="ai ai ai-wrench ai-rotate-180"></i>  ai-rotate-180<br>
<i class="ai ai ai-wrench ai-rotate-270"></i>  ai-rotate-270<br>
<i class="ai ai ai-wrench ai-flip-horizontal"></i>  ai-flip-horizontal<br>
<i class="ai ai ai-wrench ai-flip-vertical"></i>  icon-flip-vertical

Spin

Make any icon spin by adding the class ai-spin to any icon. Combine these with other classes for ultimate flexibility.

<!-- Code from the above example -->

<!-- default size -->
<i class="ai ai-spinner ai-spin"></i>
<i class="ai ai-spinner2 ai-spin"></i>
<i class="ai ai-spinner3 ai-spin"></i>
<i class="ai ai-spinner5 ai-spin"></i>
<i class="ai ai-cog ai-spin"></i>

<!-- lg -->
<i class="ai-lg ai ai-spinner ai-spin"></i>
<i class="ai-lg ai ai-spinner2 ai-spin"></i>
<i class="ai-lg ai ai-spinner3 ai-spin"></i>
<i class="ai-lg ai ai-spinner5 ai-spin"></i>
<i class="ai-lg ai ai-cog ai-spin"></i>

<!-- 2x -->
<i class="ai-2x ai ai-spinner ai-spin"></i>
<i class="ai-2x ai ai-spinner2 ai-spin "></i>
<i class="ai-2x ai ai-spinner3 ai-spin"></i>
<i class="ai-2x ai ai-spinner5 ai-spin"></i>
<i class="ai-2x ai ai-cog ai-spin"></i>

<!-- 3x -->
<i class="ai-3x ai ai-spinner ai-spin"></i>
<i class="ai-3x ai ai-spinner2 ai-spin"></i>
<i class="ai-3x ai ai-spinner3 ai-spin"></i>
<i class="ai-3x ai ai-spinner5 ai-spin"></i>
<i class="ai-3x ai ai-cog ai-spin"></i>

In-Circle

<!-- Code for the above example -->

<ul class="list-unstyled list-inline">
  <li><i class="ai ai-home3 ai-lg ai-circle"></i></li>
  <li><i class="ai ai-home3 ai-2x ai-circle bg-info"></i></li>
  <li><i class="ai ai-home3 ai-3x ai-circle"></i></li>
  <li><i class="ai ai-home3 ai-4x ai-circle"></i></li>
  <li><i class="ai ai-home3 ai-5x ai-circle"></i></li>
</ul>

Progress Bars

Simple

20% Complete
40% Complete (success) 40%
60% Complete 60%
70% Complete (warning)
80% Complete (danger)
35% Complete (success)
40% Complete (warning)
15% Complete (danger)

Striped

60% Complete
40% Complete (success) 40%
20% Complete 20%
60% Complete (warning)
80% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Active

20% Complete
40% Complete (success)
60% Complete
70% Complete (warning)
80% Complete (danger)
35% Complete (success) 35%
20% Complete (warning) 20%
10% Complete (danger) 10%