Typography & Icons

h1. Header 1

h2. Header 2

h3. Header 3

h4. Header 4

h5. Header 5
h6. Header 6

Body copy

It’s just mind-blowingly awesome. I apologize, and I wish I was more articulate, but it’s hard to be articulate when your mind’s blown—but in a very good way.

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.


The size and age of the Cosmos are beyond ordinary human understanding. Lost somewhere between immensity and eternity is our tiny planetary home. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet our species is young and curious and brave and shows much promise. In the last few millennia we have made the most astonishing and unexpected discoveries about the Cosmos and our place within it, explorations that are exhilarating to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this Cosmos in which we float like a mote of dust in the morning sky.

Blockquotes

Houston, that may have seemed like a very long final phase. The autotargeting was taking us right into a crater, with a large number of big boulders and rocks and it required flying manually over the rock field to find a reasonably good area.Someone famous in some article

In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.Someone famous in some article

Unordered list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Donec scelerisque lacus eget augue pulvinar
  • Nullam ut accumsan neque
    • Integer viverra metus eu turpis interdum mollis
    • Integer non neque ac urna vestibulum gravida vitae vel mauris
    • Pellentesque in tellus at diam blandit pellentesque
    • Duis mi arcu, luctus sed scelerisque ac, placerat a neque
  • Mauris sapien est, consequat malesuada faucibus id
  • Donec consequat massa sed lorem tincidunt quis egestas eros tristique
  • Cras et sapien ac diam facilisis porttitor

Ordered list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Donec scelerisque lacus eget augue pulvinar
  4. Nullam ut accumsan neque
  5. Mauris sapien est, consequat malesuada faucibus id
  6. Donec consequat massa sed lorem tincidunt quis egestas eros tristique
  7. Cras et sapien ac diam facilisis porttitor

Definition list

Definition lists
A description list is perfect for defining terms.
Mauris vitae magna sapien
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Buttons

Use the .btn class on an <a>, <button>, or <input> element.

Large Btn (a)

Default Button (a)

Small Button (a)

Icon Button Icon Button Icon Button

