git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/3.2.1/test/index.html

   1 <!DOCTYPE html>
   2 <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
   3 <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
   4 <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
   5 <!--[if (gte IE 9)|!(IE)]><!-->
   6 <html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
   7 <head>
   8   <!-- Basic Page Needs
   9  ================================================== -->
  10   <meta charset="utf-8" />
  11   <title>Font Awesome Visual Test Cases</title>
  12   <meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
  13   <meta name="author" content="Dave Gandy">
  14   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15   <!--<meta name="viewport" content="initial-scale=1; maximum-scale=1">-->
  16
  17   <!--[if lt IE 9]>
  18   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  19   <![endif]-->
  20
  21   <!-- CSS
  22  ================================================== -->
  23
  24   <link rel="stylesheet" href="../assets/css/site.css">
  25   <link rel="stylesheet" href="../assets/css/pygments.css">
  26   <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
  27   <!--[if IE 7]>
  28   <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome-ie7.css">
  29   <![endif]-->
  30   <!-- Le fav and touch icons -->
  31   <link rel="shortcut icon" href="../assets/ico/favicon.ico">
  32
  33   <script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
  34   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  35
  36   <script type="text/javascript">
  37     var _gaq = _gaq || [];
  38     _gaq.push(['_setAccount', 'UA-30136587-1']);
  39     _gaq.push(['_trackPageview']);
  40
  41     (function() {
  42       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  43       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  44       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  45     })();
  46   </script>
  47 </head>
  48 <body data-spy="scroll" data-target=".navbar">
  49 <div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
  50   <div class="navbar navbar-inverse navbar-static-top hidden-print">
  51   <div class="navbar-inner">
  52     <div class="container">
  53       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  54         <span class="icon-bar"></span>
  55         <span class="icon-bar"></span>
  56         <span class="icon-bar"></span>
  57       </a>
  58
  59       <a class="brand" href="../"><i class="icon-flag"></i> Font Awesome</a>
  60       <div class="nav-collapse collapse">
  61         <ul class="nav">
  62           <li class="hidden-tablet "><a href="../">Home</a></li>
  63           <li><a href="../get-started/">Get Started</a></li>
  64           <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
  65           <li class="dropdown dropdown-split-right hidden-phone">
  66             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  67               <i class="icon-caret-down"></i>
  68             </a>
  69             <ul class="dropdown-menu pull-right">
  70               <li><a href="../icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li>
  71               <li class="divider"></li>
  72               <li><a href="../icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in 3.2.1</a></li>
  73               <li><a href="../icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
  74               <li><a href="../icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
  75               <li><a href="../icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
  76               <li><a href="../icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
  77               <li><a href="../icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
  78               <li><a href="../icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
  79               <li><a href="../icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li>
  80             </ul>
  81           </li>
  82           <li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
  83           <li class="dropdown dropdown-split-right hidden-phone">
  84             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  85               <i class="icon-caret-down"></i>
  86             </a>
  87             <ul class="dropdown-menu pull-right">
  88               <li><a href="../examples/">Examples</a></li>
  89               <li class="divider"></li>
  90               <li><a href="../examples/#new-styles">New Styles</a></li>
  91               <li><a href="../examples/#inline-icons">Inline Icons</a></li>
  92               <li><a href="../examples/#larger-icons">Larger Icons</a></li>
  93               <li><a href="../examples/#bordered-pulled">Bordered & Pulled</a></li>
  94               <li><a href="../examples/#buttons">Buttons</a></li>
  95               <li><a href="../examples/#button-groups">Button Groups</a></li>
  96               <li><a href="../examples/#button-dropdowns">Button Dropdowns</a></li>
  97               <li><a href="../examples/#bulleted-lists">Bulleted Lists</a></li>
  98               <li><a href="../examples/#navigation">Navigation</a></li>
  99               <li><a href="../examples/#form-inputs">Form Inputs</a></li>
 100               <li><a href="../examples/#animated-spinner">Animated Spinner</a></li>
 101               <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
 102               <li><a href="../examples/#stacked">Stacked</a></li>
 103               <li><a href="../examples/#custom">Custom CSS</a></li>
 104             </ul>
 105           </li>
 106           <li><a href="../whats-new/">
 107           <span class="hidden-tablet">What's </span>New</a>
 108           </li>
 109           <li><a href="../community/">Community</a></li>
 110           <li><a href="../license/">License</a></li>
 111         </ul>
 112         <ul class="nav pull-right">
 113           <li><a href="http://blog.fontawesome.io">Blog</a></li>
 114         </ul>
 115       </div>
 116     </div>
 117   </div>
 118 </div>
 119
 120
 121   <section class="container">
 122   <h1 class="page-header">Visual Test Cases</h1>
 123
 124   <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
 125   <div class="row">
 126     <div class="span3">
 127       <div class="well">
 128         <i class="icon-building"></i> Building
 129       </div>
 130     </div>
 131     <div class="span3">
 132       <div class="well">
 133         <i class="icon-building icon-large"></i> Building Large
 134       </div>
 135     </div>
 136     <div class="span3">
 137       <i class="icon-building"></i> Building
 138     </div>
 139     <div class="span3">
 140       <i class="icon-building icon-large"></i> Building Large
 141     </div>
 142   </div>
 143   <div class="row" style="font-size: 24px; line-height: 1.5em;">
 144     <div class="span4">
 145       <div class="well">
 146         <i class="icon-building"></i> Building
 147       </div>
 148     </div>
 149     <div class="span4">
 150       <div class="well">
 151         <i class="icon-building icon-large"></i> Building Large
 152       </div>
 153     </div>
 154     <div class="span4">
 155       <i class="icon-building icon-large"></i> Building Large
 156     </div>
 157   </div>
 158   <div class="row">
 159     <div class="span3">
 160       <div class="well">
 161         <i class="icon-circle"></i> Circle
 162       </div>
 163     </div>
 164     <div class="span3">
 165       <div class="well">
 166         <i class="icon-circle icon-large"></i> Circle Large
 167       </div>
 168     </div>
 169     <div class="span3">
 170       <i class="icon-circle"></i> Circle
 171     </div>
 172     <div class="span3">
 173       <i class="icon-circle icon-large"></i> Circle Large
 174     </div>
 175   </div>
 176   <div class="row" style="font-size: 24px; line-height: 1.5em;">
 177     <div class="span4">
 178       <div class="well">
 179         <i class="icon-circle"></i> Circle
 180       </div>
 181     </div>
 182     <div class="span4">
 183       <div class="well">
 184         <i class="icon-circle icon-large"></i> Circle Large
 185       </div>
 186     </div>
 187     <div class="span4">
 188       <i class="icon-circle icon-large"></i> Circle Large
 189     </div>
 190   </div>
 191
 192
 193   <h3>Links with Icons <small>icon should activate link & underline</small></h3>
 194   <div class="row lead">
 195     <div class="span2">
 196       <a href="#"><i class="icon-building"></i> Link Here</a>
 197     </div>
 198     <div class="span2">
 199       <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
 200     </div>
 201     <div class="span2">
 202       <a href="#"><i class="icon-caret-down"></i> Link Here</a>
 203     </div>
 204     <div class="span2">
 205       <a href="#">Link Here <i class="icon-double-angle-right"></i></a>
 206     </div>
 207     <div class="span2">
 208       <a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
 209     </div>
 210     <div class="span2">
 211       <a href="#">Link Here <i class="icon-caret-down"></i></a>
 212     </div>
 213   </div>
 214   <div class="row">
 215     <div class="span2">
 216       <a href="#"><i class="icon-building"></i> Link Here</a>
 217     </div>
 218     <div class="span2">
 219       <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
 220     </div>
 221     <div class="span2">
 222       <a href="#"><i class="icon-caret-down"></i> Link Here</a>
 223     </div>
 224     <div class="span2">
 225       <a href="#">Link Here <i class="icon-double-angle-right"></i></a>
 226     </div>
 227     <div class="span2">
 228       <a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
 229     </div>
 230     <div class="span2">
 231       <a href="#">Link Here <i class="icon-caret-down"></i></a>
 232     </div>
 233   </div>
 234
 235
 236   <h3>Navbar  <small>should stay same height </small></h3>
 237   <div class="navbar navbar-inverse navbar-static-top">
 238     <div class="navbar-inner">
 239       <div class="container">
 240         <a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a>
 241         <ul class="nav">
 242           <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
 243           <li class="dropdown" style="border: solid 1px white;">
 244             <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 245               Nav Item 2
 246               <i class="icon-caret-down"></i>
 247             </a>
 248             <ul class="dropdown-menu" role="menu">
 249               <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 250               <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 251             </ul>
 252           </li>
 253           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
 254           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-envelope"></i> Nav Item 4</a></li>
 255           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 5</a></li>
 256           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle"></i> Nav Item 6</a></li>
 257         </ul>
 258       </div>
 259     </div>
 260   </div>
 261
 262
 263   <h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
 264   <h4>Buttons</h4>
 265   <div class="row">
 266     <div class="span6">
 267       <div style="border: solid 1px #d3d3d3; text-align: center;">
 268         <div>
 269           <button class="btn btn-mini">Button</button>
 270           <button class="btn btn-mini"><i class="icon-building"></i> Button</button>
 271           <button class="btn btn-mini"><i class="icon-building"></i></button>
 272         </div>
 273         <div>
 274           <button class="btn btn-small">Button</button>
 275           <button class="btn btn-small"><i class="icon-building"></i> Button</button>
 276           <button class="btn btn-small"><i class="icon-building"></i></button>
 277         </div>
 278         <div>
 279           <button class="btn">Button</button>
 280           <button class="btn"><i class="icon-building"></i> Button</button>
 281           <button class="btn"><i class="icon-building"></i></button>
 282         </div>
 283         <div>
 284           <button class="btn btn-large">Button</button>
 285           <button class="btn btn-large"><i class="icon-building"></i> Button</button>
 286           <button class="btn btn-large"><i class="icon-building"></i></button>
 287         </div>
 288       </div>
 289     </div>
 290     <div class="span6">
 291       <div style="border: solid 1px #d3d3d3; text-align: center;">
 292         <div>
 293           <button class="btn btn-mini">Button</button>
 294           <button class="btn btn-mini"><i class="icon-building icon-large"></i> Button</button>
 295           <button class="btn btn-mini"><i class="icon-building icon-large"></i></button>
 296         </div>
 297         <div>
 298           <button class="btn btn-small">Button</button>
 299           <button class="btn btn-small"><i class="icon-building icon-large"></i> Button</button>
 300           <button class="btn btn-small"><i class="icon-building icon-large"></i></button>
 301         </div>
 302         <div>
 303           <button class="btn">Button</button>
 304           <button class="btn"><i class="icon-building icon-large"></i> Button</button>
 305           <button class="btn"><i class="icon-building icon-large"></i></button>
 306         </div>
 307         <div>
 308           <button class="btn btn-large">Button</button>
 309           <button class="btn btn-large"><i class="icon-building icon-large"></i> Button</button>
 310           <button class="btn btn-large"><i class="icon-building icon-large"></i></button>
 311         </div>
 312       </div>
 313     </div>
 314   </div>
 315   <div class="row">
 316     <div class="span6">
 317       <div style="border: solid 1px #d3d3d3; text-align: center;">
 318         <div>
 319           <button class="btn btn-mini">Button</button>
 320           <button class="btn btn-mini"><i class="icon-circle"></i> Button</button>
 321           <button class="btn btn-mini"><i class="icon-circle"></i></button>
 322         </div>
 323         <div>
 324           <button class="btn btn-small">Button</button>
 325           <button class="btn btn-small"><i class="icon-circle"></i> Button</button>
 326           <button class="btn btn-small"><i class="icon-circle"></i></button>
 327         </div>
 328         <div>
 329           <button class="btn">Button</button>
 330           <button class="btn"><i class="icon-circle"></i> Button</button>
 331           <button class="btn"><i class="icon-circle"></i></button>
 332         </div>
 333         <div>
 334           <button class="btn btn-large">Button</button>
 335           <button class="btn btn-large"><i class="icon-circle"></i> Button</button>
 336           <button class="btn btn-large"><i class="icon-circle"></i></button>
 337         </div>
 338       </div>
 339     </div>
 340     <div class="span6">
 341       <div style="border: solid 1px #d3d3d3; text-align: center;">
 342         <div>
 343           <button class="btn btn-mini">Button</button>
 344           <button class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</button>
 345           <button class="btn btn-mini"><i class="icon-circle icon-large"></i></button>
 346         </div>
 347         <div>
 348           <button class="btn btn-small">Button</button>
 349           <button class="btn btn-small"><i class="icon-circle icon-large"></i> Button</button>
 350           <button class="btn btn-small"><i class="icon-circle icon-large"></i></button>
 351         </div>
 352         <div>
 353           <button class="btn">Button</button>
 354           <button class="btn"><i class="icon-circle icon-large"></i> Button</button>
 355           <button class="btn"><i class="icon-circle icon-large"></i></button>
 356         </div>
 357         <div>
 358           <button class="btn btn-large">Button</button>
 359           <button class="btn btn-large"><i class="icon-circle icon-large"></i> Button</button>
 360           <button class="btn btn-large"><i class="icon-circle icon-large"></i></button>
 361         </div>
 362       </div>
 363     </div>
 364   </div>
 365
 366
 367   <h4>Anchors</h4>
 368   <div class="row">
 369     <div class="span6">
 370       <div style="border: solid 1px #d3d3d3; text-align: center;">
 371         <div>
 372           <a class="btn btn-mini">Button</a>
 373           <a class="btn btn-mini"><i class="icon-building"></i> Button</a>
 374           <a class="btn btn-mini"><i class="icon-building"></i></a>
 375         </div>
 376         <div>
 377           <a class="btn btn-small">Button</a>
 378           <a class="btn btn-small"><i class="icon-building"></i> Button</a>
 379           <a class="btn btn-small"><i class="icon-building"></i></a>
 380         </div>
 381         <div>
 382           <a class="btn">Button</a>
 383           <a class="btn"><i class="icon-building"></i> Button</a>
 384           <a class="btn"><i class="icon-building"></i></a>
 385         </div>
 386         <div>
 387           <a class="btn btn-large">Button</a>
 388           <a class="btn btn-large"><i class="icon-building"></i> Button</a>
 389           <a class="btn btn-large"><i class="icon-building"></i></a>
 390         </div>
 391       </div>
 392     </div>
 393     <div class="span6">
 394       <div style="border: solid 1px #d3d3d3; text-align: center;">
 395         <div>
 396           <a class="btn btn-mini">Button</a>
 397           <a class="btn btn-mini"><i class="icon-building icon-large"></i> Button</a>
 398           <a class="btn btn-mini"><i class="icon-building icon-large"></i></a>
 399         </div>
 400         <div>
 401           <a class="btn btn-small">Button</a>
 402           <a class="btn btn-small"><i class="icon-building icon-large"></i> Button</a>
 403           <a class="btn btn-small"><i class="icon-building icon-large"></i></a>
 404         </div>
 405         <div>
 406           <a class="btn">Button</a>
 407           <a class="btn"><i class="icon-building icon-large"></i> Button</a>
 408           <a class="btn"><i class="icon-building icon-large"></i></a>
 409         </div>
 410         <div>
 411           <a class="btn btn-large">Button</a>
 412           <a class="btn btn-large"><i class="icon-building icon-large"></i> Button</a>
 413           <a class="btn btn-large"><i class="icon-building icon-large"></i></a>
 414         </div>
 415       </div>
 416     </div>
 417   </div>
 418   <div class="row">
 419     <div class="span6">
 420       <div style="border: solid 1px #d3d3d3; text-align: center;">
 421         <div>
 422           <a class="btn btn-mini">Button</a>
 423           <a class="btn btn-mini"><i class="icon-circle"></i> Button</a>
 424           <a class="btn btn-mini"><i class="icon-circle"></i></a>
 425         </div>
 426         <div>
 427           <a class="btn btn-small">Button</a>
 428           <a class="btn btn-small"><i class="icon-circle"></i> Button</a>
 429           <a class="btn btn-small"><i class="icon-circle"></i></a>
 430         </div>
 431         <div>
 432           <a class="btn">Button</a>
 433           <a class="btn"><i class="icon-circle"></i> Button</a>
 434           <a class="btn"><i class="icon-circle"></i></a>
 435         </div>
 436         <div>
 437           <a class="btn btn-large">Button</a>
 438           <a class="btn btn-large"><i class="icon-circle"></i> Button</a>
 439           <a class="btn btn-large"><i class="icon-circle"></i></a>
 440         </div>
 441       </div>
 442     </div>
 443     <div class="span6">
 444       <div style="border: solid 1px #d3d3d3; text-align: center;">
 445         <div>
 446           <a class="btn btn-mini">Button</a>
 447           <a class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</a>
 448           <a class="btn btn-mini"><i class="icon-circle icon-large"></i></a>
 449         </div>
 450         <div>
 451           <a class="btn btn-small">Button</a>
 452           <a class="btn btn-small"><i class="icon-circle icon-large"></i> Button</a>
 453           <a class="btn btn-small"><i class="icon-circle icon-large"></i></a>
 454         </div>
 455         <div>
 456           <a class="btn">Button</a>
 457           <a class="btn"><i class="icon-circle icon-large"></i> Button</a>
 458           <a class="btn"><i class="icon-circle icon-large"></i></a>
 459         </div>
 460         <div>
 461           <a class="btn btn-large">Button</a>
 462           <a class="btn btn-large"><i class="icon-circle icon-large"></i> Button</a>
 463           <a class="btn btn-large"><i class="icon-circle icon-large"></i></a>
 464         </div>
 465       </div>
 466     </div>
 467   </div>
 468
 469
 470   <h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
 471   <div class="row">
 472     <div class="span4">
 473       <div style="border: solid 1px #d3d3d3;">
 474         <a class="btn btn-large" href="#">
 475           <i class="icon-github icon-2x pull-left"></i>
 476           Longer<br>Button</a>
 477         <a class="btn btn-large" href="#">
 478           Longer<br>Button</a>
 479       </div>
 480     </div>
 481     <div class="span4">
 482       <div style="border: solid 1px #d3d3d3;">
 483         <a class="btn" href="#">
 484           <i class="icon-github icon-2x pull-left"></i>
 485           Longer<br>Button</a>
 486         <a class="btn" href="#">
 487           Longer<br>Button</a>
 488       </div>
 489     </div>
 490     <div class="span4">
 491       <div style="border: solid 1px #d3d3d3;">
 492         <a class="btn btn-small" href="#">
 493           <i class="icon-github icon-2x pull-left"></i>
 494           Longer<br>Button</a>
 495         <a class="btn btn-small" href="#">
 496           Longer<br>Button</a>
 497       </div>
 498     </div>
 499   </div>
 500
 501
 502   <h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
 503   <div class="row">
 504     <div class="span9">
 505       <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
 506         <li class="active"><a href="#">Nav Item 1</a></li>
 507         <li class="dropdown active">
 508           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 509             Nav Item 2
 510             <span class="caret"></span>
 511           </a>
 512           <ul class="dropdown-menu" role="menu">
 513             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 514             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 515           </ul>
 516         </li>
 517         <li class="dropdown active">
 518           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 519             Nav Item 3
 520             <i class="icon-caret-down"></i>
 521           </a>
 522           <ul class="dropdown-menu" role="menu">
 523             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 524             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 525           </ul>
 526         </li>
 527         <li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
 528         <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 529         <li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
 530         <li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
 531       </ul>
 532       <ul class="nav nav-tabs">
 533         <li class="active"><a href="#">Nav Item 1</a></li>
 534         <li class="dropdown active">
 535           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 536             Nav Item 2
 537             <span class="caret"></span>
 538           </a>
 539           <ul class="dropdown-menu" role="menu">
 540             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 541             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 542           </ul>
 543         </li>
 544         <li class="dropdown active">
 545           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 546             Nav Item 3
 547             <i class="icon-caret-down"></i>
 548           </a>
 549           <ul class="dropdown-menu" role="menu">
 550             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 551             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 552           </ul>
 553         </li>
 554         <li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
 555         <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 556         <li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
 557         <li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
 558       </ul>
 559     </div>
 560     <div class="span3">
 561       <ul class="nav nav-list">
 562         <li>
 563           <a href="#c1">
 564             <i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview
 565           </a>
 566         </li>
 567         <li>
 568           <a href="#c1">
 569             Overview
 570             <i class="icon-chevron-right icon-fixed-width pull-right"></i>
 571           </a>
 572         </li>
 573       </ul>
 574     </div>
 575   </div>
 576
 577
 578
 579   <h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
 580   <div class="row">
 581     <div class="span6">
 582       <p class="lead">
 583         <i class="icon-stethoscope icon-3x pull-left icon-border"></i>
 584         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
 585       </p>
 586     </div>
 587     <div class="span6">
 588       <p class="lead">
 589         <i class="icon-ambulance icon-4x pull-right icon-border"></i>
 590         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
 591       </p>
 592     </div>
 593   </div>
 594   <div class="row">
 595     <div class="span4">
 596       <i class="icon-building icon-2x pull-left icon-border"></i>
 597       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
 598     </div>
 599     <div class="span4">
 600       <i class="icon-stethoscope icon-3x pull-right icon-border"></i>
 601       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
 602     </div>
 603     <div class="span4">
 604       <i class="icon-ambulance icon-4x pull-left"></i>
 605       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
 606     </div>
 607   </div>
 608
 609
 610   <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
 611   <div class="row">
 612     <div class="span6">
 613       <div style="border: solid 1px #d3d3d3;">
 614         <ul class="icons-ul">
 615           <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 616           <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 617           <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 618             <i class="icon-building"></i>
 619             <span class="label">foo</span>
 620             <a class="btn">foo</a>
 621           </li>
 622         </ul>
 623       </div>
 624     </div>
 625     <div class="span6">
 626       <div style="border: solid 1px #d3d3d3;">
 627         <ul class="icons-ul">
 628           <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 629           <li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 630           <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 631         </ul>
 632       </div>
 633     </div>
 634   </div>
 635   <div class="row">
 636     <div class="span6">
 637       <div style="border: solid 1px #d3d3d3;">
 638         <ul class="icons-ul lead">
 639           <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 640           <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 641           <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 642         </ul>
 643       </div>
 644     </div>
 645     <div class="span6">
 646       <div style="border: solid 1px #d3d3d3;">
 647         <ul class="icons-ul lead">
 648           <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 649           <li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 650           <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 651         </ul>
 652       </div>
 653     </div>
 654   </div>
 655   <div class="row">
 656     <div class="span6">
 657       <div style="border: solid 1px #d3d3d3;">
 658         <ul class="icons-ul">
 659           <li><a href="#"><i class="icon-li icon-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 660           <li><a href="#"><i class="icon-li icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 661           <li><a href="#"><i class="icon-li icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 662         </ul>
 663       </div>
 664     </div>
 665     <div class="span6">
 666       <div style="border: solid 1px #d3d3d3;">
 667         <ul class="icons-ul">
 668           <li><a href="#"><i class="icon-li icon-double-angle-right icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 669           <li><a href="#"><i class="icon-li icon-arrow-right icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 670           <li><a href="#"><i class="icon-li icon-building icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 671         </ul>
 672       </div>
 673     </div>
 674   </div>
 675   <div class="row">
 676     <div class="span6">
 677       <div style="border: solid 1px #d3d3d3;">
 678         <ul class="icons-ul">
 679           <li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 680           <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 681           <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 682             <i class="icon-building"></i>
 683             <span class="label">foo</span>
 684             <a class="btn">foo</a>
 685           </li>
 686         </ul>
 687       </div>
 688     </div>
 689     <div class="span6">
 690       <div style="border: solid 1px #d3d3d3;">
 691         <ul class="icons-ul">
 692           <li><i class="icon-li icon-refresh icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 693           <li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 694           <li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 695             <i class="icon-building"></i>
 696             <span class="label">foo</span>
 697             <a class="btn">foo</a>
 698           </li>
 699         </ul>
 700       </div>
 701     </div>
 702   </div>
 703
 704
 705   <div class="row">
 706     <div class="span6">
 707       <div style="border: solid 1px #d3d3d3;">
 708         <ul>
 709           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 710           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 711           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 712         </ul>
 713       </div>
 714     </div>
 715     <div class="span6">
 716       <div style="border: solid 1px #d3d3d3;">
 717         <ul>
 718           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 719           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
 720           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 721         </ul>
 722       </div>
 723     </div>
 724   </div>
 725
 726
 727   <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
 728   <div style="border: solid 1px #d3d3d3;">
 729     <i class="icon-refresh icon-spin"></i> Loading...
 730     <button class="btn btn-small"><i class="icon-refresh icon-spin"></i> Loading...</button>
 731     <button class="btn btn-small">Loading...</button>
 732     <i class="icon-circle-blank icon-spin"></i> Loading...
 733     <button class="btn btn-small"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 734     <a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a>
 735   </div>
 736   <div style="border: solid 1px #d3d3d3;">
 737     <i class="icon-refresh icon-spin"></i> Loading...
 738     <button class="btn"><i class="icon-refresh icon-spin"></i> Loading...</button>
 739     <button class="btn">Loading...</button>
 740     <i class="icon-circle-blank icon-spin"></i> Loading...
 741     <button class="btn"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 742   </div>
 743   <div style="border: solid 1px #d3d3d3;">
 744     <i class="icon-spinner icon-spin"></i> Loading...
 745     <button class="btn btn-large"><i class="icon-spinner icon-spin"></i> Loading...</button>
 746     <button class="btn btn-large">Loading...</button>
 747     <i class="icon-circle-blank icon-spin"></i> Loading...
 748     <button class="btn btn-large"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 749   </div>
 750   <h4>icon-large</h4>
 751   <div style="border: solid 1px #d3d3d3;">
 752     <i class="icon-refresh icon-large icon-spin"></i> Loading...
 753     <button class="btn btn-small"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button>
 754     <button class="btn btn-small">Loading...</button>
 755     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 756     <button class="btn btn-small"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 757   </div>
 758   <div style="border: solid 1px #d3d3d3;">
 759     <i class="icon-refresh icon-large icon-spin"></i> Loading...
 760     <button class="btn"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button>
 761     <button class="btn">Loading...</button>
 762     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 763     <button class="btn"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 764   </div>
 765   <div style="border: solid 1px #d3d3d3;">
 766     <i class="icon-spinner icon-large icon-spin"></i> Loading...
 767     <button class="btn btn-large"><i class="icon-spinner icon-large icon-spin"></i> Loading...</button>
 768     <button class="btn btn-large">Loading...</button>
 769     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 770     <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 771   </div>
 772   <h4>Bootstrap Prepend and Append</h4>
 773   <div class="row">
 774     <div class="span6">
 775       <div class="input-prepend">
 776         <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
 777         <input class="span2" id="prependedInput" type="text" placeholder="Username">
 778       </div>
 779     </div>
 780     <div class="span6">
 781       <div class="input-append">
 782         <input class="span2" id="appendedInput" type="text">
 783         <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
 784       </div>
 785     </div>
 786   </div>
 787
 788   <h3>Stacked icons</h3>
 789   <div class="well">
 790     <p>
 791   <span class="icon-stack">
 792     <i class="icon-sign-blank icon-stack-base"></i>
 793     <i class="icon-twitter icon-light"></i>
 794   </span>
 795   Twitter Icon
 796   <span class="icon-stack">
 797     <i class="icon-sign-blank icon-stack-base"></i>
 798     <i class="icon-facebook icon-light"></i>
 799   </span>
 800   Facebook Icon
 801   <span class="icon-stack">
 802     <i class="icon-sign-blank icon-stack-base"></i>
 803     <i class="icon-github icon-light"></i>
 804   </span>
 805   GitHub Icon
 806 </p>
 807 <p>
 808   <span class="icon-stack">
 809     <i class="icon-circle icon-stack-base"></i>
 810     <i class="icon-twitter icon-light"></i>
 811   </span>
 812   Twitter Icon
 813   <span class="icon-stack">
 814     <i class="icon-circle icon-stack-base"></i>
 815     <i class="icon-facebook icon-light"></i>
 816   </span>
 817   Facebook Icon
 818   <span class="icon-stack">
 819     <i class="icon-circle icon-stack-base"></i>
 820     <i class="icon-github icon-light"></i>
 821   </span>
 822   GitHub Icon
 823 </p>
 824 <p>
 825   <span class="icon-stack">
 826     <i class="icon-circle-blank icon-stack-base"></i>
 827     <i class="icon-twitter"></i>
 828   </span>
 829   Twitter Icon
 830   <span class="icon-stack">
 831     <i class="icon-circle-blank icon-stack-base"></i>
 832     <i class="icon-facebook"></i>
 833   </span>
 834   Facebook Icon
 835   <span class="icon-stack">
 836     <i class="icon-circle-blank icon-stack-base"></i>
 837     <i class="icon-github"></i>
 838   </span>
 839   GitHub Icon
 840 </p>
 841   </div>
 842   <div class="well lead">
 843     <p>
 844   <span class="icon-stack">
 845     <i class="icon-sign-blank icon-stack-base"></i>
 846     <i class="icon-twitter icon-light"></i>
 847   </span>
 848   Twitter Icon
 849   <span class="icon-stack">
 850     <i class="icon-sign-blank icon-stack-base"></i>
 851     <i class="icon-facebook icon-light"></i>
 852   </span>
 853   Facebook Icon
 854   <span class="icon-stack">
 855     <i class="icon-sign-blank icon-stack-base"></i>
 856     <i class="icon-github icon-light"></i>
 857   </span>
 858   GitHub Icon
 859 </p>
 860 <p>
 861   <span class="icon-stack">
 862     <i class="icon-circle icon-stack-base"></i>
 863     <i class="icon-twitter icon-light"></i>
 864   </span>
 865   Twitter Icon
 866   <span class="icon-stack">
 867     <i class="icon-circle icon-stack-base"></i>
 868     <i class="icon-facebook icon-light"></i>
 869   </span>
 870   Facebook Icon
 871   <span class="icon-stack">
 872     <i class="icon-circle icon-stack-base"></i>
 873     <i class="icon-github icon-light"></i>
 874   </span>
 875   GitHub Icon
 876 </p>
 877 <p>
 878   <span class="icon-stack">
 879     <i class="icon-circle-blank icon-stack-base"></i>
 880     <i class="icon-twitter"></i>
 881   </span>
 882   Twitter Icon
 883   <span class="icon-stack">
 884     <i class="icon-circle-blank icon-stack-base"></i>
 885     <i class="icon-facebook"></i>
 886   </span>
 887   Facebook Icon
 888   <span class="icon-stack">
 889     <i class="icon-circle-blank icon-stack-base"></i>
 890     <i class="icon-github"></i>
 891   </span>
 892   GitHub Icon
 893 </p>
 894   </div>
 895   <h4>Stacked icons inside anchor</h4>
 896   <div class="well">
 897     <p>
 898   <a href="#">
 899     <span class="icon-stack">
 900       <i class="icon-sign-blank icon-stack-base"></i>
 901       <i class="icon-twitter icon-light"></i>
 902     </span>
 903     Twitter Icon
 904   </a>
 905   <a href="#">
 906     <span class="icon-stack">
 907       <i class="icon-sign-blank icon-stack-base"></i>
 908       <i class="icon-facebook icon-light"></i>
 909     </span>
 910     Facebook Icon
 911   </a>
 912   <a href="#">
 913     <span class="icon-stack">
 914       <i class="icon-sign-blank icon-stack-base"></i>
 915       <i class="icon-github icon-light"></i>
 916     </span>
 917     GitHub Icon
 918   </a>
 919 </p>
 920 <p>
 921   <a href="#">
 922     <span class="icon-stack">
 923       <i class="icon-circle icon-stack-base"></i>
 924       <i class="icon-twitter icon-light"></i>
 925     </span>
 926     Twitter Icon
 927   </a>
 928   <a href="#">
 929     <span class="icon-stack">
 930       <i class="icon-circle icon-stack-base"></i>
 931       <i class="icon-facebook icon-light"></i>
 932     </span>
 933     Facebook Icon
 934   </a>
 935   <a href="#">
 936     <span class="icon-stack">
 937       <i class="icon-circle icon-stack-base"></i>
 938       <i class="icon-github icon-light"></i>
 939     </span>
 940     GitHub Icon
 941   </a>
 942 </p>
 943 <p>
 944   <a href="#">
 945     <span class="icon-stack">
 946       <i class="icon-circle-blank icon-stack-base"></i>
 947       <i class="icon-twitter"></i>
 948     </span>
 949     Twitter Icon
 950   </a>
 951   <a href="#">
 952     <span class="icon-stack">
 953       <i class="icon-circle-blank icon-stack-base"></i>
 954       <i class="icon-facebook"></i>
 955     </span>
 956     Facebook Icon
 957   </a>
 958   <a href="#">
 959     <span class="icon-stack">
 960       <i class="icon-circle-blank icon-stack-base"></i>
 961       <i class="icon-github"></i>
 962     </span>
 963     GitHub Icon
 964   </a>
 965 </p>
 966   </div>
 967
 968
 969   <h3>Mirrored and rotated icons</h3>
 970   <div class="row">
 971     <div class="span6">
 972       <div class="well">
 973         <i class="icon-flag"></i>&nbsp; normal<br>
 974 <i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
 975 <i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
 976 <i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
 977 <i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
 978 <i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical
 979
 980       </div>
 981     </div>
 982     <div class="span6">
 983       <div class="well lead">
 984         <i class="icon-flag"></i>&nbsp; normal<br>
 985 <i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
 986 <i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
 987 <i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
 988 <i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
 989 <i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical
 990
 991       </div>
 992     </div>
 993   </div>
 994   <h4>Mirrored and rotated icons inside anchors and buttons</h4>
 995   <div class="row">
 996     <div class="span6">
 997       <div class="well">
 998         <a href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
 999 <a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
