Springfield Geeks ∴ Theme Elements

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

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

40%

60%

Striped

40%

20%

Active

35%

20%

10%

Elements