Inline Icons

You can add more than 450+ inline icon with any color and any size with easy shortcode wizard

Syntax for shortcode: [icon icon="home" color="red"] Syntax for html: <span class="icon-home"></span>

Icons

Font Awesome

Font Awesome is a pictographic language of web-related actions which delivers 249 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome - http://fortawesome.github.com/Font-Awesome

Add .icon-CLASS_NAME to any element, best used with a <span>.

Web Icons

icon-adjust
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
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-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-coffee
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-credit-card
icon-dashboard
icon-desktop
icon-download
icon-download-alt

icon-edit
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-external-link
icon-eye-close
icon-eye-open
icon-facetime-video
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-flag
icon-folder-close
icon-folder-open
icon-folder-close-alt
icon-folder-open-alt
icon-food
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-laptop
icon-legal
icon-lemon
icon-lightbulb
icon-lock
icon-unlock

icon-magic
icon-magnet
icon-map-marker
icon-minus
icon-minus-sign
icon-mobile-phone
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-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
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-spinner
icon-star
icon-star-empty
icon-star-half
icon-tablet
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

Text Editor Icons

icon-file
icon-file-alt
icon-cut
icon-copy
icon-paste
icon-save
icon-undo
icon-repeat

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-paper-clip
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-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up

icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up

icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down

icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-circle
icon-circle-blank

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

Social Icons

icon-phone
icon-phone-sign
icon-facebook
icon-facebook-sign

icon-twitter
icon-twitter-sign
icon-github
icon-github-alt

icon-github-sign
icon-linkedin
icon-linkedin-sign
icon-pinterest

icon-pinterest-sign
icon-google-plus
icon-google-plus-sign
icon-sign-blank

Medical Icons

icon-ambulance
icon-beaker

icon-h-sign
icon-hospital

icon-medkit
icon-plus-sign-alt

icon-stethoscope
icon-user-md

<span class="icon-CLASS_NAME">
  ...
</span>
<span class="icon-download">
  ...
</span>

The documented typography above is a modified version of the reference guide available at: http://twitter.github.com/bootstrap/base-css.html

Horizontal Rulers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Get The code

[hr]

Get The code

[hr size='big']

Get The code

[hr size='bigger']

Get The code

[hr size='small']

Get The code

[hr colored='true']

Highlights

Get The code

[highlight]Nulla elementum[/highlight]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.

Get The code

[highlight style='dark']Pellentesque[/highlight]

Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis facilisis massa. Etiam eu urna Sed porta. Suspendisse quam leo, molestie sed, luctus quis, feugiat in, pede. Fusce tellus. Sed metus augue, convallis et, vehicula ut, pulvinar eu, ante. Integer orci tellus, tristique vitae, consequat nec, porta vel, lectus. Nulla sit amet diam. Duis non nunc. Nulla rhoncus dictum metus. Curabitur tristique mi condimentum orci. Phasellus pellentesque aliquam enim.

Get The code

[highlight style='neon']Etiam eu urna[/highlight]

Heading

This is a heading 1

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Get The code

[heading type="h1" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h1[/heading]

This is a heading 2.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Get The code

[heading type="h2" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h2[/heading]

This is a heading 3.

Get The code

[heading type="h3" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h3[/heading]

This is a heading 4.

Get The code

[heading type="h4" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h4[/heading]

This is a heading 5.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Get The code

[heading type="h5" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h5[/heading]

This is a heading 6.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Get The code

[heading type="h6" underlined="false" no_top_padding="false" no_bottom_padding="false"]This is a h6[/heading]

Google Map

Get The code

[googlemap height="400" style="full" z="16" marker="yes" infowindow="Hello World!" infowindowdefault="yes" hidecontrols="false" address="New York"]

Dropcaps

Dropcaps bring the beauty of book typography to your website. The Theme comes with a Shortcode Generator, that enables you to to include a dropcap with just two clicks.

Default Dropcaps

Normal

Norbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Square

Porbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Circle

Borbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Get The code

[dropcap]Normal Dropcap[/dropcap]

[dropcap type="square"]Square Dropcap[/dropcap]

[dropcap type="circle"]Circle Dropcap[/dropcap]

Colored Dropcaps

Normal

Norbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Square

Porbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Circle

Borbi Mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.

Get The code

[dropcap colored="true"]Normal Dropcap[/dropcap]

[dropcap type="square" colored="true"]Square Dropcap[/dropcap]

[dropcap type="circle" colored="true"]Circle Dropcap[/dropcap]

Columns

Content for 1/2 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.

Get The code

[one_half]
Content for 1/2 Column here
[/one_half] 
[one_half last]
Content for 1/2 Column here
[/one_half]

Content for 1/3 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Get The code

[one_third]
Content for 1/3 Column here
[/one_third] 
[one_third]
Content for 1/3 Column here
[/one_third] 
[one_third last]
Content for 1/3 Column here
[/one_third]

Content for 1/4 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum

Content for 3/4 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Get The code

[one_fourth]
Content for 1/4 Column here
[/one_fourth] 
[three_fourth last]
Content for 3/4 Column here
[/three_fourth]

Content for 1/5 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor

Content for 2/5 Column here Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Get The code

[one_fifth]
Content for 1/5 Column here
[/one_fifth] 
[two_fifth]
Content for 2/5 Column here
[/two_fifth]
[two_fifth last]
Content for 2/5 Column here
[/two_fifth]

Call to Action

Purchase Now

Dream Beauty is incredibly responsive, with a futuristic design

And it has some awesome features, unlimited colors, advanced template options and so much more!

Purchase Now

Get The code

[calltoaction bg_color="#ddd" link="#" button_class="btn-success" button_text="Purchase Now" target="_blank"]<h2>Degree is incredibly responsive, with a futuristic design</h2><p>And it has some awesome features, unlimited colors, advanced template options and so much more!</p>[/calltoaction]

Buttons

simple button simple button simple button simple button

Get The code

[button link="#" open_new_tab="true"]simple button[/button]

Primary Button Success Button Information Button Warning Button Danger Button

Get The code

[button link="#" open_new_tab="true" type="primary"]sample button[/button]

sample button sample button sample button

Get The code

[button link="#" size="large" open_new_tab="true"]sample button[/button]

Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
— john due

Get The code

[blockquote source="john due"]
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
[/blockquote]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
— john due

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Get The code

[blockquote source="john due" align="left"]
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
[/blockquote]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
— john due

Get The code

[blockquote source="john due" align="right"]
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
[/blockquote]

john due
web designer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.