1000 <a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
1001 <a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
1002 <a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
1003 <a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>
1004
1005       </div>
1006     </div>
1007     <div class="span6">
1008       <div class="well">
1009         <a class="btn" href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
1010 <a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
1011 <a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
1012 <a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
1013 <a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
1014 <a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>
1015
1016       </div>
1017     </div>
1018   </div>
1019
1020 </section>
1021
1022   <div class="push"><!-- necessary for sticky footer --></div>
1023 </div>
1024 <footer class="footer hidden-print">
1025   <div class="container text-center">
1026     <div>
1027       <i class="icon-flag"></i> Font Awesome 3.2.1
1028       <span class="hidden-phone">&middot;</span><br class="visible-phone">
1029       Created and Maintained by <a href="http://twitter.com/davegandy">Dave Gandy</a>
1030     </div>
1031     <div>
1032       Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
1033       <span class="hidden-phone">&middot;</span><br class="visible-phone">
1034       Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
1035       <span class="hidden-phone hidden-tablet">&middot;</span><br class="visible-phone visible-tablet">
1036       Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
1037     </div>
1038     <div>
1039       Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
1040     </div>
1041     <div class="project">
1042       <a href="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
1043       <a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a>
1044     </div>
1045   </div>
1046 </footer>
1047
1048
1049 <script src="http://platform.twitter.com/widgets.js"></script>
1050 <script src="../assets/js/jquery-1.7.1.min.js"></script>
1051 <script src="../assets/js/ZeroClipboard-1.1.7.min.js"></script>
1052 <script src="../assets/js/bootstrap-2.3.1.min.js"></script>
1053 <script src="../assets/js/site.js"></script>
1054
1055 </body>
1056 </html>