mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-15 21:06:34 +02:00
959 lines
48 KiB
HTML
959 lines
48 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"> <!--<![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="">
|
|
<!--[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">
|
|
<!--[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">
|
|
</head>
|
|
<body>
|
|
|
|
<!--for navigation-->
|
|
<div id="overview"></div>
|
|
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<h3><a class="brand" href="#"><i class="ficon-flag"></i> Font Awesome</a></h3>
|
|
<ul class="nav">
|
|
<li><a href="#overview">Overview</a></li>
|
|
<li><a href="#base-icons">Base Icons</a></li>
|
|
<li><a href="#extended-icons">Extended Icons</a></li>
|
|
<li><a href="#examples">Examples</a></li>
|
|
<li><a href="#integration">Integration</a></li>
|
|
<li><a href="#code">Code</a></li>
|
|
<li><a href="#roadmap">Roadmap</a></li>
|
|
</ul>
|
|
<ul class="nav pull-right">
|
|
<li><a href="mailto:dave@davegandy.com"><i class="ficon-envelope"></i> Me</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="hero-unit">
|
|
<div id="iconCarousel" class="carousel slide">
|
|
<!-- Carousel items -->
|
|
<div class="carousel-inner">
|
|
<div class="active item"><div><i class="ficon-flag"></i></div></div>
|
|
<div class="item"><div><i class="ficon-star-empty"></i></div></div>
|
|
<div class="item"><div><i class="ficon-fire"></i></div></div>
|
|
<div class="item"><div><i class="ficon-envelope"></i></div></div>
|
|
<div class="item"><div><i class="ficon-leaf"></i></div></div>
|
|
<div class="item"><div><i class="ficon-key"></i></div></div>
|
|
<div class="item"><div><i class="ficon-pushpin"></i></div></div>
|
|
<div class="item"><div><i class="ficon-cogs"></i></div></div>
|
|
<div class="item"><div><i class="ficon-book"></i></div></div>
|
|
<div class="item"><div><i class="ficon-film"></i></div></div>
|
|
<div class="item"><div><i class="ficon-tint"></i></div></div>
|
|
<div class="item"><div><i class="ficon-edit"></i></div></div>
|
|
<div class="item"><div><i class="ficon-search"></i></div></div>
|
|
<div class="item"><div><i class="ficon-home"></i></div></div>
|
|
<div class="item"><div><i class="ficon-calendar"></i></div></div>
|
|
<div class="item"><div><i class="ficon-picture"></i></div></div>
|
|
<div class="item"><div><i class="ficon-headphones"></i></div></div>
|
|
<div class="item"><div><i class="ficon-heart-empty"></i></div></div>
|
|
<div class="item"><div><i class="ficon-thumbs-up"></i></div></div>
|
|
<div class="item"><div><i class="ficon-flag"></i></div></div>
|
|
</div>
|
|
<!-- Carousel nav -->
|
|
<a class="carousel-control left" href="#iconCarousel" data-slide="prev"><i class="ficon-arrow-left"></i></a>
|
|
<a class="carousel-control right" href="#iconCarousel" data-slide="next"><i class="ficon-arrow-right"></i></a>
|
|
</div>
|
|
<div class="hero-content">
|
|
<h1>Font Awesome</h1>
|
|
<p>The iconic font designed for use with Twitter Bootstrap</p>
|
|
<div class="actions">
|
|
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="ficon-download"></i>Download<br>Font Awesome</a>
|
|
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome"><i class="ficon-github"></i>View Project<br>on GitHub</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="why">
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h3><i class="ficon-flag ficon-large"></i> One font, 200+ icons</h3>
|
|
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-gift ficon-large"></i> Free for commercial use</h3>
|
|
The Font Awesome webfont and CSS libraries are completely free for commercial use.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-search ficon-large"></i> Screen reader compatible</h3>
|
|
Font Awesome won't trip up screen readers, unlike most icon fonts.
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h3><i class="ficon-resize-full ficon-large"></i> Infinite scalability</h3>
|
|
Scalable vector graphics means icons look awesome at any size.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-pencil ficon-large"></i> CSS control</h3>
|
|
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-ok ficon-large"></i> Broad compatibility</h3>
|
|
Wide @font-face support means Font Awesome works in <a href="#roadmap" rel="tooltip" data-original-title="IE7 support coming soon">modern browsers <i class="ficon-info-sign"></i></a>.
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h3><i class="ficon-thumbs-up ficon-large"></i> Made for Twitter Bootstrap</h3>
|
|
Designed from scratch to be fully backwards compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-refresh ficon-large"></i> Growing set of icons</h3>
|
|
Ever expanding to support a wider array of web-related actions.
|
|
</div>
|
|
<div class="span4">
|
|
<h3><i class="ficon-twitter ficon-large"></i> Follow on Twitter</h3>
|
|
Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="new-icons" class="row">
|
|
<div class="span12">
|
|
<h1>New Icons</h1>
|
|
<p>63 shiny new icons added to Font Awesome 2.0.3. Yep. That puts us well over 200.</p>
|
|
</div>
|
|
|
|
<div class="span12">
|
|
<h2>Parity with Twitter Bootstrap 2.0.3</h2>
|
|
<p>Twitter Bootstrap 2.0.3 added several new icons, which we have redesigned from scratch and added to Font Awesome 2.0.3</p>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-hdd"></i> ficon-hdd</li></li>
|
|
<li><i class="ficon-bullhorn"></i> ficon-bullhorn</li></li>
|
|
<li><i class="ficon-bell"></i> ficon-bell</li></li>
|
|
<li><i class="ficon-certificate"></i> ficon-certificate</li></li>
|
|
<li><i class="ficon-thumbs-up"></i> ficon-thumbs-up</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-thumbs-down"></i> ficon-thumbs-down</li></li>
|
|
<li><i class="ficon-hand-right"></i> ficon-hand-right</li></li>
|
|
<li><i class="ficon-hand-left"></i> ficon-hand-left</li></li>
|
|
<li><i class="ficon-hand-up"></i> ficon-hand-up</li></li>
|
|
<li><i class="ficon-hand-down"></i> ficon-hand-down</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-circle-arrow-left"></i> ficon-circle-arrow-left</li></li>
|
|
<li><i class="ficon-circle-arrow-right"></i> ficon-circle-arrow-right</li></li>
|
|
<li><i class="ficon-circle-arrow-up"></i> ficon-circle-arrow-up</li></li>
|
|
<li><i class="ficon-circle-arrow-down"></i> ficon-circle-arrow-down</li></li>
|
|
<li><i class="ficon-globe"></i> ficon-globe</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-wrench"></i> ficon-wrench</li></li>
|
|
<li><i class="ficon-tasks"></i> ficon-tasks</li></li>
|
|
<li><i class="ficon-filter"></i> ficon-filter</li></li>
|
|
<li><i class="ficon-briefcase"></i> ficon-briefcase</li></li>
|
|
<li><i class="ficon-fullscreen"></i> ficon-fullscreen</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span12">
|
|
<h2>User Requested</h2>
|
|
<p>You asked, Font Awesome delivered. Here's a giant new set of icons requested on the Font Awesome GitHub project.</p>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-magic"></i> ficon-magic</li></li>
|
|
<li><i class="ficon-phone"></i> ficon-phone</li></li>
|
|
<li><i class="ficon-check-empty"></i> ficon-check-empty</li></li>
|
|
<li><i class="ficon-bookmark-empty"></i> ficon-bookmark-empty</li></li>
|
|
<li><i class="ficon-phone-sign"></i> ficon-phone-sign</li></li>
|
|
<li><i class="ficon-twitter"></i> ficon-twitter</li></li>
|
|
<li><i class="ficon-facebook"></i> ficon-facebook</li></li>
|
|
<li><i class="ficon-github"></i> ficon-github</li></li>
|
|
<li><i class="ficon-unlock"></i> ficon-unlock</li></li>
|
|
<li><i class="ficon-credit-card"></i> ficon-credit-card</li></li>
|
|
<li><i class="ficon-rss"></i> ficon-rss</li></li>
|
|
<li><i class="ficon-group"></i> ficon-group</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-link"></i> ficon-link</li></li>
|
|
<li><i class="ficon-cloud"></i> ficon-cloud</li></li>
|
|
<li><i class="ficon-beaker"></i> ficon-beaker</li></li>
|
|
<li><i class="ficon-cut"></i> ficon-cut</li></li>
|
|
<li><i class="ficon-copy"></i> ficon-copy</li></li>
|
|
<li><i class="ficon-paper-clip"></i> ficon-paper-clip</li></li>
|
|
<li><i class="ficon-save"></i> ficon-save</li></li>
|
|
<li><i class="ficon-sign-blank"></i> ficon-sign-blank</li></li>
|
|
<li><i class="ficon-reorder"></i> ficon-reorder</li></li>
|
|
<li><i class="ficon-ul"></i> ficon-ul</li></li>
|
|
<li><i class="ficon-ol"></i> ficon-ol</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-strikethrough"></i> ficon-strikethrough</li></li>
|
|
<li><i class="ficon-underline"></i> ficon-underline</li></li>
|
|
<li><i class="ficon-table"></i> ficon-table</li></li>
|
|
<li><i class="ficon-columns"></i> ficon-columns</li></li>
|
|
<li><i class="ficon-truck"></i> ficon-truck</li></li>
|
|
<li><i class="ficon-pinterest"></i> ficon-pinterest</li></li>
|
|
<li><i class="ficon-pinterest-sign"></i> ficon-pinterest-sign</li></li>
|
|
<li><i class="ficon-google-plus-sign"></i> ficon-google-plus-sign</li></li>
|
|
<li><i class="ficon-google-plus"></i> ficon-google-plus</li></li>
|
|
<li><i class="ficon-money"></i> ficon-money</li></li>
|
|
<li><i class="ficon-user-md"></i> ficon-user-md</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-caret-down"></i> ficon-caret-down</li></li>
|
|
<li><i class="ficon-caret-up"></i> ficon-caret-up</li></li>
|
|
<li><i class="ficon-caret-left"></i> ficon-caret-left</li></li>
|
|
<li><i class="ficon-caret-right"></i> ficon-caret-right</li></li>
|
|
<li><i class="ficon-sort"></i> ficon-sort</li></li>
|
|
<li><i class="ficon-sort-down"></i> ficon-sort-down</li></li>
|
|
<li><i class="ficon-sort-up"></i> ficon-sort-up</li></li>
|
|
<li><i class="ficon-chart-pie-empty"></i> ficon-chart-pie-empty</li></li>
|
|
<li><i class="ficon-chart-pie-one-third"></i> ficon-chart-pie-one-third</li></li>
|
|
<li><i class="ficon-chart-pie-two-thirds"></i> ficon-chart-pie-two-thirds</li></li>
|
|
<li><i class="ficon-chart-pie-full"></i> ficon-chart-pie-full</li></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="base-icons" class="row">
|
|
<div class="span12">
|
|
<h1>Base Icons</h1>
|
|
<p>Inspired by the Glyphicon set that comes with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>, Font Awesome is designed from scratch for a full array of web-related actions.</p>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-glass"></i> ficon-glass</li></li>
|
|
<li><i class="ficon-music"></i> ficon-music</li></li>
|
|
<li><i class="ficon-search"></i> ficon-search</li></li>
|
|
<li><i class="ficon-envelope"></i> ficon-envelope</li></li>
|
|
<li><i class="ficon-heart"></i> ficon-heart</li></li>
|
|
<li><i class="ficon-star"></i> ficon-star</li></li>
|
|
<li><i class="ficon-star-empty"></i> ficon-star-empty</li></li>
|
|
<li><i class="ficon-user"></i> ficon-user</li></li>
|
|
<li><i class="ficon-film"></i> ficon-film</li></li>
|
|
<li><i class="ficon-th-large"></i> ficon-th-large</li></li>
|
|
<li><i class="ficon-th"></i> ficon-th</li></li>
|
|
<li><i class="ficon-th-list"></i> ficon-th-list</li></li>
|
|
<li><i class="ficon-ok"></i> ficon-ok</li></li>
|
|
<li><i class="ficon-remove"></i> ficon-remove</li></li>
|
|
<li><i class="ficon-zoom-in"></i> ficon-zoom-in</li></li>
|
|
|
|
<li><i class="ficon-zoom-out"></i> ficon-zoom-out</li></li>
|
|
<li><i class="ficon-off"></i> ficon-off</li></li>
|
|
<li><i class="ficon-signal"></i> ficon-signal</li></li>
|
|
<li><i class="ficon-cog"></i> ficon-cog</li></li>
|
|
<li><i class="ficon-trash"></i> ficon-trash</li></li>
|
|
<li><i class="ficon-home"></i> ficon-home</li></li>
|
|
<li><i class="ficon-file"></i> ficon-file</li></li>
|
|
<li><i class="ficon-time"></i> ficon-time</li></li>
|
|
<li><i class="ficon-road"></i> ficon-road</li></li>
|
|
<li><i class="ficon-download-alt"></i> ficon-download-alt</li></li>
|
|
<li><i class="ficon-download"></i> ficon-download</li></li>
|
|
<li><i class="ficon-upload"></i> ficon-upload</li></li>
|
|
<li><i class="ficon-inbox"></i> ficon-inbox</li></li>
|
|
<li><i class="ficon-play-circle"></i> ficon-play-circle</li></li>
|
|
<li><i class="ficon-repeat"></i> ficon-repeat</li></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-refresh"></i> ficon-refresh</li></li>
|
|
<li><i class="ficon-list-alt"></i> ficon-list-alt</li></li>
|
|
<li><i class="ficon-lock"></i> ficon-lock</li></li>
|
|
<li><i class="ficon-flag"></i> ficon-flag</li></li>
|
|
<li><i class="ficon-headphones"></i> ficon-headphones</li></li>
|
|
<li><i class="ficon-volume-off"></i> ficon-volume-off</li></li>
|
|
<li><i class="ficon-volume-down"></i> ficon-volume-down</li></li>
|
|
<li><i class="ficon-volume-up"></i> ficon-volume-up</li></li>
|
|
<li><i class="ficon-qrcode"></i> ficon-qrcode</li></li>
|
|
<li><i class="ficon-barcode"></i> ficon-barcode</li></li>
|
|
<li><i class="ficon-tag"></i> ficon-tag</li></li>
|
|
<li><i class="ficon-tags"></i> ficon-tags</li></li>
|
|
<li><i class="ficon-book"></i> ficon-book</li></li>
|
|
<li><i class="ficon-bookmark"></i> ficon-bookmark</li></li>
|
|
<li><i class="ficon-print"></i> ficon-print</li></li>
|
|
|
|
<li><i class="ficon-camera"></i> ficon-camera</li></li>
|
|
<li><i class="ficon-font"></i> ficon-font</li></li>
|
|
<li><i class="ficon-bold"></i> ficon-bold</li></li>
|
|
<li><i class="ficon-italic"></i> ficon-italic</li></li>
|
|
<li><i class="ficon-text-height"></i> ficon-text-height</li></li>
|
|
<li><i class="ficon-text-width"></i> ficon-text-width</li></li>
|
|
<li><i class="ficon-align-left"></i> ficon-align-left</li></li>
|
|
<li><i class="ficon-align-center"></i> ficon-align-center</li></li>
|
|
<li><i class="ficon-align-right"></i> ficon-align-right</li></li>
|
|
<li><i class="ficon-align-justify"></i> ficon-align-justify</li></li>
|
|
<li><i class="ficon-list"></i> ficon-list</li></li>
|
|
<li><i class="ficon-indent-left"></i> ficon-indent-left</li></li>
|
|
<li><i class="ficon-indent-right"></i> ficon-indent-right</li></li>
|
|
<li><i class="ficon-facetime-video"></i> ficon-facetime-video</li></li>
|
|
<li><i class="ficon-picture"></i> ficon-picture</li></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-pencil"></i> ficon-pencil</li></li>
|
|
<li><i class="ficon-map-marker"></i> ficon-map-marker</li></li>
|
|
<li><i class="ficon-adjust"></i> ficon-adjust</li></li>
|
|
<li><i class="ficon-tint"></i> ficon-tint</li></li>
|
|
<li><i class="ficon-edit"></i> ficon-edit</li></li>
|
|
<li><i class="ficon-share"></i> ficon-share</li></li>
|
|
<li><i class="ficon-check"></i> ficon-check</li></li>
|
|
<li><i class="ficon-move"></i> ficon-move</li></li>
|
|
<li><i class="ficon-step-backward"></i> ficon-step-backward</li></li>
|
|
<li><i class="ficon-fast-backward"></i> ficon-fast-backward</li></li>
|
|
<li><i class="ficon-backward"></i> ficon-backward</li></li>
|
|
<li><i class="ficon-play"></i> ficon-play</li></li>
|
|
<li><i class="ficon-pause"></i> ficon-pause</li></li>
|
|
<li><i class="ficon-stop"></i> ficon-stop</li></li>
|
|
<li><i class="ficon-forward"></i> ficon-forward</li></li>
|
|
|
|
<li><i class="ficon-fast-forward"></i> ficon-fast-forward</li></li>
|
|
<li><i class="ficon-step-forward"></i> ficon-step-forward</li></li>
|
|
<li><i class="ficon-eject"></i> ficon-eject</li></li>
|
|
<li><i class="ficon-chevron-left"></i> ficon-chevron-left</li></li>
|
|
<li><i class="ficon-chevron-right"></i> ficon-chevron-right</li></li>
|
|
<li><i class="ficon-plus-sign"></i> ficon-plus-sign</li></li>
|
|
<li><i class="ficon-minus-sign"></i> ficon-minus-sign</li></li>
|
|
<li><i class="ficon-remove-sign"></i> ficon-remove-sign</li></li>
|
|
<li><i class="ficon-ok-sign"></i> ficon-ok-sign</li></li>
|
|
<li><i class="ficon-question-sign"></i> ficon-question-sign</li></li>
|
|
<li><i class="ficon-info-sign"></i> ficon-info-sign</li></li>
|
|
<li><i class="ficon-screenshot"></i> ficon-screenshot</li></li>
|
|
<li><i class="ficon-remove-circle"></i> ficon-remove-circle</li></li>
|
|
<li><i class="ficon-ok-circle"></i> ficon-ok-circle</li></li>
|
|
<li><i class="ficon-ban-circle"></i> ficon-ban-circle</li></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-arrow-left"></i> ficon-arrow-left</li></li>
|
|
<li><i class="ficon-arrow-right"></i> ficon-arrow-right</li></li>
|
|
<li><i class="ficon-arrow-up"></i> ficon-arrow-up</li></li>
|
|
<li><i class="ficon-arrow-down"></i> ficon-arrow-down</li></li>
|
|
<li><i class="ficon-share-alt"></i> ficon-share-alt</li></li>
|
|
<li><i class="ficon-resize-full"></i> ficon-resize-full</li></li>
|
|
<li><i class="ficon-resize-small"></i> ficon-resize-small</li></li>
|
|
<li><i class="ficon-plus"></i> ficon-plus</li></li>
|
|
<li><i class="ficon-minus"></i> ficon-minus</li></li>
|
|
<li><i class="ficon-asterisk"></i> ficon-asterisk</li></li>
|
|
<li><i class="ficon-exclamation-sign"></i> ficon-exclamation-sign</li></li>
|
|
<li><i class="ficon-gift"></i> ficon-gift</li></li>
|
|
<li><i class="ficon-leaf"></i> ficon-leaf</li></li>
|
|
<li><i class="ficon-fire"></i> ficon-fire</li></li>
|
|
<li><i class="ficon-eye-open"></i> ficon-eye-open</li></li>
|
|
|
|
<li><i class="ficon-eye-close"></i> ficon-eye-close</li></li>
|
|
<li><i class="ficon-warning-sign"></i> ficon-warning-sign</li></li>
|
|
<li><i class="ficon-plane"></i> ficon-plane</li></li>
|
|
<li><i class="ficon-calendar"></i> ficon-calendar</li></li>
|
|
<li><i class="ficon-random"></i> ficon-random</li></li>
|
|
<li><i class="ficon-comment"></i> ficon-comment</li></li>
|
|
<li><i class="ficon-magnet"></i> ficon-magnet</li></li>
|
|
<li><i class="ficon-chevron-up"></i> ficon-chevron-up</li></li>
|
|
<li><i class="ficon-chevron-down"></i> ficon-chevron-down</li></li>
|
|
<li><i class="ficon-retweet"></i> ficon-retweet</li></li>
|
|
<li><i class="ficon-shopping-cart"></i> ficon-shopping-cart</li></li>
|
|
<li><i class="ficon-folder-close"></i> ficon-folder-close</li></li>
|
|
<li><i class="ficon-folder-open"></i> ficon-folder-open</li></li>
|
|
<li><i class="ficon-resize-vertical"></i> ficon-resize-vertical</li></li>
|
|
<li><i class="ficon-resize-horizontal"></i> ficon-resize-horizontal</li></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="extended-icons" class="row">
|
|
<div class="span12">
|
|
<h1>Extended Icons</h1>
|
|
<p>
|
|
But wait, there's more! Font Awesome also includes this set of ever-expanding extra-awesome pictograms.
|
|
</p>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-camera-retro"></i> ficon-camera-retro</li></li>
|
|
<li><i class="ficon-bar-chart"></i> ficon-bar-chart</li></li>
|
|
<li><i class="ficon-cogs"></i> ficon-cogs</li></li>
|
|
<li><i class="ficon-external-link"></i> ficon-external-link</li></li>
|
|
<li><i class="ficon-pushpin"></i> ficon-pushpin</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-facebook-sign"></i> ficon-facebook-sign</li></li>
|
|
<li><i class="ficon-twitter-sign"></i> ficon-twitter-sign</li></li>
|
|
<li><i class="ficon-linkedin-sign"></i> ficon-linkedin-sign</li></li>
|
|
<li><i class="ficon-github-sign"></i> ficon-github-sign</li></li>
|
|
<li><i class="ficon-key"></i> ficon-key</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-comments"></i> ficon-comments</li></li>
|
|
<li><i class="ficon-trophy"></i> ficon-trophy</li></li>
|
|
<li><i class="ficon-upload-alt"></i> ficon-upload-alt</li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="ficons">
|
|
<li><i class="ficon-signin"></i> ficon-signin</li></li>
|
|
<li><i class="ficon-signout"></i> ficon-signout</li></li>
|
|
<li><i class="ficon-star-half"></i> ficon-star-half</li></li>
|
|
<li><i class="ficon-heart-empty"></i> ficon-heart-empty</li></li>
|
|
<li><i class="ficon-lemon"></i> ficon-lemon</li></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="examples">
|
|
<h1>Examples</h1>
|
|
<p>Many examples re-used from the Twitter Bootstrap documentation.</p>
|
|
<div class="row">
|
|
<div class="span4">
|
|
<div class="well">
|
|
<p>Use Font Awesome icons in:</p>
|
|
<ul class="ficons">
|
|
<li><i class="ficon-ok"></i>Bulleted lists (like this one)</li>
|
|
<li><i class="ficon-ok"></i>Buttons</li>
|
|
<li><i class="ficon-ok"></i>Button groups</li>
|
|
<li><i class="ficon-ok"></i>Navigation</li>
|
|
<li><i class="ficon-ok"></i>Prepended form inputs</li>
|
|
<li><i class="ficon-ok"></i>And many more with Custom CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="span4">
|
|
<p>
|
|
<a class="btn" href="#"><i class="ficon-refresh"></i> Refresh</a>
|
|
<a class="btn btn-success" href="#"><i class="ficon-shopping-cart ficon-large"></i> Checkout</a>
|
|
<a class="btn btn-danger" href="#"><i class="ficon-trash ficon-large"></i> Delete</a>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-large btn-primary" href="#"><i class="ficon-comment"></i> Comment</a>
|
|
<a class="btn btn-small" href="#"><i class="ficon-cog"></i> Settings</a>
|
|
<a class="btn btn-small btn-info" href="#"><i class="ficon-info-sign"></i> More Info</a>
|
|
</p>
|
|
<div class="well" style="padding: 8px 0;">
|
|
<ul class="nav nav-list">
|
|
<li class="active"><a href="#"><i class="ficon-home"></i> Home</a></li>
|
|
<li><a href="#"><i class="ficon-book"></i> Library</a></li>
|
|
<li><a href="#"><i class="ficon-pencil"></i> Applications</a></li>
|
|
<li><a href="#"><i class="ficon-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="ficon-align-left"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-center"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-right"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-justify"></i></a>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="#"><i class="ficon-user"></i> User</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="ficon-caret-down"></span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><i class="ficon-pencil"></i> Edit</a></li>
|
|
<li><a href="#"><i class="ficon-trash"></i> Delete</a></li>
|
|
<li><a href="#"><i class="ficon-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="ficon-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="ficon-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>
|
|
</section>
|
|
|
|
<section id="integration">
|
|
<h1>Integration</h1>
|
|
<p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Bootstrap using LESS</h3>
|
|
<p>Use this method if integrating 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 font url to ensure it points to the right place.
|
|
<pre class="prettyprint linenums">
|
|
@font-face {
|
|
font-family: 'FontAwesome';
|
|
src: url('../font/fontawesome-webfont.eot');
|
|
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
|
|
url('../font/fontawesome-webfont.woff') format('woff'),
|
|
url('../font/fontawesome-webfont.ttf') format('truetype'),
|
|
url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
|
|
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
</pre>
|
|
</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="span3">
|
|
<h3>Bootstrap using CSS</h3>
|
|
<p>Use this method if integrating with Twitter Bootstrap using CSS.</p>
|
|
</div>
|
|
<div class="span9">
|
|
<ol>
|
|
<li>Copy the Font Awesome font directory into your project.</li>
|
|
<li>Copy font-awesome.css into your project.</li>
|
|
<li>Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li>
|
|
<li>
|
|
In the <code><head></code> of your html, reference the location to your font-awesome.css.
|
|
<pre class="prettyprint linenums">
|
|
<link rel="stylesheet" href="../css/bootstrap.css">
|
|
<link rel="stylesheet" href="../css/font-awesome.css">
|
|
</pre>
|
|
</li>
|
|
<li>Check out the examples to start using Font Awesome!</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Not using Bootstrap?</h3>
|
|
<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.css into your project.</li>
|
|
<li>Open your project's font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li>
|
|
<li>Check out the examples to start using Font Awesome!</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="code">
|
|
<h1>Code</h1>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Inline Icon</h3>
|
|
<p>Place Font Awesome icons just about anywhere with the <code><i></code> tag.</p>
|
|
</div>
|
|
<div class="span9">
|
|
<div class="well">
|
|
<div style="font-size: 24px;">
|
|
<i class="ficon-camera-retro"></i> ficon-camera-retro
|
|
</div>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<div style="font-size: 24px;">
|
|
<i class="ficon-camera-retro"></i> ficon-camera-retro
|
|
</div>
|
|
</pre>
|
|
<div class="alert alert-info"><i class="ficon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
|
|
<p>Increase the icon size by using the <code>ficon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p>
|
|
<div class="well">
|
|
<div style="font-size: 24px;">
|
|
<i class="ficon-camera-retro ficon-large"></i> ficon-camera-retro
|
|
</div>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<div style="font-size: 24px;">
|
|
<i class="ficon-camera-retro ficon-large"></i> ficon-camera-retro
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Buttons</h3>
|
|
<p>
|
|
<p>
|
|
<a class="btn" href="#">
|
|
<i class="ficon-refresh"></i> Refresh</a>
|
|
<a class="btn btn-success" href="#">
|
|
<i class="ficon-shopping-cart ficon-large"></i> Checkout</a>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-large btn-primary" href="#">
|
|
<i class="ficon-comment"></i> Comment</a>
|
|
<a class="btn btn-danger" href="#">
|
|
<i class="ficon-trash ficon-large"></i> Delete</a>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-small" href="#">
|
|
<i class="ficon-cog"></i> Settings</a>
|
|
<a class="btn btn-small btn-info" href="#">
|
|
<i class="ficon-info-sign"></i> More Info</a>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
<div class="span9">
|
|
<p>Font Awesome icons work great in buttons.</p>
|
|
<pre class="prettyprint linenums">
|
|
<a class="btn" href="#">
|
|
<i class="ficon-refresh"></i> Refresh</a>
|
|
<a class="btn btn-success" href="#">
|
|
<i class="ficon-shopping-cart ficon-large"></i> Checkout</a>
|
|
<a class="btn btn-large btn-primary" href="#">
|
|
<i class="ficon-comment"></i> Comment</a>
|
|
<a class="btn btn-danger" href="#">
|
|
<i class="ficon-trash ficon-large"></i> Delete</a>
|
|
<a class="btn btn-small" href="#">
|
|
<i class="ficon-cog"></i> Settings</a>
|
|
<a class="btn btn-small btn-info" href="#">
|
|
<i class="ficon-info-sign"></i> More Info</a>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Button groups</h3>
|
|
<p>
|
|
<div class="btn-group">
|
|
<a class="btn" href="#"><i class="ficon-align-left"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-center"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-right"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-justify"></i></a>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
<div class="span9">
|
|
<pre class="prettyprint linenums">
|
|
<div class="btn-group">
|
|
<a class="btn" href="#"><i class="ficon-align-left"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-center"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-right"></i></a>
|
|
<a class="btn" href="#"><i class="ficon-align-justify"></i></a>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Button dropdowns</h3>
|
|
<p>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary" href="#"><i class="ficon-user"></i> User</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<span class="ficon-caret-down"></span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><i class="ficon-pencil"></i> Edit</a></li>
|
|
<li><a href="#"><i class="ficon-trash"></i> Delete</a></li>
|
|
<li><a href="#"><i class="ficon-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">
|
|
<a class="btn btn-primary" href="#"><i class="ficon-user"></i> User</a>
|
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="ficon-caret-down"></span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><i class="ficon-pencil"></i> Edit</a></li>
|
|
<li><a href="#"><i class="ficon-trash"></i> Delete</a></li>
|
|
<li><a href="#"><i class="ficon-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="ficon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Lists</h3>
|
|
<p>
|
|
<ul class="ficons">
|
|
<li><i class="ficon-ok"></i> Lists</li>
|
|
<li><i class="ficon-ok"></i> Buttons</li>
|
|
<li><i class="ficon-ok"></i> Button groups</li>
|
|
<li><i class="ficon-ok"></i> Navigation</li>
|
|
<li><i class="ficon-ok"></i> Prepended form inputs</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div class="span9">
|
|
<p>Easily replace individual bullets.</p>
|
|
<pre class="prettyprint linenums">
|
|
<ul>
|
|
<li class="ficon-ok">Lists</li>
|
|
<li class="ficon-ok">Buttons</li>
|
|
<li class="ficon-ok">Button groups</li>
|
|
<li class="ficon-ok">Navigation</li>
|
|
<li class="ficon-ok">Prepended form inputs</li>
|
|
</ul>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Navigation</h3>
|
|
<div class="well" style="padding: 8px 0;">
|
|
<ul class="nav nav-list">
|
|
<li class="active"><a href="#"><i class="ficon-home"></i> Home</a></li>
|
|
<li><a href="#"><i class="ficon-book"></i> Library</a></li>
|
|
<li><a href="#"><i class="ficon-pencil"></i> Applications</a></li>
|
|
<li><a href="#"><i class="ficon-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="ficon-home"></i> Home</a></li>
|
|
<li><a href="#"><i class="ficon-book"></i> Library</a></li>
|
|
<li><a href="#"><i class="ficon-pencil"></i> Applications</a></li>
|
|
<li><a href="#"><i class="ficon-cogs"></i> Settings</a></li>
|
|
</ul>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Prepended form inputs</h3>
|
|
<p>
|
|
<form>
|
|
<div class="input-prepend">
|
|
<span class="add-on"><i class="ficon-envelope"></i></span>
|
|
<input class="span2" type="text" placeholder="Email address">
|
|
</div>
|
|
<div class="input-prepend">
|
|
<span class="add-on"><i class="ficon-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="ficon-envelope"></i></span>
|
|
<input class="span2" type="text" placeholder="Email address">
|
|
</div>
|
|
<div class="input-prepend">
|
|
<span class="add-on"><i class="ficon-key"></i></span>
|
|
<input class="span2" type="password" placeholder="Password">
|
|
</div>
|
|
</form>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span3">
|
|
<h3>Custom CSS</h3>
|
|
<p>Anything you can do with CSS font effects, 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="roadmap">
|
|
<h1>Roadmap</h1>
|
|
<p>Here's the plan for future updates.</p>
|
|
<ul class="ficons">
|
|
<li><i class="ficon-plus"></i> Support for IE7.</li>
|
|
<li><i class="ficon-plus"></i> Better hinting for smaller font sizes.</li>
|
|
<li><i class="ficon-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="ficon-plus"></i> More complete Twitter Bootstrap compatibility.</li>
|
|
<li><i class="ficon-plus"></i> Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h2>Contact</h2>
|
|
<ul class="ficons">
|
|
<li><i class="ficon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
|
|
<li><i class="ficon-twitter"></i> Twitter: <a href="http://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
|
|
<li><i class="ficon-wrench"></i> Work: <a href="http://kyruus.com" target="_blank">Kyruus</a> Lead Product Designer</li>
|
|
</ul>
|
|
</div>
|
|
<div class="span8">
|
|
<h2>License</h2>
|
|
The Font Awesome webfont, CSS, and LESS files are licensed under
|
|
<a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
|
|
A mention of <code>Font Awesome - http://fortawesome.github.com/Font-Awesome</code> in human-readable source code
|
|
is considered acceptable attribution (most common on the web). If human readable source code is not available to
|
|
the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or
|
|
mobile software).
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Special Thanks</h2>
|
|
Special thanks to <a href="http://twitter.com/robmadole/" target="_blank">@robmadole</a> and
|
|
<a href="http://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
|
|
review, advice, and some backbone.js help.
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
|
|
<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="ficon-remove"></i></a>
|
|
<h3><%= style %></h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="span3 icon6">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
340px
|
|
</div>
|
|
</div>
|
|
<div class="span3 icon5">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
180px
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span2 icon4">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
100px
|
|
</div>
|
|
</div>
|
|
<div class="span2 icon3">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
50px
|
|
</div>
|
|
</div>
|
|
<div class="span1 icon2">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
20px
|
|
</div>
|
|
</div>
|
|
<div class="span1 icon1">
|
|
<div class="thumbnail">
|
|
<div><i class="<%= style %>"></i></div>
|
|
12 px
|
|
</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/tw-bs-201/bootstrap-transition.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-alert.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-modal.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-dropdown.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-scrollspy.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-tab.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-tooltip.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-popover.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-button.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-collapse.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-carousel.js"></script>
|
|
<script src="assets/js/tw-bs-201/bootstrap-typeahead.js"></script>
|
|
<script src="assets/js/index/index.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
$('#iconCarousel').carousel({
|
|
interval: 5000
|
|
});
|
|
|
|
// tooltips
|
|
$('#why').tooltip({
|
|
selector: "a[rel=tooltip]",
|
|
placement: 'bottom'
|
|
})
|
|
|
|
// make code pretty
|
|
window.prettyPrint && prettyPrint();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|