This template uses some glyphs from beautiful Entypo Font Set by Daniel Bruce, Maki Cartography Set by Sam Collins (selection made with Fontello) and full version of awesome Font Awesome by Dave Gandy.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

maki-icon-airport
maki-icon-bicycle
maki-icon-bus
maki-icon-ferry
maki-icon-pitch
entypo-icon-home
entypo-icon-hourglass
entypo-icon-cog
entypo-icon-tape
entypo-icon-flight
entypo-icon-feather
entypo-icon-direction
entypo-icon-vcard
entypo-icon-map
entypo-icon-compass
entypo-icon-archive
entypo-icon-bucket
entypo-icon-paper-plane
entypo-icon-traffic-cone
entypo-icon-github-circled
entypo-icon-flickr-circled
entypo-icon-vimeo-circled
entypo-icon-twitter-circled
entypo-icon-facebook-circled
entypo-icon-gplus-circled
entypo-icon-pinterest-circled
entypo-icon-tumblr-circled
entypo-icon-linkedin-circled
entypo-icon-dribble-circled
entypo-icon-stumbleupon-circled
entypo-icon-lastfm-circled
entypo-icon-rdio-circled
entypo-icon-skype-circled
entypo-icon-vkontakte
entypo-icon-globe
entypo-icon-palette
entypo-icon-cd
entypo-icon-mute
entypo-icon-sound
entypo-icon-battery
entypo-icon-bell
entypo-icon-flashlight
entypo-icon-rocket
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
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
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
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
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
icon-ambulance
icon-beaker
icon-h-sign
icon-hospital
icon-medkit
icon-plus-sign-alt
icon-stethoscope
icon-user-md

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
Dropdown in a button group
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
Button sizes
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>