mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-11-20 11:14:28 +00:00
1434 lines
60 KiB
HTML
1434 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||
<!--[if (gte IE 9)|!(IE)]><!-->
|
||
<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
|
||
<head>
|
||
<!-- Basic Page Needs
|
||
================================================== -->
|
||
<meta charset="utf-8" />
|
||
<title>Font Awesome, the iconic font designed for use with Twitter Bootstrap</title>
|
||
<meta name="description" content="">
|
||
<meta name="author" content="">
|
||
<!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">-->
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||
<![endif]-->
|
||
|
||
<!-- CSS
|
||
================================================== -->
|
||
|
||
<link rel="stylesheet" href="assets/css/site.css">
|
||
<link rel="stylesheet" href="assets/css/prettify.css">
|
||
<link rel="stylesheet" href="assets/css/font-awesome.css">
|
||
<!--[if IE 7]>
|
||
<link rel="stylesheet" href="assets/css/font-awesome-ie7.css">
|
||
<![endif]-->
|
||
<!-- Le fav and touch icons -->
|
||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||
|
||
<script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
|
||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||
|
||
<script type="text/javascript">
|
||
var _gaq = _gaq || [];
|
||
_gaq.push(['_setAccount', 'UA-30136587-1']);
|
||
_gaq.push(['_trackPageview']);
|
||
|
||
(function() {
|
||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body data-spy="scroll" data-target=".navbar">
|
||
|
||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||
<div class="navbar-inner">
|
||
<div class="container">
|
||
<a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a>
|
||
<ul class="nav">
|
||
<li><a href="#whats-new">What's New</a></li>
|
||
<li class="dropdown">
|
||
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
||
Icons
|
||
<i class="icon-caret-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#icons-new">New Icons in 3.1.0</a></li>
|
||
<li class="divider"></li>
|
||
<li class="nav-header">All Icons</li>
|
||
<li><a href="#icons-web-app"><i class="icon-edit"></i> Web Application</a></li>
|
||
<li><a href="#icons-text-editor"><i class="icon-save"></i> Text Editor</a></li>
|
||
<li><a href="#icons-directional"><i class="icon-hand-right"></i> Directional</a></li>
|
||
<li><a href="#icons-video-player"><i class="icon-play"></i> Video Player</a></li>
|
||
<li><a href="#icons-social"><i class="icon-github"></i> Social</a></li>
|
||
<li><a href="#icons-medical"><i class="icon-stethoscope"></i> Medical</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#integration">Integration</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#contribute">Contribute</a></li>
|
||
<li><a href="#roadmap">Roadmap</a></li>
|
||
<li><a href="#license">License</a></li>
|
||
</ul>
|
||
<ul class="nav pull-right">
|
||
<li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="jumbotron">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="span8">
|
||
<div class="hero-content">
|
||
<h1>Font Awesome</h1>
|
||
<p>The iconic font designed for<br>use with Twitter Bootstrap</p>
|
||
<div class="actions">
|
||
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"
|
||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
|
||
<i class="icon-download icon-2x pull-left"></i>
|
||
Download Font<br>Awesome 3.1.0</a>
|
||
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"
|
||
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
|
||
<i class="icon-github icon-2x pull-left"></i>
|
||
View Project<br>on GitHub</a>
|
||
</div>
|
||
<div class="shameless-self-promotion">
|
||
Version 3.1.0 • Created & Maintained by Dave Gandy
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<div id="iconCarousel" class="carousel slide">
|
||
<!-- Carousel items -->
|
||
<div class="carousel-inner">
|
||
<div class="active item"><div><i class="icon-flag"></i></div></div>
|
||
<div class="item"><div><i class="icon-cloud-download"></i></div></div>
|
||
<div class="item"><div><i class="icon-lightbulb"></i></div></div>
|
||
<div class="item"><div><i class="icon-group"></i></div></div>
|
||
<div class="item"><div><i class="icon-ambulance"></i></div></div>
|
||
<div class="item"><div><i class="icon-star-empty"></i></div></div>
|
||
<div class="item"><div><i class="icon-envelope"></i></div></div>
|
||
<div class="item"><div><i class="icon-coffee"></i></div></div>
|
||
<div class="item"><div><i class="icon-medkit"></i></div></div>
|
||
<div class="item"><div><i class="icon-book"></i></div></div>
|
||
<div class="item"><div><i class="icon-fighter-jet"></i></div></div>
|
||
<div class="item"><div><i class="icon-edit"></i></div></div>
|
||
<div class="item"><div><i class="icon-search"></i></div></div>
|
||
<div class="item"><div><i class="icon-beer"></i></div></div>
|
||
<div class="item"><div><i class="icon-quote-left"></i></div></div>
|
||
<div class="item"><div><i class="icon-stethoscope"></i></div></div>
|
||
<div class="item"><div><i class="icon-heart-empty"></i></div></div>
|
||
<div class="item"><div><i class="icon-thumbs-up"></i></div></div>
|
||
</div>
|
||
<!-- Carousel nav -->
|
||
<a class="carousel-control left" href="#iconCarousel" data-slide="prev"
|
||
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
|
||
<i class="icon-arrow-left"></i></a>
|
||
<a class="carousel-control right" href="#iconCarousel" data-slide="next"
|
||
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
|
||
<i class="icon-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="social-buttons">
|
||
<div class="container">
|
||
<span class="watch">
|
||
<a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Watch</a>
|
||
<a id="watchers" class="count btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome">9000+</a>
|
||
</span>
|
||
<span class="fork">
|
||
<a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Fork</a>
|
||
<a id="forks" class="count btn btn-mini" href="#">800+</a>
|
||
</span>
|
||
<span class="follow">
|
||
<a class="btn btn-mini" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter icon-large"></i> Follow @fortaweso_me</a>
|
||
<span id="followers" class="count btn btn-mini">2500+</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<section id="why" class="clearfix">
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><i class="icon-flag"></i> One font, 249 icons</h4>
|
||
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-pencil"></i> CSS control</h4>
|
||
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-fullscreen"></i> Infinite scalability</h4>
|
||
Scalable vector graphics means every icon looks awesome at any size.
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><i class="icon-beer"></i> Free, as in Beer</h4>
|
||
Font Awesome is completely free for commercial use. Check out the <a href="#license">license</a>.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-ok"></i> IE7 Support</h4>
|
||
Font Awesome supports IE7. If you need it, you have my condolences.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4>
|
||
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><i class="icon-thumbs-up"></i> Made for Twitter Bootstrap</h4>
|
||
Designed from scratch to be fully compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.2.2</a>.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-tint"></i> Designer Friendly</h4>
|
||
Install FontAwesome.otf and <a href="design.html" target="_blank">visit the copy & paste page</a>. Happy designing.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-search"></i> Screen reader compatible</h4>
|
||
Font Awesome won't trip up screen readers, unlike other icon fonts.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="whats-new">
|
||
<h2 class="page-header">What's new in Font Awesome 3.0</h2>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
|
||
Every single icon re-created from the ground up to be optimized for Bootstrap's default 14px.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
|
||
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">subset</a> to get just the icons you need.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4>
|
||
SIL open font license, MIT license for code. No more attribution required, but much appreciated.
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><i class="icon-lightbulb"></i> 40 New Icons in 3.0</h4>
|
||
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4>
|
||
<a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
|
||
</div>
|
||
<div class="span4">
|
||
<h4><i class="icon-resize-small"></i> 28% Smaller Payload</h4>
|
||
3.0 is smaller, even with 16% more icons. Crazy small if you <a target="_blank" href="http://icnfnt.com/">subset</a> just the icons you need.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-new" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">New Icons in 3.1.0</h2>
|
||
<p>
|
||
You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. New icons can be requested on the
|
||
<a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>. Or even
|
||
better, you can <a href="#contribute">contribute your own icons</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-smile"></i> icon-smile</li>
|
||
<li><i class="icon-frown"></i> icon-frown</li>
|
||
<li><i class="icon-meh"></i> icon-meh</li>
|
||
<li><i class="icon-gamepad"></i> icon-gamepad</li>
|
||
<li><i class="icon-keyboard"></i> icon-keyboard</li>
|
||
<li><i class="icon-flag-alt"></i> icon-flag-alt</li>
|
||
<li><i class="icon-flag-checkered"></i> icon-flag-checkered</li>
|
||
<li><i class="icon-terminal"></i> icon-terminal</li>
|
||
<li><i class="icon-code"></i> icon-code</li>
|
||
<li><i class="icon-mail-forward"></i> icon-mail-forward <span class="muted">(alias)</span></li>
|
||
<li><i class="icon-mail-reply"></i> icon-mail-reply <span class="muted">(alias)</span></li>
|
||
<li><i class="icon-reply-all"></i> icon-reply-all</li>
|
||
<li><i class="icon-mail-reply-all"></i> icon-mail-reply-all <span class="muted">(alias)</span></li>
|
||
<li><i class="icon-mail-reply-all"></i> icon-mail-reply-all</li>
|
||
<li><i class="icon-star-half-empty"></i> icon-star-half-empty</li>
|
||
<li><i class="icon-location-arrow"></i> icon-location-arrow</li>
|
||
<li><i class="icon-rotate-left"></i> icon-rotate-left <span class="muted">(alias)</span></li>
|
||
<li><i class="icon-rotate-right"></i> icon-rotate-right <span class="muted">(alias)</span></li>
|
||
<li><i class="icon-crop"></i> icon-crop</li>
|
||
<li><i class="icon-code-fork"></i> icon-code-fork</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-web-app" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Web Application Icons</h2>
|
||
</div>
|
||
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-adjust"></i> icon-adjust</li>
|
||
<li><i class="icon-asterisk"></i> icon-asterisk</li>
|
||
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
|
||
<li><i class="icon-bar-chart"></i> icon-bar-chart</li>
|
||
<li><i class="icon-barcode"></i> icon-barcode</li>
|
||
<li><i class="icon-beaker"></i> icon-beaker</li>
|
||
<li><i class="icon-beer"></i> icon-beer</li>
|
||
<li><i class="icon-bell"></i> icon-bell</li>
|
||
<li><i class="icon-bell-alt"></i> icon-bell-alt</li>
|
||
<li><i class="icon-bolt"></i> icon-bolt</li>
|
||
<li><i class="icon-book"></i> icon-book</li>
|
||
<li><i class="icon-bookmark"></i> icon-bookmark</li>
|
||
<li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
|
||
<li><i class="icon-briefcase"></i> icon-briefcase</li>
|
||
<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
|
||
<li><i class="icon-calendar"></i> icon-calendar</li>
|
||
<li><i class="icon-camera"></i> icon-camera</li>
|
||
<li><i class="icon-camera-retro"></i> icon-camera-retro</li>
|
||
<li><i class="icon-certificate"></i> icon-certificate</li>
|
||
<li><i class="icon-check"></i> icon-check</li>
|
||
<li><i class="icon-check-empty"></i> icon-check-empty</li>
|
||
<li><i class="icon-circle"></i> icon-circle</li>
|
||
<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
|
||
<li><i class="icon-cloud"></i> icon-cloud</li>
|
||
<li><i class="icon-cloud-download"></i> icon-cloud-download</li>
|
||
<li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
|
||
<li><i class="icon-coffee"></i> icon-coffee</li>
|
||
<li><i class="icon-cog"></i> icon-cog</li>
|
||
<li><i class="icon-cogs"></i> icon-cogs</li>
|
||
<li><i class="icon-comment"></i> icon-comment</li>
|
||
<li><i class="icon-comment-alt"></i> icon-comment-alt</li>
|
||
<li><i class="icon-comments"></i> icon-comments</li>
|
||
<li><i class="icon-comments-alt"></i> icon-comments-alt</li>
|
||
<li><i class="icon-credit-card"></i> icon-credit-card</li>
|
||
<li><i class="icon-dashboard"></i> icon-dashboard</li>
|
||
<li><i class="icon-desktop"></i> icon-desktop</li>
|
||
<li><i class="icon-download"></i> icon-download</li>
|
||
<li><i class="icon-download-alt"></i> icon-download-alt</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-edit"></i> icon-edit</li>
|
||
<li><i class="icon-envelope"></i> icon-envelope</li>
|
||
<li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
|
||
<li><i class="icon-exchange"></i> icon-exchange</li>
|
||
<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
|
||
<li><i class="icon-external-link"></i> icon-external-link</li>
|
||
<li><i class="icon-eye-close"></i> icon-eye-close</li>
|
||
<li><i class="icon-eye-open"></i> icon-eye-open</li>
|
||
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
|
||
<li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
|
||
<li><i class="icon-film"></i> icon-film</li>
|
||
<li><i class="icon-filter"></i> icon-filter</li>
|
||
<li><i class="icon-fire"></i> icon-fire</li>
|
||
<li><i class="icon-flag"></i> icon-flag</li>
|
||
<li><i class="icon-folder-close"></i> icon-folder-close</li>
|
||
<li><i class="icon-folder-open"></i> icon-folder-open</li>
|
||
<li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
|
||
<li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
|
||
<li><i class="icon-food"></i> icon-food</li>
|
||
<li><i class="icon-gift"></i> icon-gift</li>
|
||
<li><i class="icon-glass"></i> icon-glass</li>
|
||
<li><i class="icon-globe"></i> icon-globe</li>
|
||
<li><i class="icon-group"></i> icon-group</li>
|
||
<li><i class="icon-hdd"></i> icon-hdd</li>
|
||
<li><i class="icon-headphones"></i> icon-headphones</li>
|
||
<li><i class="icon-heart"></i> icon-heart</li>
|
||
<li><i class="icon-heart-empty"></i> icon-heart-empty</li>
|
||
<li><i class="icon-home"></i> icon-home</li>
|
||
<li><i class="icon-inbox"></i> icon-inbox</li>
|
||
<li><i class="icon-info-sign"></i> icon-info-sign</li>
|
||
<li><i class="icon-key"></i> icon-key</li>
|
||
<li><i class="icon-leaf"></i> icon-leaf</li>
|
||
<li><i class="icon-laptop"></i> icon-laptop</li>
|
||
<li><i class="icon-legal"></i> icon-legal</li>
|
||
<li><i class="icon-lemon"></i> icon-lemon</li>
|
||
<li><i class="icon-lightbulb"></i> icon-lightbulb</li>
|
||
<li><i class="icon-lock"></i> icon-lock</li>
|
||
<li><i class="icon-unlock"></i> icon-unlock</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-magic"></i> icon-magic</li>
|
||
<li><i class="icon-magnet"></i> icon-magnet</li>
|
||
<li><i class="icon-map-marker"></i> icon-map-marker</li>
|
||
<li><i class="icon-minus"></i> icon-minus</li>
|
||
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
|
||
<li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
|
||
<li><i class="icon-money"></i> icon-money</li>
|
||
<li><i class="icon-move"></i> icon-move</li>
|
||
<li><i class="icon-music"></i> icon-music</li>
|
||
<li><i class="icon-off"></i> icon-off</li>
|
||
<li><i class="icon-ok"></i> icon-ok</li>
|
||
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
|
||
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
|
||
<li><i class="icon-pencil"></i> icon-pencil</li>
|
||
<li><i class="icon-picture"></i> icon-picture</li>
|
||
<li><i class="icon-plane"></i> icon-plane</li>
|
||
<li><i class="icon-plus"></i> icon-plus</li>
|
||
<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
|
||
<li><i class="icon-print"></i> icon-print</li>
|
||
<li><i class="icon-pushpin"></i> icon-pushpin</li>
|
||
<li><i class="icon-qrcode"></i> icon-qrcode</li>
|
||
<li><i class="icon-question-sign"></i> icon-question-sign</li>
|
||
<li><i class="icon-quote-left"></i> icon-quote-left</li>
|
||
<li><i class="icon-quote-right"></i> icon-quote-right</li>
|
||
<li><i class="icon-random"></i> icon-random</li>
|
||
<li><i class="icon-refresh"></i> icon-refresh</li>
|
||
<li><i class="icon-remove"></i> icon-remove</li>
|
||
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
|
||
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
|
||
<li><i class="icon-reorder"></i> icon-reorder</li>
|
||
<li><i class="icon-reply"></i> icon-reply</li>
|
||
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
|
||
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
|
||
<li><i class="icon-retweet"></i> icon-retweet</li>
|
||
<li><i class="icon-road"></i> icon-road</li>
|
||
<li><i class="icon-rss"></i> icon-rss</li>
|
||
<li><i class="icon-screenshot"></i> icon-screenshot</li>
|
||
<li><i class="icon-search"></i> icon-search</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-share"></i> icon-share</li>
|
||
<li><i class="icon-share-alt"></i> icon-share-alt</li>
|
||
<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
|
||
<li><i class="icon-signal"></i> icon-signal</li>
|
||
<li><i class="icon-signin"></i> icon-signin</li>
|
||
<li><i class="icon-signout"></i> icon-signout</li>
|
||
<li><i class="icon-sitemap"></i> icon-sitemap</li>
|
||
<li><i class="icon-sort"></i> icon-sort</li>
|
||
<li><i class="icon-sort-down"></i> icon-sort-down</li>
|
||
<li><i class="icon-sort-up"></i> icon-sort-up</li>
|
||
<li><i class="icon-spinner"></i> icon-spinner</li>
|
||
<li><i class="icon-star"></i> icon-star</li>
|
||
<li><i class="icon-star-empty"></i> icon-star-empty</li>
|
||
<li><i class="icon-star-half"></i> icon-star-half</li>
|
||
<li><i class="icon-tablet"></i> icon-tablet</li>
|
||
<li><i class="icon-tag"></i> icon-tag</li>
|
||
<li><i class="icon-tags"></i> icon-tags</li>
|
||
<li><i class="icon-tasks"></i> icon-tasks</li>
|
||
<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
|
||
<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
|
||
<li><i class="icon-time"></i> icon-time</li>
|
||
<li><i class="icon-tint"></i> icon-tint</li>
|
||
<li><i class="icon-trash"></i> icon-trash</li>
|
||
<li><i class="icon-trophy"></i> icon-trophy</li>
|
||
<li><i class="icon-truck"></i> icon-truck</li>
|
||
<li><i class="icon-umbrella"></i> icon-umbrella</li>
|
||
<li><i class="icon-upload"></i> icon-upload</li>
|
||
<li><i class="icon-upload-alt"></i> icon-upload-alt</li>
|
||
<li><i class="icon-user"></i> icon-user</li>
|
||
<li><i class="icon-user-md"></i> icon-user-md</li>
|
||
<li><i class="icon-volume-off"></i> icon-volume-off</li>
|
||
<li><i class="icon-volume-down"></i> icon-volume-down</li>
|
||
<li><i class="icon-volume-up"></i> icon-volume-up</li>
|
||
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
|
||
<li><i class="icon-wrench"></i> icon-wrench</li>
|
||
<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
|
||
<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-text-editor" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Text Editor Icons</h2>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-file"></i> icon-file</li>
|
||
<li><i class="icon-file-alt"></i> icon-file-alt</li>
|
||
<li><i class="icon-cut"></i> icon-cut</li>
|
||
<li><i class="icon-copy"></i> icon-copy</li>
|
||
<li><i class="icon-paste"></i> icon-paste</li>
|
||
<li><i class="icon-save"></i> icon-save</li>
|
||
<li><i class="icon-undo"></i> icon-undo</li>
|
||
<li><i class="icon-repeat"></i> icon-repeat</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-text-height"></i> icon-text-height</li>
|
||
<li><i class="icon-text-width"></i> icon-text-width</li>
|
||
<li><i class="icon-align-left"></i> icon-align-left</li>
|
||
<li><i class="icon-align-center"></i> icon-align-center</li>
|
||
<li><i class="icon-align-right"></i> icon-align-right</li>
|
||
<li><i class="icon-align-justify"></i> icon-align-justify</li>
|
||
<li><i class="icon-indent-left"></i> icon-indent-left</li>
|
||
<li><i class="icon-indent-right"></i> icon-indent-right</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-font"></i> icon-font</li>
|
||
<li><i class="icon-bold"></i> icon-bold</li>
|
||
<li><i class="icon-italic"></i> icon-italic</li>
|
||
<li><i class="icon-strikethrough"></i> icon-strikethrough</li>
|
||
<li><i class="icon-underline"></i> icon-underline</li>
|
||
<li><i class="icon-link"></i> icon-link</li>
|
||
<li><i class="icon-paper-clip"></i> icon-paper-clip</li>
|
||
<li><i class="icon-columns"></i> icon-columns</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-table"></i> icon-table</li>
|
||
<li><i class="icon-th-large"></i> icon-th-large</li>
|
||
<li><i class="icon-th"></i> icon-th</li>
|
||
<li><i class="icon-th-list"></i> icon-th-list</li>
|
||
<li><i class="icon-list"></i> icon-list</li>
|
||
<li><i class="icon-list-ol"></i> icon-list-ol</li>
|
||
<li><i class="icon-list-ul"></i> icon-list-ul</li>
|
||
<li><i class="icon-list-alt"></i> icon-list-alt</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-directional" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Directional Icons</h2>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-angle-left"></i> icon-angle-left</li>
|
||
<li><i class="icon-angle-right"></i> icon-angle-right</li>
|
||
<li><i class="icon-angle-up"></i> icon-angle-up</li>
|
||
<li><i class="icon-angle-down"></i> icon-angle-down</li>
|
||
<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
|
||
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
|
||
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
|
||
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-caret-down"></i> icon-caret-down</li>
|
||
<li><i class="icon-caret-left"></i> icon-caret-left</li>
|
||
<li><i class="icon-caret-right"></i> icon-caret-right</li>
|
||
<li><i class="icon-caret-up"></i> icon-caret-up</li>
|
||
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
|
||
<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
|
||
<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
|
||
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
|
||
<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
|
||
<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
|
||
<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
|
||
<li><i class="icon-double-angle-left"></i> icon-double-angle-left</li>
|
||
<li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
|
||
<li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
|
||
<li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-hand-down"></i> icon-hand-down</li>
|
||
<li><i class="icon-hand-left"></i> icon-hand-left</li>
|
||
<li><i class="icon-hand-right"></i> icon-hand-right</li>
|
||
<li><i class="icon-hand-up"></i> icon-hand-up</li>
|
||
<li><i class="icon-circle"></i> icon-circle</li>
|
||
<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-video-player" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Video Player Icons</h2>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-play-circle"></i> icon-play-circle</li>
|
||
<li><i class="icon-play"></i> icon-play</li>
|
||
<li><i class="icon-pause"></i> icon-pause</li>
|
||
<li><i class="icon-stop"></i> icon-stop</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-step-backward"></i> icon-step-backward</li>
|
||
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
|
||
<li><i class="icon-backward"></i> icon-backward</li>
|
||
<li><i class="icon-forward"></i> icon-forward</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
|
||
<li><i class="icon-step-forward"></i> icon-step-forward</li>
|
||
<li><i class="icon-eject"></i> icon-eject</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-fullscreen"></i> icon-fullscreen</li>
|
||
<li><i class="icon-resize-full"></i> icon-resize-full</li>
|
||
<li><i class="icon-resize-small"></i> icon-resize-small</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-social" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Social Icons</h2>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-phone"></i> icon-phone</li>
|
||
<li><i class="icon-phone-sign"></i> icon-phone-sign</li>
|
||
<li><i class="icon-facebook"></i> icon-facebook</li>
|
||
<li><i class="icon-facebook-sign"></i> icon-facebook-sign</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-twitter"></i> icon-twitter</li>
|
||
<li><i class="icon-twitter-sign"></i> icon-twitter-sign</li>
|
||
<li><i class="icon-github"></i> icon-github</li>
|
||
<li><i class="icon-github-alt"></i> icon-github-alt</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-github-sign"></i> icon-github-sign</li>
|
||
<li><i class="icon-linkedin"></i> icon-linkedin</li>
|
||
<li><i class="icon-linkedin-sign"></i> icon-linkedin-sign</li>
|
||
<li><i class="icon-pinterest"></i> icon-pinterest</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-pinterest-sign"></i> icon-pinterest-sign</li>
|
||
<li><i class="icon-google-plus"></i> icon-google-plus</li>
|
||
<li><i class="icon-google-plus-sign"></i> icon-google-plus-sign</li>
|
||
<li><i class="icon-sign-blank"></i> icon-sign-blank</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="icons-medical" class="row">
|
||
<div class="span12">
|
||
<h2 class="page-header">Medical Icons <small>Want to change healthcare? Work with me at <a href="#kyruus">Kyruus</a>.</small></h2>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-ambulance"></i> icon-ambulance</li>
|
||
<li><i class="icon-beaker"></i> icon-beaker</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-h-sign"></i> icon-h-sign</li>
|
||
<li><i class="icon-hospital"></i> icon-hospital</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-medkit"></i> icon-medkit</li>
|
||
<li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
|
||
</ul>
|
||
</div>
|
||
<div class="span3">
|
||
<ul class="the-icons">
|
||
<li><i class="icon-stethoscope"></i> icon-stethoscope</li>
|
||
<li><i class="icon-user-md"></i> icon-user-md</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="integration">
|
||
<h2 class="page-header">Integration</h2>
|
||
<p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Easy Bootstrap + Font Awesome Integration</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Use this method to integrate Font Awesome with the default Bootstrap CSS.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<ol>
|
||
<li>Copy the Font Awesome font directory into your project.</li>
|
||
<li>Copy font-awesome.min.css into your project.</li>
|
||
<li>
|
||
Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place.
|
||
<p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your CSS directory.</p>
|
||
</li>
|
||
<li>
|
||
In the <code><head></code> of your html, reference the location to your font-awesome.min.css.
|
||
<pre class="prettyprint linenums">
|
||
<link rel="stylesheet" href="../css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="../css/font-awesome.min.css">
|
||
</pre>
|
||
</li>
|
||
<li>Check out the examples to start using Font Awesome!</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Custom Bootstrap + Font Awesome Integration using LESS</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Use this method to integrate Font Awesome with Twitter Bootstrap using LESS.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<ol>
|
||
<li>Copy the Font Awesome font directory into your project.</li>
|
||
<li>Copy font-awesome.less into your bootstrap/less directory.</li>
|
||
<li>Open bootstrap.less and replace <code>@import "sprites.less";</code> with <code>@import "font-awesome.less";</code></li>
|
||
<li>
|
||
Open your project's font-awesome.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory.
|
||
<pre class="prettyprint linenums">
|
||
@FontAwesomePath: "../font";
|
||
</pre>
|
||
<p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p>
|
||
</li>
|
||
<li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li>
|
||
<li>Check out the examples to start using Font Awesome!</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Custom Bootstrap + Font Awesome Integration using SASS or SCSS</h4>
|
||
<p>I have never used either, so let me know if the included SCSS or SASS files have issues.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Not using Bootstrap?</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Font Awesome works just as well without Twitter Bootstrap.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<ol>
|
||
<li>Copy the Font Awesome font directory into your project.</li>
|
||
<li>Copy font-awesome.less or font-awesome.min.css into your project.</li>
|
||
<li>Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).</li>
|
||
<li>Check out the examples to start using Font Awesome!</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Need IE7 Support?</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Font Awesome supports IE7. If you need it, you have my condolences.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<ol>
|
||
<li>Get Font Awesome working properly in a modern browser.</li>
|
||
<li>Copy font-awesome-ie7.min.css into your project.</li>
|
||
<li>
|
||
In the <code><head></code> of your html, reference the location to your font-awesome-ie7.min.css.
|
||
<pre class="prettyprint linenums">
|
||
<link rel="stylesheet" href="../css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="../css/font-awesome.min.css">
|
||
<!--[if IE 7]>
|
||
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
|
||
<![endif]-->
|
||
</pre>
|
||
</li>
|
||
<li>Go complain to whoever decided your project needs IE7 support.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="examples">
|
||
<h2 class="page-header">Examples</h2>
|
||
<p>Many examples re-used from the Twitter Bootstrap documentation.</p>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<div class="well well-transparent">
|
||
<p>Use Font Awesome icons in:</p>
|
||
<ul class="icons">
|
||
<li><i class="icon-ok"></i>Bulleted lists (like this one)</li>
|
||
<li><i class="icon-ok"></i>Buttons</li>
|
||
<li><i class="icon-ok"></i>Button groups</li>
|
||
<li><i class="icon-ok"></i>Navigation</li>
|
||
<li><i class="icon-ok"></i>Prepended form inputs</li>
|
||
<li><i class="icon-ok"></i>And many more with Custom CSS</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<p>
|
||
<a class="btn" href="#"><i class="icon-repeat"></i> Reload</a>
|
||
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a>
|
||
<a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> Delete</a>
|
||
</p>
|
||
<p>
|
||
<a class="btn btn-large btn-primary" href="#"><i class="icon-comment"></i> Comment</a>
|
||
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
|
||
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign"></i> Info</a>
|
||
</p>
|
||
<div class="well" style="padding: 8px 0;">
|
||
<ul class="nav nav-list">
|
||
<li class="active"><a href="#"><i class="icon-home"></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="icon-cogs"></i> Settings</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<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 class="btn-group">
|
||
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
|
||
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></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>
|
||
</div>
|
||
<form>
|
||
<div class="control-group">
|
||
<div class="controls">
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-envelope"></i></span>
|
||
<input class="span2" id="inputIcon" type="text" placeholder="Email address">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<div class="controls">
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-key"></i></span>
|
||
<input class="span2" id="inputIcon2" type="text" placeholder="Password">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div>
|
||
<span class="rating">
|
||
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="page-header">New Styles in 3.0</h3>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
|
||
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
|
||
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. Lots of new possibilities.
|
||
</div>
|
||
<div class="span4">
|
||
<div class="well well-large well-transparent lead">
|
||
<i class="icon-spinner icon-spin icon-2x pull-left"></i> Spinner icon when loading content...
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<p>
|
||
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
|
||
</p>
|
||
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="page-header">Example HTML</h3>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Inline Icons</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Place Font Awesome icons just about anywhere with the <code><i></code> tag.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<div class="well well-transparent">
|
||
<div style="font-size: 24px; line-height: 1.5em;">
|
||
<i class="icon-camera-retro"></i> icon-camera-retro
|
||
</div>
|
||
</div>
|
||
<pre class="prettyprint linenums">
|
||
<i class="icon-camera-retro"></i> icon-camera-retro
|
||
</pre>
|
||
<div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Larger Icons</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
|
||
<code>icon-3x</code>, or <code>icon-4x</code>.
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<p>
|
||
Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
|
||
<code>icon-3x</code>, or <code>icon-4x</code> classes.
|
||
</p>
|
||
<div class="well well-transparent">
|
||
<div style="font-size: 24px; line-height: 1.5em;">
|
||
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
|
||
</div>
|
||
</div>
|
||
<pre class="prettyprint linenums">
|
||
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
|
||
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
|
||
</pre>
|
||
<div class="alert alert-info">
|
||
<i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
|
||
sufficient line-height.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Animated Spinner</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
Use the <code>icon-spin</code> class to get any icon to rotate. Works best with <code>icon-spinner</code> and
|
||
<code>icon-refresh</code>.
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<div class="well well-large well-transparent lead">
|
||
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
|
||
</div>
|
||
<pre class="prettyprint linenums">
|
||
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
|
||
</pre>
|
||
<p class="alert alert-info">
|
||
<i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span3">
|
||
|
||
</div>
|
||
<div class="span9">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Bordered & Pulled Icons</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
|
||
article graphics.
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<div class="well well-large well-transparent">
|
||
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
|
||
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
|
||
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
|
||
of them in any combination to get lots of new possibilities.
|
||
</div>
|
||
<pre class="prettyprint linenums">
|
||
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
|
||
Use a few of the new styles together ... lots of new possibilities.
|
||
</pre>
|
||
<div class="well well-large well-transparent">
|
||
<i class="icon-flag icon-4x pull-left icon-border"></i>
|
||
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
|
||
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
|
||
of them in any combination to get lots of new possibilities.
|
||
</div>
|
||
<pre class="prettyprint linenums">
|
||
<i class="icon-flag icon-4x pull-left icon-border"></i>
|
||
Use a few of the new styles together ... lots of new possibilities.
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Buttons</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
<a class="btn" href="#">
|
||
<i class="icon-repeat"></i> Reload</a>
|
||
<a class="btn btn-success" href="#">
|
||
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
|
||
</p>
|
||
<p>
|
||
<a class="btn btn-large btn-primary" href="#">
|
||
<i class="icon-comment"></i> Comment</a>
|
||
<a class="btn btn-small btn-info" href="#">
|
||
<i class="icon-info-sign"></i> Info</a>
|
||
</p>
|
||
<p>
|
||
<a class="btn btn-danger" href="#">
|
||
<i class="icon-trash icon-large"></i> Delete</a>
|
||
<a class="btn btn-small" href="#">
|
||
<i class="icon-cog"></i> Settings</a>
|
||
</p>
|
||
<p>
|
||
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
|
||
</p>
|
||
<p>
|
||
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
|
||
</p>
|
||
|
||
</div>
|
||
<div class="span9">
|
||
<p>
|
||
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
|
||
<code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>.
|
||
</p>
|
||
<pre class="prettyprint linenums">
|
||
<a class="btn" href="#">
|
||
<i class="icon-repeat"></i> Reload</a>
|
||
<a class="btn btn-success" href="#">
|
||
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
|
||
<a class="btn btn-large btn-primary" href="#">
|
||
<i class="icon-comment"></i> Comment</a>
|
||
<a class="btn btn-small btn-info" href="#">
|
||
<i class="icon-info-sign"></i> Info</a>
|
||
<a class="btn btn-danger" href="#">
|
||
<i class="icon-trash icon-large"></i> Delete</a>
|
||
<a class="btn btn-small" href="#">
|
||
<i class="icon-cog"></i> Settings</a>
|
||
<a class="btn btn-large btn-danger" href="#">
|
||
<i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
|
||
<a class="btn btn-primary" href="#">
|
||
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Button groups</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
<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>
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<pre class="prettyprint linenums">
|
||
<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>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Button dropdowns</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
<div class="btn-group open">
|
||
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
|
||
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
||
<span class="icon-caret-down"></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>
|
||
</div>
|
||
</p>
|
||
<div class="span9">
|
||
<pre class="prettyprint linenums">
|
||
<div class="btn-group open">
|
||
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
|
||
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></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>
|
||
</pre>
|
||
<div class="alert alert-info"><i class="icon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Lists</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
<ul class="icons">
|
||
<li><i class="icon-ok"></i> Lists</li>
|
||
<li><i class="icon-ok"></i> Buttons</li>
|
||
<li><i class="icon-ok"></i> Button groups</li>
|
||
<li><i class="icon-ok"></i> Navigation</li>
|
||
<li><i class="icon-ok"></i> Prepended form inputs</li>
|
||
</ul>
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<p>Easily replace individual bullets.</p>
|
||
<pre class="prettyprint linenums">
|
||
<ul class="icons">
|
||
<li><i class="icon-ok"></i> Lists</li>
|
||
<li><i class="icon-ok"></i> Buttons</li>
|
||
<li><i class="icon-ok"></i> Button groups</li>
|
||
<li><i class="icon-ok"></i> Navigation</li>
|
||
<li><i class="icon-ok"></i> Prepended form inputs</li>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Navigation</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<div class="well" style="padding: 8px 0;">
|
||
<ul class="nav nav-list">
|
||
<li class="active"><a href="#"><i class="icon-home"></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="icon-cogs"></i> Settings</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="span9">
|
||
<p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
|
||
<pre class="prettyprint linenums">
|
||
<ul class="nav nav-list">
|
||
<li class="active"><a href="#"><i class="icon-home"></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="icon-cogs"></i> Settings</a></li>
|
||
</ul>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Prepended form inputs</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>
|
||
<form>
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-envelope"></i></span>
|
||
<input class="span2" type="text" placeholder="Email address">
|
||
</div>
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-key"></i></span>
|
||
<input class="span2" type="password" placeholder="Password">
|
||
</div>
|
||
</form>
|
||
</p>
|
||
</div>
|
||
<div class="span9">
|
||
<pre class="prettyprint linenums">
|
||
<form>
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-envelope"></i></span>
|
||
<input class="span2" type="text" placeholder="Email address">
|
||
</div>
|
||
<div class="input-prepend">
|
||
<span class="add-on"><i class="icon-key"></i></span>
|
||
<input class="span2" type="password" placeholder="Password">
|
||
</div>
|
||
</form>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<h4>Custom CSS</h4>
|
||
</div>
|
||
<div class="span3">
|
||
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
|
||
</div>
|
||
<div class="span9">
|
||
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
|
||
<div class="well">
|
||
<span class="rating">
|
||
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contribute">
|
||
<h2 class="page-header">Contribute Icons to Font Awesome</h2>
|
||
<div class="row">
|
||
<div class="span3">
|
||
<img class="img-rounded" src="assets/img/contribution-sample.png">
|
||
</div>
|
||
<div class="span9">
|
||
<p class="lead">
|
||
Want to help make Font Awesome even more awesome? Contribute back to the Font Awesome community by designing
|
||
new pictograms for the set.
|
||
</p>
|
||
<p>
|
||
If selected, you'll retain the CC-BY license to your pictogram and get attribution
|
||
right here on the Font Awesome site.
|
||
</p>
|
||
<h3>How to Submit New Icons</h3>
|
||
<ol>
|
||
<li>Download the <a href="assets/img/icon-flag.pdf">icon-flag.pdf template</a>.</li>
|
||
<li>
|
||
Open the PDF in Adobe Illustrator. You'll notice the file has dimensions of 60x56. This is exactly 4x the
|
||
max icon size of 15 wide by 14 tall. The template is an example of the flag icon to use as a guide.
|
||
</li>
|
||
<li>
|
||
Design your icon. In order to make it into the set, your icon must look pixel perfect. The easiest way to do
|
||
this is to make sure your line widths in the template are some multiple of 4px. Diagonals are rough, too.
|
||
Don't split pixels right down the middle, as they blur more when rendering. Zoom out to 25% to get a good idea
|
||
of how it will render in the font.
|
||
</li>
|
||
<li>
|
||
Submit your icon. Drop me an email at <a href="mailto:dave@davegandy.com">dave@davegandy.com</a>. Make sure to
|
||
use the subject <code>[Font Awesome] [Icon Contribution] icon-name</code> and attach your PDF file. If your
|
||
icon makes it into Font Awesome (I'm keeping a very tight reign on quality), I'll ask what contact info you'd
|
||
like to use for attribution.
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section id="roadmap">
|
||
<h2 class="page-header">Roadmap</h2>
|
||
<p>Here's the plan for future updates.</p>
|
||
<ul class="icons">
|
||
<li><i class="icon-plus"></i>Easier sub-setting with icon packs.</li>
|
||
<li><i class="icon-plus"></i>More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li>
|
||
<li><i class="icon-plus"></i>Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="license">
|
||
<h2 class="page-header">License</h2>
|
||
<ul>
|
||
<li>The Font Awesome font is licensed under the <a href="http://scripts.sil.org/OFL" target="_blank">SIL Open Font License - http://scripts.sil.org/OFL</a>.</li>
|
||
<li>Font Awesome CSS, LESS, and SASS files are licensed under the <a href="http://opensource.org/licenses/mit-license.html" target="_blank">MIT License - http://opensource.org/licenses/mit-license.html</a>.</li>
|
||
<li>The Font Awesome pictograms are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/</a></li>
|
||
<li>Attribution is no longer required in Font Awesome 3.0, but much appreciated: <code>Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome</code>.</li>
|
||
</ul>
|
||
<p></p>
|
||
<p></p>
|
||
</section>
|
||
|
||
<section id="kyruus">
|
||
<h2 class="page-header"><a href="http://kyruus.com" target="_blank">Kyruus</a></h2>
|
||
<div class="row">
|
||
<div class="span7">
|
||
<p>
|
||
I'm the lead product designer at Kyruus. I wake up every single day excited about my job.
|
||
Why? <strong>Kyruus is going to change healthcare.</strong> No exaggeration.
|
||
</p>
|
||
|
||
<p>
|
||
Kyruus is a well-funded, big data healthcare startup in Boston. We believe that the right data at the right time
|
||
can help doctors make better decisions. <strong>We believe data can save lives.</strong>
|
||
</p>
|
||
|
||
What I love about Kyruus:
|
||
<ul class="unstyled">
|
||
<li><i class="icon-pencil icon-2x pull-left"></i> Product design. From the top of the organization, Kyruus is committed to product design done right. It's awesome.</li>
|
||
<li><i class="icon-globe icon-2x pull-left"></i> Purpose. Every day, I get to help make the world a better place – a little at a time.</li>
|
||
<li><i class="icon-group icon-2x pull-left"></i> People. I work with some of the best people I've ever met. More than just smart people. Good people.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
<strong>Kyruus needs good people.</strong> Designers, app developers, big data masters, & interns that get real responsibility. Come work with me.
|
||
</p>
|
||
|
||
Interested? <a href="mailto:dave@davegandy.com">Email me.</a>
|
||
</div>
|
||
<div class="span5">
|
||
<div class="border pull-right text-align-center">
|
||
<a href="http://kyruus.com" target="_blank">
|
||
<i class="icon-medkit"></i><br>
|
||
Work with me at Kyruus
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="say-thanks">
|
||
<h2 class="page-header">Say Thanks <small></small></h2>
|
||
<div class="row">
|
||
<div class="span12">
|
||
<p class="lead">
|
||
<i class="icon-gift icon-4x pull-left"></i>
|
||
Hopefully you think Font Awesome <em>is</em> awesome. I've put hundreds of hours into the project to give back to the
|
||
open source community. If you'd like, here are some ways you can tell me thanks for all my hard work.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h4><a href="#contribute">Contribute Icons</a></h4>
|
||
<p>
|
||
<a href="#contribute">Contribute icons</a> to make Font Awesome even awesome-er.
|
||
</p>
|
||
</div>
|
||
<div class="span4">
|
||
<h4><a href="http://www.shareagift.com/pages/giftpage.aspx?giftid=2472" target="_blank">Help me buy an iMac</a></h4>
|
||
<p>
|
||
<a href="http://www.shareagift.com/pages/giftpage.aspx?giftid=2472" target="_blank">Contribute</a> to a shiny
|
||
new iMac for me to keep making great icons.
|
||
</p>
|
||
</div>
|
||
<div class="span4">
|
||
<h4><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h4>
|
||
<p>
|
||
Or pick something straight
|
||
from <a href="http://amzn.com/w/G64X58AY416W" target="_blank">my wish list</a>. Gift cards are great.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="span4">
|
||
<h2>Contact</h2>
|
||
<ul class="icons">
|
||
<li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
|
||
<li><i class="icon-twitter"></i> Twitter: <a href="https://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
|
||
<li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="#kyruus">Kyruus</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="span8">
|
||
<h2>Special Thanks</h2>
|
||
<p>
|
||
Special thanks to <a href="https://twitter.com/robmadole/" target="_blank">@robmadole</a> and
|
||
<a href="https://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
|
||
review, advice, and some backbone.js help.
|
||
</p>
|
||
<p>
|
||
Special thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and
|
||
<a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing
|
||
<a target="_blank" href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome to get just the
|
||
icons you need.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
<script type="text/template" id="modal-template">
|
||
<div class="modal hide fade in">
|
||
<div class="modal-header">
|
||
<a class="close" data-dismiss="modal"><i class="icon-remove"></i></a>
|
||
<h4><%= iconName %></h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="span3 icon6">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
280px
|
||
</div>
|
||
</div>
|
||
<div class="span3 icon5">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
140px
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="span2 icon4">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
112px
|
||
</div>
|
||
</div>
|
||
<div class="span2 icon3">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
56px
|
||
</div>
|
||
</div>
|
||
<div class="span1 icon2">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
28px
|
||
</div>
|
||
</div>
|
||
<div class="span1 icon1">
|
||
<div class="thumbnail">
|
||
<div><i class="<%= iconName %>"></i></div>
|
||
14px
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script src="assets/js/jquery-1.7.1.min.js"></script>
|
||
<script src="assets/js/underscore.min.js"></script>
|
||
<script src="assets/js/backbone.min.js"></script>
|
||
<script src="assets/js/prettify.min.js"></script>
|
||
<script src="assets/js/bootstrap-222.min.js"></script>
|
||
<script src="assets/js/index/index.js"></script>
|
||
|
||
</body>
|
||
</html>
|