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

   1 ---
   2 title: Glyphicons Visual Test Cases
   3 relative_path: ../
   4 ---
   5
   6
   7 <!DOCTYPE html>
   8 <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
   9 <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
  10 <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
  11 <!--[if (gte IE 9)|!(IE)]><!-->
  12 <html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
  13 <head>
  14   <!-- Basic Page Needs
  15  ================================================== -->
  16   <meta charset="utf-8" />
  17   <title>{% if page.title %}{{ page.title }}{% endif %}</title>
  18   <meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
  19   <meta name="author" content="Dave Gandy">
  20   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21   <!--<meta name="viewport" content="initial-scale=1; maximum-scale=1">-->
  22
  23   <!--[if lt IE 9]>
  24   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  25   <![endif]-->
  26
  27   <!-- CSS
  28  ================================================== -->
  29
  30   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  31   <!-- Le fav and touch icons -->
  32   <link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
  33
  34   <script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
  35   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  36
  37   <script type="text/javascript">
  38     var _gaq = _gaq || [];
  39     _gaq.push(['_setAccount', 'UA-30136587-1']);
  40     _gaq.push(['_trackPageview']);
  41
  42     (function() {
  43       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  44       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  45       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  46     })();
  47   </script>
  48 </head>
  49 <body data-spy="scroll" data-target=".navbar">
  50 <div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
  51
  52 <section class="container">
  53 <h1 class="page-header">Visual Test Cases</h1>
  54
  55 <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
  56 <div class="row">
  57   <div class="col-md-3">
  58     <div class="well">
  59       <i class="glyphicon glyphicon-calendar"></i> Calendar
  60     </div>
  61   </div>
  62   <div class="col-md-3">
  63     <div class="well">
  64       <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
  65     </div>
  66   </div>
  67   <div class="col-md-3">
  68     <i class="glyphicon glyphicon-calendar"></i> Calendar
  69   </div>
  70   <div class="col-md-3">
  71     <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
  72   </div>
  73 </div>
  74 <div class="row" style="font-size: 24px; line-height: 1.5em;">
  75   <div class="col-md-4">
  76     <div class="well">
  77       <i class="glyphicon glyphicon-calendar"></i> Calendar
  78     </div>
  79   </div>
  80   <div class="col-md-4">
  81     <div class="well">
  82       <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
  83     </div>
  84   </div>
  85   <div class="col-md-4">
  86     <i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
  87   </div>
  88 </div>
  89 <div class="row">
  90   <div class="col-md-3">
  91     <div class="well">
  92       <i class="glyphicon glyphicon-minus-sign"></i> Circle
  93     </div>
  94   </div>
  95   <div class="col-md-3">
  96     <div class="well">
  97       <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
  98     </div>
  99   </div>
 100   <div class="col-md-3">
 101     <i class="glyphicon glyphicon-minus-sign"></i> Circle
 102   </div>
 103   <div class="col-md-3">
 104     <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
 105   </div>
 106 </div>
 107 <div class="row" style="font-size: 24px; line-height: 1.5em;">
 108   <div class="col-md-4">
 109     <div class="well">
 110       <i class="glyphicon glyphicon-minus-sign"></i> Circle
 111     </div>
 112   </div>
 113   <div class="col-md-4">
 114     <div class="well">
 115       <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
 116     </div>
 117   </div>
 118   <div class="col-md-4">
 119     <i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
 120   </div>
 121 </div>
 122
 123
 124 <h3>Links with Icons <small>icon should activate link & underline</small></h3>
 125 <div class="row lead">
 126   <div class="col-md-3">
 127     <a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
 128   </div>
 129   <div class="col-md-3">
 130     <a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
 131   </div>
 132   <div class="col-md-3">
 133     <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
 134   </div>
 135   <div class="col-md-3">
 136     <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
 137   </div>
 138 </div>
 139 <div class="row">
 140   <div class="col-md-3">
 141     <a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
 142   </div>
 143   <div class="col-md-3">
 144     <a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
 145   </div>
 146   <div class="col-md-3">
 147     <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
 148   </div>
 149   <div class="col-md-3">
 150     <a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
 151   </div>
 152 </div>
 153
 154
 155 <h3>Navbar  <small>should stay same height </small></h3>
 156 <nav class="navbar navbar-inverse" role="navigation">
 157   <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-flag"></i> Font Awesome</a>
 158   <ul class="nav navbar-nav">
 159     <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
 160     <li class="dropdown" style="border: solid 1px white;">
 161       <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 162         Nav Item 2
 163         <b class="caret"></b>
 164       </a>
 165       <ul class="dropdown-menu" role="menu">
 166         <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
 167         <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
 168       </ul>
 169     </li>
 170     <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 3</a></li>
 171     <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-envelope"></i> Nav Item 4</a></li>
 172     <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 5</a></li>
 173     <li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 6</a></li>
 174   </ul>
 175 </nav>
 176
 177
 178 <h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
 179 <h4>Buttons</h4>
 180 <div class="row">
 181   <div class="col-md-6">
 182     <div style="border: solid 1px #d3d3d3; text-align: center;">
 183       <div>
 184         <button class="btn btn-default btn-xs">Button</button>
 185         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</button>
 186         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></button>
 187       </div>
 188       <div>
 189         <button class="btn btn-default btn-sm">Button</button>
 190         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</button>
 191         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
 192       </div>
 193       <div>
 194         <button class="btn btn-default">Button</button>
 195         <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</button>
 196         <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
 197       </div>
 198       <div>
 199         <button class="btn btn-default btn-lg">Button</button>
 200         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</button>
 201         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></button>
 202       </div>
 203     </div>
 204   </div>
 205   <div class="col-md-6">
 206     <div style="border: solid 1px #d3d3d3; text-align: center;">
 207       <div>
 208         <button class="btn btn-default btn-xs">Button</button>
 209         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
 210         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
 211       </div>
 212       <div>
 213         <button class="btn btn-default btn-sm">Button</button>
 214         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
 215         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
 216       </div>
 217       <div>
 218         <button class="btn btn-default">Button</button>
 219         <button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
 220         <button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
 221       </div>
 222       <div>
 223         <button class="btn btn-default btn-lg">Button</button>
 224         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
 225         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
 226       </div>
 227     </div>
 228   </div>
 229 </div>
 230 <div class="row">
 231   <div class="col-md-6">
 232     <div style="border: solid 1px #d3d3d3; text-align: center;">
 233       <div>
 234         <button class="btn btn-default btn-xs">Button</button>
 235         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
 236         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></button>
 237       </div>
 238       <div>
 239         <button class="btn btn-default btn-sm">Button</button>
 240         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
 241         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></button>
 242       </div>
 243       <div>
 244         <button class="btn btn-default">Button</button>
 245         <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
 246         <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></button>
 247       </div>
 248       <div>
 249         <button class="btn btn-default btn-lg">Button</button>
 250         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
 251         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></button>
 252       </div>
 253     </div>
 254   </div>
 255   <div class="col-md-6">
 256     <div style="border: solid 1px #d3d3d3; text-align: center;">
 257       <div>
 258         <button class="btn btn-default btn-xs">Button</button>
 259         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
 260         <button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
 261       </div>
 262       <div>
 263         <button class="btn btn-default btn-sm">Button</button>
 264         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
 265         <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
 266       </div>
 267       <div>
 268         <button class="btn btn-default">Button</button>
 269         <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
 270         <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
 271       </div>
 272       <div>
 273         <button class="btn btn-default btn-lg">Button</button>
 274         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
 275         <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
 276       </div>
 277     </div>
 278   </div>
 279 </div>
 280
 281
 282 <h4>Anchors</h4>
 283 <div class="row">
 284   <div class="col-md-6">
 285     <div style="border: solid 1px #d3d3d3; text-align: center;">
 286       <div>
 287         <a class="btn btn-default btn-xs">Button</a>
 288         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</a>
 289         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></a>
 290       </div>
 291       <div>
 292         <a class="btn btn-default btn-sm">Button</a>
 293         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</a>
 294         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></a>
 295       </div>
 296       <div>
 297         <a class="btn btn-default">Button</a>
 298         <a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</a>
 299         <a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
 300       </div>
 301       <div>
 302         <a class="btn btn-default btn-lg">Button</a>
 303         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</a>
 304         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></a>
 305       </div>
 306     </div>
 307   </div>
 308   <div class="col-md-6">
 309     <div style="border: solid 1px #d3d3d3; text-align: center;">
 310       <div>
 311         <a class="btn btn-default btn-xs">Button</a>
 312         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
 313         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
 314       </div>
 315       <div>
 316         <a class="btn btn-default btn-sm">Button</a>
 317         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
 318         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
 319       </div>
 320       <div>
 321         <a class="btn btn-default">Button</a>
 322         <a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
 323         <a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
 324       </div>
 325       <div>
 326         <a class="btn btn-default btn-lg">Button</a>
 327         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
 328         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
 329       </div>
 330     </div>
 331   </div>
 332 </div>
 333 <div class="row">
 334   <div class="col-md-6">
 335     <div style="border: solid 1px #d3d3d3; text-align: center;">
 336       <div>
 337         <a class="btn btn-default btn-xs">Button</a>
 338         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
 339         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></a>
 340       </div>
 341       <div>
 342         <a class="btn btn-default btn-sm">Button</a>
 343         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
 344         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></a>
 345       </div>
 346       <div>
 347         <a class="btn btn-default">Button</a>
 348         <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
 349         <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></a>
 350       </div>
 351       <div>
 352         <a class="btn btn-default btn-lg">Button</a>
 353         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
 354         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></a>
 355       </div>
 356     </div>
 357   </div>
 358   <div class="col-md-6">
 359     <div style="border: solid 1px #d3d3d3; text-align: center;">
 360       <div>
 361         <a class="btn btn-default btn-xs">Button</a>
 362         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
 363         <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
 364       </div>
 365       <div>
 366         <a class="btn btn-default btn-sm">Button</a>
 367         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
 368         <a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
 369       </div>
 370       <div>
 371         <a class="btn btn-default">Button</a>
 372         <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
 373         <a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
 374       </div>
 375       <div>
 376         <a class="btn btn-default btn-lg">Button</a>
 377         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
 378         <a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
 379       </div>
 380     </div>
 381   </div>
 382 </div>
 383
 384 <h3>Button groups <small>should be same height</small></h3>
 385 <div class="row">
 386   <div class="col-md-4">
 387     <div style="border: solid 1px #d3d3d3;">
 388       <div class="btn-group">
 389         <button class="btn btn-default btn-lg">
 390           <i class="icon-adjust"></i>
 391         </button>
 392         <button class="btn btn-default btn-lg">
 393           Text
 394         </button>
 395       </div>
 396     </div>
 397   </div>
 398   <div class="col-md-4">
 399     <div style="border: solid 1px #d3d3d3;">
 400       <div class="btn-group">
 401         <button class="btn btn-default">
 402           <i class="icon-adjust"></i>
 403         </button>
 404         <button class="btn btn-default">
 405           Text
 406         </button>
 407       </div>
 408     </div>
 409   </div>
 410   <div class="col-md-4">
 411     <div style="border: solid 1px #d3d3d3;">
 412       <div class="btn-group">
 413         <button class="btn btn-default btn-sm">
 414           <i class="icon-adjust"></i>
 415         </button>
 416         <button class="btn btn-default btn-sm">
 417           Text
 418         </button>
 419       </div>
 420     </div>
 421   </div>
 422 </div>
 423
 424 <h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
 425 <div class="row">
 426   <div class="col-md-4">
 427     <div style="border: solid 1px #d3d3d3;">
 428       <a class="btn btn-default btn-lg" href="#">
 429         <i class="icon-github icon-2x pull-left"></i>
 430         Longer<br>Button</a>
 431       <a class="btn btn-default btn-lg" href="#">
 432         Longer<br>Button</a>
 433     </div>
 434   </div>
 435   <div class="col-md-4">
 436     <div style="border: solid 1px #d3d3d3;">
 437       <a class="btn btn-default" href="#">
 438         <i class="icon-github icon-2x pull-left"></i>
 439         Longer<br>Button</a>
 440       <a class="btn btn-default" href="#">
 441         Longer<br>Button</a>
 442     </div>
 443   </div>
 444   <div class="col-md-4">
 445     <div style="border: solid 1px #d3d3d3;">
 446       <a class="btn btn-default btn-sm" href="#">
 447         <i class="icon-github icon-2x pull-left"></i>
 448         Longer<br>Button</a>
 449       <a class="btn btn-default btn-sm" href="#">
 450         Longer<br>Button</a>
 451     </div>
 452   </div>
 453 </div>
 454
 455
 456 <h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
 457 <div class="row">
 458   <div class="col-md-9">
 459     <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
 460       <li class="active"><a href="#">Nav Item 1</a></li>
 461       <li class="dropdown active">
 462         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 463           Nav Item 2
 464           <col-md- class="caret"></col-md->
 465         </a>
 466         <ul class="dropdown-menu" role="menu">
 467           <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
 468           <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
 469         </ul>
 470       </li>
 471       <li class="dropdown active">
 472         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 473           Nav Item 3
 474           <i class="icon-caret-down"></i>
 475         </a>
 476         <ul class="dropdown-menu" role="menu">
 477           <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
 478           <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
 479         </ul>
 480       </li>
 481       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
 482       <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 483       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
 484       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
 485     </ul>
 486     <ul class="nav nav-tabs">
 487       <li class="active"><a href="#">Nav Item 1</a></li>
 488       <li class="dropdown active">
 489         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 490           Nav Item 2
 491           <col-md- class="caret"></col-md->
 492         </a>
 493         <ul class="dropdown-menu" role="menu">
 494           <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
 495           <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
 496         </ul>
 497       </li>
 498       <li class="dropdown active">
 499         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 500           Nav Item 3
 501           <i class="icon-caret-down"></i>
 502         </a>
 503         <ul class="dropdown-menu" role="menu">
 504           <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
 505           <li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
 506         </ul>
 507       </li>
 508       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
 509       <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 510       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
 511       <li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
 512     </ul>
 513   </div>
 514   <div class="col-md-3">
 515     <ul class="nav nav-list">
 516       <li>
 517         <a href="#c1">
 518           <i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview
 519         </a>
 520       </li>
 521       <li>
 522         <a href="#c1">
 523           Overview
 524           <i class="icon-chevron-right icon-fixed-width pull-right"></i>
 525         </a>
 526       </li>
 527     </ul>
 528   </div>
 529 </div>
 530
 531
 532
 533 <h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
 534 <div class="row">
 535   <div class="col-md-6">
 536     <p class="lead">
 537       <i class="icon-stethoscope icon-3x pull-left icon-border"></i>
 538       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.
 539     </p>
 540   </div>
 541   <div class="col-md-6">
 542     <p class="lead">
 543       <i class="icon-ambulance icon-4x pull-right icon-border"></i>
 544       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.
 545     </p>
 546   </div>
 547 </div>
 548 <div class="row">
 549   <div class="col-md-4">
 550     <i class="glyphicon glyphicon-calendar icon-2x pull-left icon-border"></i>
 551     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.
 552   </div>
 553   <div class="col-md-4">
 554     <i class="icon-stethoscope icon-3x pull-right icon-border"></i>
 555     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.
 556   </div>
 557   <div class="col-md-4">
 558     <i class="icon-ambulance icon-4x pull-left"></i>
 559     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.
 560   </div>
 561 </div>
 562
 563
 564 <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
 565 <div class="row">
 566   <div class="col-md-6">
 567     <div style="border: solid 1px #d3d3d3;">
 568       <ul class="icons-ul">
 569         <li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 570         <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>
 571         <li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 572           <i class="glyphicon glyphicon-calendar"></i>
 573           <col-md- class="label">foo</col-md->
 574           <a class="btn btn-default">foo</a>
 575         </li>
 576       </ul>
 577     </div>
 578   </div>
 579   <div class="col-md-6">
 580     <div style="border: solid 1px #d3d3d3;">
 581       <ul class="icons-ul">
 582         <li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 583         <li><i class="icon-li icon-arrow-right glyphicon-lg"></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>
 584         <li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 585       </ul>
 586     </div>
 587   </div>
 588 </div>
 589 <div class="row">
 590   <div class="col-md-6">
 591     <div style="border: solid 1px #d3d3d3;">
 592       <ul class="icons-ul lead">
 593         <li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 594         <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>
 595         <li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 596       </ul>
 597     </div>
 598   </div>
 599   <div class="col-md-6">
 600     <div style="border: solid 1px #d3d3d3;">
 601       <ul class="icons-ul lead">
 602         <li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 603         <li><i class="icon-li icon-arrow-right glyphicon-lg"></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>
 604         <li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 605       </ul>
 606     </div>
 607   </div>
 608 </div>
 609 <div class="row">
 610   <div class="col-md-6">
 611     <div style="border: solid 1px #d3d3d3;">
 612       <ul class="icons-ul">
 613         <li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 614         <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>
 615         <li><a href="#"><i class="icon-li glyphicon glyphicon-calendar"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 616       </ul>
 617     </div>
 618   </div>
 619   <div class="col-md-6">
 620     <div style="border: solid 1px #d3d3d3;">
 621       <ul class="icons-ul">
 622         <li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 623         <li><a href="#"><i class="icon-li icon-arrow-right glyphicon-lg"></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>
 624         <li><a href="#"><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 625       </ul>
 626     </div>
 627   </div>
 628 </div>
 629 <div class="row">
 630   <div class="col-md-6">
 631     <div style="border: solid 1px #d3d3d3;">
 632       <ul class="icons-ul">
 633         <li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 634         <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>
 635         <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 636           <i class="glyphicon glyphicon-calendar"></i>
 637           <col-md- class="label">foo</col-md->
 638           <a class="btn btn-default">foo</a>
 639         </li>
 640       </ul>
 641     </div>
 642   </div>
 643   <div class="col-md-6">
 644     <div style="border: solid 1px #d3d3d3;">
 645       <ul class="icons-ul">
 646         <li><i class="icon-li icon-refresh icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 647         <li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></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>
 648         <li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 649           <i class="glyphicon glyphicon-calendar"></i>
 650           <col-md- class="label">foo</col-md->
 651           <a class="btn btn-default">foo</a>
 652         </li>
 653       </ul>
 654     </div>
 655   </div>
 656 </div>
 657
 658
 659 <div class="row">
 660   <div class="col-md-6">
 661     <div style="border: solid 1px #d3d3d3;">
 662       <ul>
 663         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 664         <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>
 665         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 666       </ul>
 667     </div>
 668   </div>
 669   <div class="col-md-6">
 670     <div style="border: solid 1px #d3d3d3;">
 671       <ul>
 672         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 673         <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>
 674         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 675       </ul>
 676     </div>
 677   </div>
 678 </div>
 679
 680
 681 <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
 682 <div style="border: solid 1px #d3d3d3;">
 683   <i class="icon-refresh icon-spin"></i> Loading...
 684   <button class="btn btn-default btn-sm"><i class="icon-refresh icon-spin"></i> Loading...</button>
 685   <button class="btn btn-default btn-sm">Loading...</button>
 686   <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
 687   <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
 688   <a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a>
 689 </div>
 690 <div style="border: solid 1px #d3d3d3;">
 691   <i class="icon-refresh icon-spin"></i> Loading...
 692   <button class="btn btn-default"><i class="icon-refresh icon-spin"></i> Loading...</button>
 693   <button class="btn btn-default">Loading...</button>
 694   <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
 695   <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
 696 </div>
 697 <div style="border: solid 1px #d3d3d3;">
 698   <i class="icon-spinner icon-spin"></i> Loading...
 699   <button class="btn btn-default btn-lg"><i class="icon-spinner icon-spin"></i> Loading...</button>
 700   <button class="btn btn-default btn-lg">Loading...</button>
 701   <i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
 702   <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
 703 </div>
 704 <h4>glyphicon-lg</h4>
 705 <div style="border: solid 1px #d3d3d3;">
 706   <i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
 707   <button class="btn btn-default btn-sm"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
 708   <button class="btn btn-default btn-sm">Loading...</button>
 709   <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
 710   <button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
 711 </div>
 712 <div style="border: solid 1px #d3d3d3;">
 713   <i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
 714   <button class="btn btn-default"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
 715   <button class="btn btn-default">Loading...</button>
 716   <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
 717   <button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
 718 </div>
 719 <div style="border: solid 1px #d3d3d3;">
 720   <i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...
 721   <button class="btn btn-default btn-lg"><i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...</button>
 722   <button class="btn btn-default btn-lg">Loading...</button>
 723   <i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
 724   <button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
 725 </div>
 726 <h4>Bootstrap Prepend and Append</h4>
 727 <div class="row">
 728   <div class="col-md-6">
 729     <div class="input-prepend">
 730       <col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
 731       <input class="col-md-2" id="prependedInput" type="text" placeholder="Username">
 732     </div>
 733   </div>
 734   <div class="col-md-6">
 735     <div class="input-append">
 736       <input class="col-md-2" id="appendedInput" type="text">
 737       <col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
 738     </div>
 739   </div>
 740 </div>
 741
 742 <h3>Stacked icons</h3>
 743 <div class="well">
 744   {% include tests/stacked.html %}
 745 </div>
 746 <div class="well lead">
 747   {% include tests/stacked.html %}
 748 </div>
 749 <h4>Stacked icons inside anchor</h4>
 750 <div class="well">
 751   {% include tests/stacked-inside-anchor.html %}
 752 </div>
 753
 754
 755 <h3>Mirrored and rotated icons</h3>
 756 <div class="row">
 757   <div class="col-md-6">
 758     <div class="well">
 759       {% include tests/rotated-flipped.html %}
 760     </div>
 761   </div>
 762   <div class="col-md-6">
 763     <div class="well lead">
 764       {% include tests/rotated-flipped.html %}
 765     </div>
 766   </div>
 767 </div>
 768 <h4>Mirrored and rotated icons inside anchors and buttons</h4>
 769 <div class="row">
 770   <div class="col-md-6">
 771     <div class="well">
 772       {% include tests/rotated-flipped-inside-anchor.html %}
 773     </div>
 774   </div>
 775   <div class="col-md-6">
 776     <div class="well">
 777       {% include tests/rotated-flipped-inside-btn.html %}
 778     </div>
 779   </div>
 780 </div>
 781
 782 </section>
 783
 784   <div class="push"><!-- necessary for sticky footer --></div>
 785 </div>
 786
 787 <script src="http://platform.twitter.com/widgets.js"></script>
 788 <script src="{{ page.relative_path }}assets/js/jquery-1.7.1.min.js"></script>
 789 <script src="{{ page.relative_path }}assets/js/ZeroClipboard-1.1.7.min.js"></script>
 790 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 791
 792 </body>
 793 </html>
 794
 795