Font Awesome Icons

  • adjust
  • american-sign-language-interpreting
  • anchor
  • archive
  • area-chart
  • arrows
  • arrows-h
  • arrows-v
  • asl-interpreting (alias)
  • assistive-listening-systems
  • asterisk
  • at
  • audio-description
  • automobile (alias)
  • balance-scale
  • ban
  • bank (alias)
  • bar-chart
  • bar-chart-o (alias)
  • barcode
  • bars
  • battery-0 (alias)
  • battery-1 (alias)
  • battery-2 (alias)
  • battery-3 (alias)
  • battery-4 (alias)
  • 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 (alias)
  • 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 (alias)
  • 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 (alias)
  • database
  • deaf
  • deafness (alias)
  • desktop
  • diamond
  • dot-circle-o
  • download
  • edit (alias)
  • 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 (alias)
  • female
  • fighter-jet
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-video-o
  • file-word-o
  • file-zip-o (alias)
  • film
  • filter
  • fire
  • fire-extinguisher
  • flag
  • flag-checkered
  • flag-o
  • flash (alias)
  • flask
  • folder
  • folder-o
  • folder-open
  • folder-open-o
  • frown-o
  • futbol-o
  • gamepad
  • gavel
  • gear (alias)
  • gears (alias)
  • gift
  • glass
  • globe
  • graduation-cap
  • group (alias)
  • hand-grab-o (alias)
  • hand-lizard-o
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hand-stop-o (alias)
  • hard-of-hearing (alias)
  • hashtag
  • hdd-o
  • headphones
  • heart
  • heart-o
  • heartbeat
  • history
  • home
  • hotel (alias)
  • hourglass
  • hourglass-1 (alias)
  • hourglass-2 (alias)
  • hourglass-3 (alias)
  • hourglass-end
  • hourglass-half
  • hourglass-o
  • hourglass-start
  • i-cursor
  • image (alias)
  • inbox
  • industry
  • info
  • info-circle
  • institution (alias)
  • key
  • keyboard-o
  • language
  • laptop
  • leaf
  • legal (alias)
  • lemon-o
  • level-down
  • level-up
  • life-bouy (alias)
  • life-buoy (alias)
  • life-ring
  • life-saver (alias)
  • lightbulb-o
  • line-chart
  • location-arrow
  • lock
  • low-vision
  • magic
  • magnet
  • mail-forward (alias)
  • mail-reply (alias)
  • mail-reply-all (alias)
  • 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 (alias)
  • money
  • moon-o
  • mortar-board (alias)
  • motorcycle
  • mouse-pointer
  • music
  • navicon (alias)
  • 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 (alias)
  • picture-o
  • pie-chart
  • plane
  • plug
  • plus
  • plus-circle
  • plus-square
  • plus-square-o
  • power-off
  • print
  • puzzle-piece
  • qrcode
  • question
  • question-circle
  • question-circle-o
  • quote-left
  • quote-right
  • random
  • recycle
  • refresh
  • registered
  • remove (alias)
  • reorder (alias)
  • reply
  • reply-all
  • retweet
  • road
  • rocket
  • rss
  • rss-square
  • search
  • search-minus
  • search-plus
  • send (alias)
  • send-o (alias)
  • 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 (alias)
  • sitemap
  • sliders
  • smile-o
  • soccer-ball-o (alias)
  • sort
  • sort-alpha-asc
  • sort-alpha-desc
  • sort-amount-asc
  • sort-amount-desc
  • sort-asc
  • sort-desc
  • sort-down (alias)
  • sort-numeric-asc
  • sort-numeric-desc
  • sort-up (alias)
  • space-shuttle
  • spinner
  • spoon
  • square
  • square-o
  • star
  • star-half
  • star-half-empty (alias)
  • star-half-full (alias)
  • star-half-o
  • star-o
  • sticky-note
  • sticky-note-o
  • street-view
  • suitcase
  • sun-o
  • support (alias)
  • 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 (alias)
  • toggle-left (alias)
  • toggle-off
  • toggle-on
  • toggle-right (alias)
  • toggle-up (alias)
  • trademark
  • trash
  • trash-o
  • tree
  • trophy
  • truck
  • tty
  • tv (alias)
  • umbrella
  • universal-access
  • university
  • unlock
  • unlock-alt
  • unsorted (alias)
  • upload
  • user
  • user-plus
  • user-secret
  • user-times
  • users
  • video-camera
  • volume-control-phone
  • volume-down
  • volume-off
  • volume-up
  • warning (alias)
  • wheelchair
  • wheelchair-alt
  • wifi
  • wrench
  • american-sign-language-interpreting
  • asl-interpreting (alias)
  • assistive-listening-systems
  • audio-description
  • blind
  • braille
  • cc
  • deaf
  • deafness (alias)
  • hard-of-hearing (alias)
  • low-vision
  • question-circle-o
  • sign-language
  • signing (alias)
  • tty
  • universal-access
  • volume-control-phone
  • wheelchair
  • wheelchair-alt
  • hand-grab-o (alias)
  • 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 (alias)
  • thumbs-down
  • thumbs-o-down
  • thumbs-o-up
  • thumbs-up
  • ambulance
  • automobile (alias)
  • bicycle
  • bus
  • cab (alias)
  • car
  • fighter-jet
  • motorcycle
  • plane
  • rocket
  • ship
  • space-shuttle
  • subway
  • taxi
  • train
  • truck
  • wheelchair
  • genderless
  • intersex (alias)
  • mars
  • mars-double
  • mars-stroke
  • mars-stroke-h
  • mars-stroke-v
  • mercury
  • neuter
  • transgender
  • transgender-alt
  • venus
  • venus-double
  • venus-mars
  • file
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-o
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-text
  • file-text-o
  • file-video-o
  • file-word-o
  • file-zip-o (alias)
  • circle-o-notch
  • cog
  • gear (alias)
  • refresh
  • spinner
  • check-square
  • check-square-o
  • circle
  • circle-o
  • dot-circle-o
  • minus-square
  • minus-square-o
  • plus-square
  • plus-square-o
  • square
  • square-o
  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • credit-card-alt
  • google-wallet
  • paypal
  • area-chart
  • bar-chart
  • bar-chart-o (alias)
  • line-chart
  • pie-chart
  • bitcoin (alias)
  • btc
  • cny (alias)
  • dollar (alias)
  • eur
  • euro (alias)
  • gbp
  • gg
  • gg-circle
  • ils
  • inr
  • jpy
  • krw
  • money
  • rmb (alias)
  • rouble (alias)
  • rub
  • ruble (alias)
  • rupee (alias)
  • shekel (alias)
  • sheqel (alias)
  • try
  • turkish-lira (alias)
  • usd
  • won (alias)
  • yen (alias)
  • align-center
  • align-justify
  • align-left
  • align-right
  • bold
  • chain (alias)
  • chain-broken
  • clipboard
  • columns
  • copy (alias)
  • cut (alias)
  • dedent (alias)
  • eraser
  • file
  • file-o
  • file-text
  • file-text-o
  • files-o
  • floppy-o
  • font
  • header
  • indent
  • italic
  • link
  • list
  • list-alt
  • list-ol
  • list-ul
  • outdent
  • paperclip
  • paragraph
  • paste (alias)
  • repeat
  • rotate-left (alias)
  • rotate-right (alias)
  • save (alias)
  • scissors
  • strikethrough
  • subscript
  • superscript
  • table
  • text-height
  • text-width
  • th
  • th-large
  • th-list
  • underline
  • undo
  • unlink (alias)
  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • exchange
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)
  • arrows-alt
  • backward
  • compress
  • eject
  • expand
  • fast-backward
  • fast-forward
  • forward
  • pause
  • pause-circle
  • pause-circle-o
  • play
  • play-circle
  • play-circle-o
  • random
  • step-backward
  • step-forward
  • stop
  • stop-circle
  • stop-circle-o
  • youtube-play
  • 500px
  • adn
  • amazon
  • android
  • angellist
  • apple
  • behance
  • behance-square
  • bitbucket
  • bitbucket-square
  • bitcoin (alias)
  • 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
  • fa (alias)
  • facebook
  • facebook-f (alias)
  • facebook-official
  • facebook-square
  • firefox
  • first-order
  • flickr
  • font-awesome
  • fonticons
  • fort-awesome
  • forumbee
  • foursquare
  • ge (alias)
  • get-pocket
  • gg
  • gg-circle
  • git
  • git-square
  • github
  • github-alt
  • github-square
  • gitlab
  • gittip (alias)
  • glide
  • glide-g
  • google
  • google-plus
  • google-plus-circle (alias)
  • google-plus-official
  • google-plus-square
  • google-wallet
  • gratipay
  • hacker-news
  • houzz
  • html5
  • instagram
  • internet-explorer
  • ioxhost
  • joomla
  • jsfiddle
  • lastfm
  • lastfm-square
  • leanpub
  • linkedin
  • linkedin-square
  • linux
  • maxcdn
  • meanpath
  • medium
  • mixcloud
  • modx
  • odnoklassniki
  • odnoklassniki-square
  • opencart
  • openid
  • opera
  • optin-monster
  • pagelines
  • paypal
  • pied-piper
  • pied-piper-alt
  • pied-piper-pp
  • pinterest
  • pinterest-p
  • pinterest-square
  • product-hunt
  • qq
  • ra (alias)
  • rebel
  • reddit
  • reddit-alien
  • reddit-square
  • renren
  • resistance (alias)
  • 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
  • themeisle
  • trello
  • tripadvisor
  • tumblr
  • tumblr-square
  • twitch
  • twitter
  • twitter-square
  • usb
  • viacoin
  • viadeo
  • viadeo-square
  • vimeo
  • vimeo-square
  • vine
  • vk
  • wechat (alias)
  • weibo
  • weixin
  • whatsapp
  • wikipedia-w
  • windows
  • wordpress
  • wpbeginner
  • wpforms
  • xing
  • xing-square
  • y-combinator
  • y-combinator-square (alias)
  • yahoo
  • yc (alias)
  • yc-square (alias)
  • yelp
  • yoast
  • youtube
  • youtube-play
  • youtube-square
  • ambulance
  • h-square
  • heart
  • heart-o
  • heartbeat
  • hospital-o
  • medkit
  • plus-square
  • stethoscope
  • user-md
  • wheelchair

Place Font Awesome icons just about anywhere with the <i></i> tag.

fa-rocket

<i class="fa fa-rocket"></i> fa-rocket
Icon classes are echoed via CSS :before.

To increase the size of icons relative to its container, use fa-lg (33% increase), fa-2x, fa-3x, fa-4x or fa-5x.

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

<i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro
<i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro
<i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro
<i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro
<i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use the fa-spin class to get any icon to rotate. Works best with fa-spinner, fa-refresh and fa-cog.

Spinning Spinner icon
Spinning Refresh icon
Spinning Cog icon

<i class="fa fa-spinner fa-spin"></i> Spinning Spinner icon
<i class="fa fa-refresh fa-spin"></i> Spinning Refresh icon
<i class="fa fa-cog fa-spin"></i> Spinning Cog icon
CSS3 animations aren’t supported in IE7 – IE9.

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

icon-flip-vertical

<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span> fa-twitter on fa-square-o
<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span> fa-flag on fa-circle
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span> fa-terminal on fa-square
<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span> fa-ban on fa-camera