Skip to content

Instantly share code, notes, and snippets.

@nathos
Created January 30, 2013 21:10
Show Gist options
  • Save nathos/4677025 to your computer and use it in GitHub Desktop.
Save nathos/4677025 to your computer and use it in GitHub Desktop.
Quick 'n' dirty index of the FontAwesome icons, so you can easily copy/paste them into the mockup app of your choice (e.g.: Keynote).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" media="all">
@font-face {
font-family: 'FontAwesome';
src: url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.eot');
src: url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.eot?#iefix') format('eot'), url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.woff') format('woff'), url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.ttf') format('truetype'), url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.otf') format('opentype'), url('http://github.com/FortAwesome/Font-Awesome/raw/master/font/fontawesome-webfont.svg#fontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'FontAwesome';
font-size: 32px;
line-height: 1.5em;
}
pre {
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<pre>
.icon-glass <span class="icon">&#xf000;</span>
.icon-music <span class="icon">&#xf001;</span>
.icon-search <span class="icon">&#xf002;</span>
.icon-envelope <span class="icon">&#xf003;</span>
.icon-heart <span class="icon">&#xf004;</span>
.icon-star <span class="icon">&#xf005;</span>
.icon-star-empty <span class="icon">&#xf006;</span>
.icon-user <span class="icon">&#xf007;</span>
.icon-film <span class="icon">&#xf008;</span>
.icon-th-large <span class="icon">&#xf009;</span>
.icon-th <span class="icon">&#xf00a;</span>
.icon-th-list <span class="icon">&#xf00b;</span>
.icon-ok <span class="icon">&#xf00c;</span>
.icon-remove <span class="icon">&#xf00d;</span>
.icon-zoom-in <span class="icon">&#xf00e;</span>
.icon-zoom-out <span class="icon">&#xf010;</span>
.icon-off <span class="icon">&#xf011;</span>
.icon-signal <span class="icon">&#xf012;</span>
.icon-cog <span class="icon">&#xf013;</span>
.icon-trash <span class="icon">&#xf014;</span>
.icon-home <span class="icon">&#xf015;</span>
.icon-file <span class="icon">&#xf016;</span>
.icon-time <span class="icon">&#xf017;</span>
.icon-road <span class="icon">&#xf018;</span>
.icon-download-alt <span class="icon">&#xf019;</span>
.icon-download <span class="icon">&#xf01a;</span>
.icon-upload <span class="icon">&#xf01b;</span>
.icon-inbox <span class="icon">&#xf01c;</span>
.icon-play-circle <span class="icon">&#xf01d;</span>
.icon-repeat <span class="icon">&#xf01e;</span>
.icon-refresh <span class="icon">&#xf021;</span>
.icon-list-alt <span class="icon">&#xf022;</span>
.icon-lock <span class="icon">&#xf023;</span>
.icon-flag <span class="icon">&#xf024;</span>
.icon-headphones <span class="icon">&#xf025;</span>
.icon-volume-off <span class="icon">&#xf026;</span>
.icon-volume-down <span class="icon">&#xf027;</span>
.icon-volume-up <span class="icon">&#xf028;</span>
.icon-qrcode <span class="icon">&#xf029;</span>
.icon-barcode <span class="icon">&#xf02a;</span>
.icon-tag <span class="icon">&#xf02b;</span>
.icon-tags <span class="icon">&#xf02c;</span>
.icon-book <span class="icon">&#xf02d;</span>
.icon-bookmark <span class="icon">&#xf02e;</span>
.icon-print <span class="icon">&#xf02f;</span>
.icon-camera <span class="icon">&#xf030;</span>
.icon-font <span class="icon">&#xf031;</span>
.icon-bold <span class="icon">&#xf032;</span>
.icon-italic <span class="icon">&#xf033;</span>
.icon-text-height <span class="icon">&#xf034;</span>
.icon-text-width <span class="icon">&#xf035;</span>
.icon-align-left <span class="icon">&#xf036;</span>
.icon-align-center <span class="icon">&#xf037;</span>
.icon-align-right <span class="icon">&#xf038;</span>
.icon-align-justify <span class="icon">&#xf039;</span>
.icon-list <span class="icon">&#xf03a;</span>
.icon-indent-left <span class="icon">&#xf03b;</span>
.icon-indent-right <span class="icon">&#xf03c;</span>
.icon-facetime-video <span class="icon">&#xf03d;</span>
.icon-picture <span class="icon">&#xf03e;</span>
.icon-pencil <span class="icon">&#xf040;</span>
.icon-map-marker <span class="icon">&#xf041;</span>
.icon-adjust <span class="icon">&#xf042;</span>
.icon-tint <span class="icon">&#xf043;</span>
.icon-edit <span class="icon">&#xf044;</span>
.icon-share <span class="icon">&#xf045;</span>
.icon-check <span class="icon">&#xf046;</span>
.icon-move <span class="icon">&#xf047;</span>
.icon-step-backward <span class="icon">&#xf048;</span>
.icon-fast-backward <span class="icon">&#xf049;</span>
.icon-backward <span class="icon">&#xf04a;</span>
.icon-play <span class="icon">&#xf04b;</span>
.icon-pause <span class="icon">&#xf04c;</span>
.icon-stop <span class="icon">&#xf04d;</span>
.icon-forward <span class="icon">&#xf04e;</span>
.icon-fast-forward <span class="icon">&#xf050;</span>
.icon-step-forward <span class="icon">&#xf051;</span>
.icon-eject <span class="icon">&#xf052;</span>
.icon-chevron-left <span class="icon">&#xf053;</span>
.icon-chevron-right <span class="icon">&#xf054;</span>
.icon-plus-sign <span class="icon">&#xf055;</span>
.icon-minus-sign <span class="icon">&#xf056;</span>
.icon-remove-sign <span class="icon">&#xf057;</span>
.icon-ok-sign <span class="icon">&#xf058;</span>
.icon-question-sign <span class="icon">&#xf059;</span>
.icon-info-sign <span class="icon">&#xf05a;</span>
.icon-screenshot <span class="icon">&#xf05b;</span>
.icon-remove-circle <span class="icon">&#xf05c;</span>
.icon-ok-circle <span class="icon">&#xf05d;</span>
.icon-ban-circle <span class="icon">&#xf05e;</span>
.icon-arrow-left <span class="icon">&#xf060;</span>
.icon-arrow-right <span class="icon">&#xf061;</span>
.icon-arrow-up <span class="icon">&#xf062;</span>
.icon-arrow-down <span class="icon">&#xf063;</span>
.icon-share-alt <span class="icon">&#xf064;</span>
.icon-resize-full <span class="icon">&#xf065;</span>
.icon-resize-small <span class="icon">&#xf066;</span>
.icon-plus <span class="icon">&#xf067;</span>
.icon-minus <span class="icon">&#xf068;</span>
.icon-asterisk <span class="icon">&#xf069;</span>
.icon-exclamation-sign <span class="icon">&#xf06a;</span>
.icon-gift <span class="icon">&#xf06b;</span>
.icon-leaf <span class="icon">&#xf06c;</span>
.icon-fire <span class="icon">&#xf06d;</span>
.icon-eye-open <span class="icon">&#xf06e;</span>
.icon-eye-close <span class="icon">&#xf070;</span>
.icon-warning-sign <span class="icon">&#xf071;</span>
.icon-plane <span class="icon">&#xf072;</span>
.icon-calendar <span class="icon">&#xf073;</span>
.icon-random <span class="icon">&#xf074;</span>
.icon-comment <span class="icon">&#xf075;</span>
.icon-magnet <span class="icon">&#xf076;</span>
.icon-chevron-up <span class="icon">&#xf077;</span>
.icon-chevron-down <span class="icon">&#xf078;</span>
.icon-retweet <span class="icon">&#xf079;</span>
.icon-shopping-cart <span class="icon">&#xf07a;</span>
.icon-folder-close <span class="icon">&#xf07b;</span>
.icon-folder-open <span class="icon">&#xf07c;</span>
.icon-resize-vertical <span class="icon">&#xf07d;</span>
.icon-resize-horizontal <span class="icon">&#xf07e;</span>
.icon-bar-chart <span class="icon">&#xf080;</span>
.icon-twitter-sign <span class="icon">&#xf081;</span>
.icon-facebook-sign <span class="icon">&#xf082;</span>
.icon-camera-retro <span class="icon">&#xf083;</span>
.icon-key <span class="icon">&#xf084;</span>
.icon-cogs <span class="icon">&#xf085;</span>
.icon-comments <span class="icon">&#xf086;</span>
.icon-thumbs-up <span class="icon">&#xf087;</span>
.icon-thumbs-down <span class="icon">&#xf088;</span>
.icon-star-half <span class="icon">&#xf089;</span>
.icon-heart-empty <span class="icon">&#xf08a;</span>
.icon-signout <span class="icon">&#xf08b;</span>
.icon-linkedin-sign <span class="icon">&#xf08c;</span>
.icon-pushpin <span class="icon">&#xf08d;</span>
.icon-external-link <span class="icon">&#xf08e;</span>
.icon-signin <span class="icon">&#xf090;</span>
.icon-trophy <span class="icon">&#xf091;</span>
.icon-github-sign <span class="icon">&#xf092;</span>
.icon-upload-alt <span class="icon">&#xf093;</span>
.icon-lemon <span class="icon">&#xf094;</span>
.icon-phone <span class="icon">&#xf095;</span>
.icon-check-empty <span class="icon">&#xf096;</span>
.icon-bookmark-empty <span class="icon">&#xf097;</span>
.icon-phone-sign <span class="icon">&#xf098;</span>
.icon-twitter <span class="icon">&#xf099;</span>
.icon-facebook <span class="icon">&#xf09a;</span>
.icon-github <span class="icon">&#xf09b;</span>
.icon-unlock <span class="icon">&#xf09c;</span>
.icon-credit-card <span class="icon">&#xf09d;</span>
.icon-rss <span class="icon">&#xf09e;</span>
.icon-hdd <span class="icon">&#xf0a0;</span>
.icon-bullhorn <span class="icon">&#xf0a1;</span>
.icon-bell <span class="icon">&#xf0a2;</span>
.icon-certificate <span class="icon">&#xf0a3;</span>
.icon-hand-right <span class="icon">&#xf0a4;</span>
.icon-hand-left <span class="icon">&#xf0a5;</span>
.icon-hand-up <span class="icon">&#xf0a6;</span>
.icon-hand-down <span class="icon">&#xf0a7;</span>
.icon-circle-arrow-left <span class="icon">&#xf0a8;</span>
.icon-circle-arrow-right <span class="icon">&#xf0a9;</span>
.icon-circle-arrow-up <span class="icon">&#xf0aa;</span>
.icon-circle-arrow-down <span class="icon">&#xf0ab;</span>
.icon-globe <span class="icon">&#xf0ac;</span>
.icon-wrench <span class="icon">&#xf0ad;</span>
.icon-tasks <span class="icon">&#xf0ae;</span>
.icon-filter <span class="icon">&#xf0b0;</span>
.icon-briefcase <span class="icon">&#xf0b1;</span>
.icon-fullscreen <span class="icon">&#xf0b2;</span>
.icon-group <span class="icon">&#xf0c0;</span>
.icon-link <span class="icon">&#xf0c1;</span>
.icon-cloud <span class="icon">&#xf0c2;</span>
.icon-beaker <span class="icon">&#xf0c3;</span>
.icon-cut <span class="icon">&#xf0c4;</span>
.icon-copy <span class="icon">&#xf0c5;</span>
.icon-paper-clip <span class="icon">&#xf0c6;</span>
.icon-save <span class="icon">&#xf0c7;</span>
.icon-sign-blank <span class="icon">&#xf0c8;</span>
.icon-reorder <span class="icon">&#xf0c9;</span>
.icon-list-ul <span class="icon">&#xf0ca;</span>
.icon-list-ol <span class="icon">&#xf0cb;</span>
.icon-strikethrough <span class="icon">&#xf0cc;</span>
.icon-underline <span class="icon">&#xf0cd;</span>
.icon-table <span class="icon">&#xf0ce;</span>
.icon-magic <span class="icon">&#xf0d0;</span>
.icon-truck <span class="icon">&#xf0d1;</span>
.icon-pinterest <span class="icon">&#xf0d2;</span>
.icon-pinterest-sign <span class="icon">&#xf0d3;</span>
.icon-google-plus-sign <span class="icon">&#xf0d4;</span>
.icon-google-plus <span class="icon">&#xf0d5;</span>
.icon-money <span class="icon">&#xf0d6;</span>
.icon-caret-down <span class="icon">&#xf0d7;</span>
.icon-caret-up <span class="icon">&#xf0d8;</span>
.icon-caret-left <span class="icon">&#xf0d9;</span>
.icon-caret-right <span class="icon">&#xf0da;</span>
.icon-columns <span class="icon">&#xf0db;</span>
.icon-sort <span class="icon">&#xf0dc;</span>
.icon-sort-down <span class="icon">&#xf0dd;</span>
.icon-sort-up <span class="icon">&#xf0de;</span>
.icon-envelope-alt <span class="icon">&#xf0e0;</span>
.icon-linkedin <span class="icon">&#xf0e1;</span>
.icon-undo <span class="icon">&#xf0e2;</span>
.icon-legal <span class="icon">&#xf0e3;</span>
.icon-dashboard <span class="icon">&#xf0e4;</span>
.icon-comment-alt <span class="icon">&#xf0e5;</span>
.icon-comments-alt <span class="icon">&#xf0e6;</span>
.icon-bolt <span class="icon">&#xf0e7;</span>
.icon-sitemap <span class="icon">&#xf0e8;</span>
.icon-umbrella <span class="icon">&#xf0e9;</span>
.icon-paste <span class="icon">&#xf0ea;</span>
.icon-paste <span class="icon">&#xf0ea;</span>
.icon-lightbulb <span class="icon">&#xf0eb;</span>
.icon-exchange <span class="icon">&#xf0ec;</span>
.icon-cloud-download <span class="icon">&#xf0ed;</span>
.icon-cloud-upload <span class="icon">&#xf0ee;</span>
.icon-user-md <span class="icon">&#xf0f0;</span>
.icon-stethoscope <span class="icon">&#xf0f1;</span>
.icon-suitcase <span class="icon">&#xf0f2;</span>
.icon-bell-alt <span class="icon">&#xf0f3;</span>
.icon-coffee <span class="icon">&#xf0f4;</span>
.icon-food <span class="icon">&#xf0f5;</span>
.icon-file-alt <span class="icon">&#xf0f6;</span>
.icon-building <span class="icon">&#xf0f7;</span>
.icon-hospital <span class="icon">&#xf0f8;</span>
.icon-ambulance <span class="icon">&#xf0f9;</span>
.icon-medkit <span class="icon">&#xf0fa;</span>
.icon-fighter-jet <span class="icon">&#xf0fb;</span>
.icon-beer <span class="icon">&#xf0fc;</span>
.icon-h-sign <span class="icon">&#xf0fd;</span>
.icon-plus-sign-alt <span class="icon">&#xf0fe;</span>
.icon-double-angle-left <span class="icon">&#xf100;</span>
.icon-double-angle-right <span class="icon">&#xf101;</span>
.icon-double-angle-up <span class="icon">&#xf102;</span>
.icon-double-angle-down <span class="icon">&#xf103;</span>
.icon-angle-left <span class="icon">&#xf104;</span>
.icon-angle-right <span class="icon">&#xf105;</span>
.icon-angle-up <span class="icon">&#xf106;</span>
.icon-angle-down <span class="icon">&#xf107;</span>
.icon-desktop <span class="icon">&#xf108;</span>
.icon-laptop <span class="icon">&#xf109;</span>
.icon-tablet <span class="icon">&#xf10a;</span>
.icon-mobile-phone <span class="icon">&#xf10b;</span>
.icon-circle-blank <span class="icon">&#xf10c;</span>
.icon-quote-left <span class="icon">&#xf10d;</span>
.icon-quote-right <span class="icon">&#xf10e;</span>
.icon-spinner <span class="icon">&#xf110;</span>
.icon-circle <span class="icon">&#xf111;</span>
.icon-reply <span class="icon">&#xf112;</span>
.icon-github-alt <span class="icon">&#xf113;</span>
.icon-folder-close-alt <span class="icon">&#xf114;</span>
.icon-folder-open-alt <span class="icon">&#xf115;</span>
</pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment