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

   1 ---
   2 layout: base
   3 title: Font Awesome Visual Test Cases
   4 relative_path: ../
   5 ---
   6
   7 <section class="container">
   8   <h1 class="page-header">Visual Test Cases</h1>
   9
  10   <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
  11   <div class="row">
  12     <div class="span3">
  13       <div class="well">
  14         <i class="icon-building"></i> Building
  15       </div>
  16     </div>
  17     <div class="span3">
  18       <div class="well">
  19         <i class="icon-building icon-large"></i> Building Large
  20       </div>
  21     </div>
  22     <div class="span3">
  23       <i class="icon-building"></i> Building
  24     </div>
  25     <div class="span3">
  26       <i class="icon-building icon-large"></i> Building Large
  27     </div>
  28   </div>
  29   <div class="row" style="font-size: 24px; line-height: 1.5em;">
  30     <div class="span4">
  31       <div class="well">
  32         <i class="icon-building"></i> Building
  33       </div>
  34     </div>
  35     <div class="span4">
  36       <div class="well">
  37         <i class="icon-building icon-large"></i> Building Large
  38       </div>
  39     </div>
  40     <div class="span4">
  41       <i class="icon-building icon-large"></i> Building Large
  42     </div>
  43   </div>
  44   <div class="row">
  45     <div class="span3">
  46       <div class="well">
  47         <i class="icon-circle"></i> Circle
  48       </div>
  49     </div>
  50     <div class="span3">
  51       <div class="well">
  52         <i class="icon-circle icon-large"></i> Circle Large
  53       </div>
  54     </div>
  55     <div class="span3">
  56       <i class="icon-circle"></i> Circle
  57     </div>
  58     <div class="span3">
  59       <i class="icon-circle icon-large"></i> Circle Large
  60     </div>
  61   </div>
  62   <div class="row" style="font-size: 24px; line-height: 1.5em;">
  63     <div class="span4">
  64       <div class="well">
  65         <i class="icon-circle"></i> Circle
  66       </div>
  67     </div>
  68     <div class="span4">
  69       <div class="well">
  70         <i class="icon-circle icon-large"></i> Circle Large
  71       </div>
  72     </div>
  73     <div class="span4">
  74       <i class="icon-circle icon-large"></i> Circle Large
  75     </div>
  76   </div>
  77
  78
  79   <h3>Links with Icons <small>icon should activate link & underline</small></h3>
  80   <div class="row lead">
  81     <div class="span2">
  82       <a href="#"><i class="icon-building"></i> Link Here</a>
  83     </div>
  84     <div class="span2">
  85       <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
  86     </div>
  87     <div class="span2">
  88       <a href="#"><i class="icon-caret-down"></i> Link Here</a>
  89     </div>
  90     <div class="span2">
  91       <a href="#">Link Here <i class="icon-double-angle-right"></i></a>
  92     </div>
  93     <div class="span2">
  94       <a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
  95     </div>
  96     <div class="span2">
  97       <a href="#">Link Here <i class="icon-caret-down"></i></a>
  98     </div>
  99   </div>
 100   <div class="row">
 101     <div class="span2">
 102       <a href="#"><i class="icon-building"></i> Link Here</a>
 103     </div>
 104     <div class="span2">
 105       <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
 106     </div>
 107     <div class="span2">
 108       <a href="#"><i class="icon-caret-down"></i> Link Here</a>
 109     </div>
 110     <div class="span2">
 111       <a href="#">Link Here <i class="icon-double-angle-right"></i></a>
 112     </div>
 113     <div class="span2">
 114       <a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
 115     </div>
 116     <div class="span2">
 117       <a href="#">Link Here <i class="icon-caret-down"></i></a>
 118     </div>
 119   </div>
 120
 121
 122   <h3>Navbar  <small>should stay same height </small></h3>
 123   <div class="navbar navbar-inverse navbar-static-top">
 124     <div class="navbar-inner">
 125       <div class="container">
 126         <a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a>
 127         <ul class="nav">
 128           <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
 129           <li class="dropdown" style="border: solid 1px white;">
 130             <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 131               Nav Item 2
 132               <i class="icon-caret-down"></i>
 133             </a>
 134             <ul class="dropdown-menu" role="menu">
 135               <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 136               <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 137             </ul>
 138           </li>
 139           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
 140           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-envelope"></i> Nav Item 4</a></li>
 141           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 5</a></li>
 142           <li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle"></i> Nav Item 6</a></li>
 143         </ul>
 144       </div>
 145     </div>
 146   </div>
 147
 148
 149   <h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
 150   <h4>Buttons</h4>
 151   <div class="row">
 152     <div class="span6">
 153       <div style="border: solid 1px #d3d3d3; text-align: center;">
 154         <div>
 155           <button class="btn btn-mini">Button</button>
 156           <button class="btn btn-mini"><i class="icon-building"></i> Button</button>
 157           <button class="btn btn-mini"><i class="icon-building"></i></button>
 158         </div>
 159         <div>
 160           <button class="btn btn-small">Button</button>
 161           <button class="btn btn-small"><i class="icon-building"></i> Button</button>
 162           <button class="btn btn-small"><i class="icon-building"></i></button>
 163         </div>
 164         <div>
 165           <button class="btn">Button</button>
 166           <button class="btn"><i class="icon-building"></i> Button</button>
 167           <button class="btn"><i class="icon-building"></i></button>
 168         </div>
 169         <div>
 170           <button class="btn btn-large">Button</button>
 171           <button class="btn btn-large"><i class="icon-building"></i> Button</button>
 172           <button class="btn btn-large"><i class="icon-building"></i></button>
 173         </div>
 174       </div>
 175     </div>
 176     <div class="span6">
 177       <div style="border: solid 1px #d3d3d3; text-align: center;">
 178         <div>
 179           <button class="btn btn-mini">Button</button>
 180           <button class="btn btn-mini"><i class="icon-building icon-large"></i> Button</button>
 181           <button class="btn btn-mini"><i class="icon-building icon-large"></i></button>
 182         </div>
 183         <div>
 184           <button class="btn btn-small">Button</button>
 185           <button class="btn btn-small"><i class="icon-building icon-large"></i> Button</button>
 186           <button class="btn btn-small"><i class="icon-building icon-large"></i></button>
 187         </div>
 188         <div>
 189           <button class="btn">Button</button>
 190           <button class="btn"><i class="icon-building icon-large"></i> Button</button>
 191           <button class="btn"><i class="icon-building icon-large"></i></button>
 192         </div>
 193         <div>
 194           <button class="btn btn-large">Button</button>
 195           <button class="btn btn-large"><i class="icon-building icon-large"></i> Button</button>
 196           <button class="btn btn-large"><i class="icon-building icon-large"></i></button>
 197         </div>
 198       </div>
 199     </div>
 200   </div>
 201   <div class="row">
 202     <div class="span6">
 203       <div style="border: solid 1px #d3d3d3; text-align: center;">
 204         <div>
 205           <button class="btn btn-mini">Button</button>
 206           <button class="btn btn-mini"><i class="icon-circle"></i> Button</button>
 207           <button class="btn btn-mini"><i class="icon-circle"></i></button>
 208         </div>
 209         <div>
 210           <button class="btn btn-small">Button</button>
 211           <button class="btn btn-small"><i class="icon-circle"></i> Button</button>
 212           <button class="btn btn-small"><i class="icon-circle"></i></button>
 213         </div>
 214         <div>
 215           <button class="btn">Button</button>
 216           <button class="btn"><i class="icon-circle"></i> Button</button>
 217           <button class="btn"><i class="icon-circle"></i></button>
 218         </div>
 219         <div>
 220           <button class="btn btn-large">Button</button>
 221           <button class="btn btn-large"><i class="icon-circle"></i> Button</button>
 222           <button class="btn btn-large"><i class="icon-circle"></i></button>
 223         </div>
 224       </div>
 225     </div>
 226     <div class="span6">
 227       <div style="border: solid 1px #d3d3d3; text-align: center;">
 228         <div>
 229           <button class="btn btn-mini">Button</button>
 230           <button class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</button>
 231           <button class="btn btn-mini"><i class="icon-circle icon-large"></i></button>
 232         </div>
 233         <div>
 234           <button class="btn btn-small">Button</button>
 235           <button class="btn btn-small"><i class="icon-circle icon-large"></i> Button</button>
 236           <button class="btn btn-small"><i class="icon-circle icon-large"></i></button>
 237         </div>
 238         <div>
 239           <button class="btn">Button</button>
 240           <button class="btn"><i class="icon-circle icon-large"></i> Button</button>
 241           <button class="btn"><i class="icon-circle icon-large"></i></button>
 242         </div>
 243         <div>
 244           <button class="btn btn-large">Button</button>
 245           <button class="btn btn-large"><i class="icon-circle icon-large"></i> Button</button>
 246           <button class="btn btn-large"><i class="icon-circle icon-large"></i></button>
 247         </div>
 248       </div>
 249     </div>
 250   </div>
 251
 252
 253   <h4>Anchors</h4>
 254   <div class="row">
 255     <div class="span6">
 256       <div style="border: solid 1px #d3d3d3; text-align: center;">
 257         <div>
 258           <a class="btn btn-mini">Button</a>
 259           <a class="btn btn-mini"><i class="icon-building"></i> Button</a>
 260           <a class="btn btn-mini"><i class="icon-building"></i></a>
 261         </div>
 262         <div>
 263           <a class="btn btn-small">Button</a>
 264           <a class="btn btn-small"><i class="icon-building"></i> Button</a>
 265           <a class="btn btn-small"><i class="icon-building"></i></a>
 266         </div>
 267         <div>
 268           <a class="btn">Button</a>
 269           <a class="btn"><i class="icon-building"></i> Button</a>
 270           <a class="btn"><i class="icon-building"></i></a>
 271         </div>
 272         <div>
 273           <a class="btn btn-large">Button</a>
 274           <a class="btn btn-large"><i class="icon-building"></i> Button</a>
 275           <a class="btn btn-large"><i class="icon-building"></i></a>
 276         </div>
 277       </div>
 278     </div>
 279     <div class="span6">
 280       <div style="border: solid 1px #d3d3d3; text-align: center;">
 281         <div>
 282           <a class="btn btn-mini">Button</a>
 283           <a class="btn btn-mini"><i class="icon-building icon-large"></i> Button</a>
 284           <a class="btn btn-mini"><i class="icon-building icon-large"></i></a>
 285         </div>
 286         <div>
 287           <a class="btn btn-small">Button</a>
 288           <a class="btn btn-small"><i class="icon-building icon-large"></i> Button</a>
 289           <a class="btn btn-small"><i class="icon-building icon-large"></i></a>
 290         </div>
 291         <div>
 292           <a class="btn">Button</a>
 293           <a class="btn"><i class="icon-building icon-large"></i> Button</a>
 294           <a class="btn"><i class="icon-building icon-large"></i></a>
 295         </div>
 296         <div>
 297           <a class="btn btn-large">Button</a>
 298           <a class="btn btn-large"><i class="icon-building icon-large"></i> Button</a>
 299           <a class="btn btn-large"><i class="icon-building icon-large"></i></a>
 300         </div>
 301       </div>
 302     </div>
 303   </div>
 304   <div class="row">
 305     <div class="span6">
 306       <div style="border: solid 1px #d3d3d3; text-align: center;">
 307         <div>
 308           <a class="btn btn-mini">Button</a>
 309           <a class="btn btn-mini"><i class="icon-circle"></i> Button</a>
 310           <a class="btn btn-mini"><i class="icon-circle"></i></a>
 311         </div>
 312         <div>
 313           <a class="btn btn-small">Button</a>
 314           <a class="btn btn-small"><i class="icon-circle"></i> Button</a>
 315           <a class="btn btn-small"><i class="icon-circle"></i></a>
 316         </div>
 317         <div>
 318           <a class="btn">Button</a>
 319           <a class="btn"><i class="icon-circle"></i> Button</a>
 320           <a class="btn"><i class="icon-circle"></i></a>
 321         </div>
 322         <div>
 323           <a class="btn btn-large">Button</a>
 324           <a class="btn btn-large"><i class="icon-circle"></i> Button</a>
 325           <a class="btn btn-large"><i class="icon-circle"></i></a>
 326         </div>
 327       </div>
 328     </div>
 329     <div class="span6">
 330       <div style="border: solid 1px #d3d3d3; text-align: center;">
 331         <div>
 332           <a class="btn btn-mini">Button</a>
 333           <a class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</a>
 334           <a class="btn btn-mini"><i class="icon-circle icon-large"></i></a>
 335         </div>
 336         <div>
 337           <a class="btn btn-small">Button</a>
 338           <a class="btn btn-small"><i class="icon-circle icon-large"></i> Button</a>
 339           <a class="btn btn-small"><i class="icon-circle icon-large"></i></a>
 340         </div>
 341         <div>
 342           <a class="btn">Button</a>
 343           <a class="btn"><i class="icon-circle icon-large"></i> Button</a>
 344           <a class="btn"><i class="icon-circle icon-large"></i></a>
 345         </div>
 346         <div>
 347           <a class="btn btn-large">Button</a>
 348           <a class="btn btn-large"><i class="icon-circle icon-large"></i> Button</a>
 349           <a class="btn btn-large"><i class="icon-circle icon-large"></i></a>
 350         </div>
 351       </div>
 352     </div>
 353   </div>
 354
 355
 356   <h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
 357   <div class="row">
 358     <div class="span4">
 359       <div style="border: solid 1px #d3d3d3;">
 360         <a class="btn btn-large" href="#">
 361           <i class="icon-github icon-2x pull-left"></i>
 362           Longer<br>Button</a>
 363         <a class="btn btn-large" href="#">
 364           Longer<br>Button</a>
 365       </div>
 366     </div>
 367     <div class="span4">
 368       <div style="border: solid 1px #d3d3d3;">
 369         <a class="btn" href="#">
 370           <i class="icon-github icon-2x pull-left"></i>
 371           Longer<br>Button</a>
 372         <a class="btn" href="#">
 373           Longer<br>Button</a>
 374       </div>
 375     </div>
 376     <div class="span4">
 377       <div style="border: solid 1px #d3d3d3;">
 378         <a class="btn btn-small" href="#">
 379           <i class="icon-github icon-2x pull-left"></i>
 380           Longer<br>Button</a>
 381         <a class="btn btn-small" href="#">
 382           Longer<br>Button</a>
 383       </div>
 384     </div>
 385   </div>
 386
 387
 388   <h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
 389   <div class="row">
 390     <div class="span9">
 391       <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
 392         <li class="active"><a href="#">Nav Item 1</a></li>
 393         <li class="dropdown active">
 394           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 395             Nav Item 2
 396             <span class="caret"></span>
 397           </a>
 398           <ul class="dropdown-menu" role="menu">
 399             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 400             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 401           </ul>
 402         </li>
 403         <li class="dropdown active">
 404           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 405             Nav Item 3
 406             <i class="icon-caret-down"></i>
 407           </a>
 408           <ul class="dropdown-menu" role="menu">
 409             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 410             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 411           </ul>
 412         </li>
 413         <li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
 414         <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 415         <li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
 416         <li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
 417       </ul>
 418       <ul class="nav nav-tabs">
 419         <li class="active"><a href="#">Nav Item 1</a></li>
 420         <li class="dropdown active">
 421           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 422             Nav Item 2
 423             <span class="caret"></span>
 424           </a>
 425           <ul class="dropdown-menu" role="menu">
 426             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 427             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 428           </ul>
 429         </li>
 430         <li class="dropdown active">
 431           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 432             Nav Item 3
 433             <i class="icon-caret-down"></i>
 434           </a>
 435           <ul class="dropdown-menu" role="menu">
 436             <li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
 437             <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
 438           </ul>
 439         </li>
 440         <li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
 441         <li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
 442         <li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
 443         <li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
 444       </ul>
 445     </div>
 446     <div class="span3">
 447       <ul class="nav nav-list">
 448         <li>
 449           <a href="#c1">
 450             <i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview
 451           </a>
 452         </li>
 453         <li>
 454           <a href="#c1">
 455             Overview
 456             <i class="icon-chevron-right icon-fixed-width pull-right"></i>
 457           </a>
 458         </li>
 459       </ul>
 460     </div>
 461   </div>
 462
 463
 464
 465   <h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
 466   <div class="row">
 467     <div class="span6">
 468       <p class="lead">
 469         <i class="icon-stethoscope icon-3x pull-left icon-border"></i>
 470         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.
 471       </p>
 472     </div>
 473     <div class="span6">
 474       <p class="lead">
 475         <i class="icon-ambulance icon-4x pull-right icon-border"></i>
 476         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.
 477       </p>
 478     </div>
 479   </div>
 480   <div class="row">
 481     <div class="span4">
 482       <i class="icon-building icon-2x pull-left icon-border"></i>
 483       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.
 484     </div>
 485     <div class="span4">
 486       <i class="icon-stethoscope icon-3x pull-right icon-border"></i>
 487       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.
 488     </div>
 489     <div class="span4">
 490       <i class="icon-ambulance icon-4x pull-left"></i>
 491       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.
 492     </div>
 493   </div>
 494
 495
 496   <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
 497   <div class="row">
 498     <div class="span6">
 499       <div style="border: solid 1px #d3d3d3;">
 500         <ul class="icons-ul">
 501           <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 502           <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>
 503           <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 504             <i class="icon-building"></i>
 505             <span class="label">foo</span>
 506             <a class="btn">foo</a>
 507           </li>
 508         </ul>
 509       </div>
 510     </div>
 511     <div class="span6">
 512       <div style="border: solid 1px #d3d3d3;">
 513         <ul class="icons-ul">
 514           <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 515           <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>
 516           <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 517         </ul>
 518       </div>
 519     </div>
 520   </div>
 521   <div class="row">
 522     <div class="span6">
 523       <div style="border: solid 1px #d3d3d3;">
 524         <ul class="icons-ul lead">
 525           <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 526           <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>
 527           <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 528         </ul>
 529       </div>
 530     </div>
 531     <div class="span6">
 532       <div style="border: solid 1px #d3d3d3;">
 533         <ul class="icons-ul lead">
 534           <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 535           <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>
 536           <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 537         </ul>
 538       </div>
 539     </div>
 540   </div>
 541   <div class="row">
 542     <div class="span6">
 543       <div style="border: solid 1px #d3d3d3;">
 544         <ul class="icons-ul">
 545           <li><a href="#"><i class="icon-li icon-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 546           <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>
 547           <li><a href="#"><i class="icon-li icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 548         </ul>
 549       </div>
 550     </div>
 551     <div class="span6">
 552       <div style="border: solid 1px #d3d3d3;">
 553         <ul class="icons-ul">
 554           <li><a href="#"><i class="icon-li icon-double-angle-right icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 555           <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>
 556           <li><a href="#"><i class="icon-li icon-building icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 557         </ul>
 558       </div>
 559     </div>
 560   </div>
 561   <div class="row">
 562     <div class="span6">
 563       <div style="border: solid 1px #d3d3d3;">
 564         <ul class="icons-ul">
 565           <li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 566           <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>
 567           <li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 568             <i class="icon-building"></i>
 569             <span class="label">foo</span>
 570             <a class="btn">foo</a>
 571           </li>
 572         </ul>
 573       </div>
 574     </div>
 575     <div class="span6">
 576       <div style="border: solid 1px #d3d3d3;">
 577         <ul class="icons-ul">
 578           <li><i class="icon-li icon-refresh icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 579           <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>
 580           <li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 581             <i class="icon-building"></i>
 582             <span class="label">foo</span>
 583             <a class="btn">foo</a>
 584           </li>
 585         </ul>
 586       </div>
 587     </div>
 588   </div>
 589
 590
 591   <div class="row">
 592     <div class="span6">
 593       <div style="border: solid 1px #d3d3d3;">
 594         <ul>
 595           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 596           <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>
 597           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 598         </ul>
 599       </div>
 600     </div>
 601     <div class="span6">
 602       <div style="border: solid 1px #d3d3d3;">
 603         <ul>
 604           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 605           <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>
 606           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 607         </ul>
 608       </div>
 609     </div>
 610   </div>
 611
 612
 613   <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
 614   <div style="border: solid 1px #d3d3d3;">
 615     <i class="icon-refresh icon-spin"></i> Loading...
 616     <button class="btn btn-small"><i class="icon-refresh icon-spin"></i> Loading...</button>
 617     <button class="btn btn-small">Loading...</button>
 618     <i class="icon-circle-blank icon-spin"></i> Loading...
 619     <button class="btn btn-small"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 620     <a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a>
 621   </div>
 622   <div style="border: solid 1px #d3d3d3;">
 623     <i class="icon-refresh icon-spin"></i> Loading...
 624     <button class="btn"><i class="icon-refresh icon-spin"></i> Loading...</button>
 625     <button class="btn">Loading...</button>
 626     <i class="icon-circle-blank icon-spin"></i> Loading...
 627     <button class="btn"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 628   </div>
 629   <div style="border: solid 1px #d3d3d3;">
 630     <i class="icon-spinner icon-spin"></i> Loading...
 631     <button class="btn btn-large"><i class="icon-spinner icon-spin"></i> Loading...</button>
 632     <button class="btn btn-large">Loading...</button>
 633     <i class="icon-circle-blank icon-spin"></i> Loading...
 634     <button class="btn btn-large"><i class="icon-circle-blank icon-spin"></i> Loading...</button>
 635   </div>
 636   <h4>icon-large</h4>
 637   <div style="border: solid 1px #d3d3d3;">
 638     <i class="icon-refresh icon-large icon-spin"></i> Loading...
 639     <button class="btn btn-small"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button>
 640     <button class="btn btn-small">Loading...</button>
 641     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 642     <button class="btn btn-small"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 643   </div>
 644   <div style="border: solid 1px #d3d3d3;">
 645     <i class="icon-refresh icon-large icon-spin"></i> Loading...
 646     <button class="btn"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button>
 647     <button class="btn">Loading...</button>
 648     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 649     <button class="btn"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 650   </div>
 651   <div style="border: solid 1px #d3d3d3;">
 652     <i class="icon-spinner icon-large icon-spin"></i> Loading...
 653     <button class="btn btn-large"><i class="icon-spinner icon-large icon-spin"></i> Loading...</button>
 654     <button class="btn btn-large">Loading...</button>
 655     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
 656     <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
 657   </div>
 658   <h4>Bootstrap Prepend and Append</h4>
 659   <div class="row">
 660     <div class="span6">
 661       <div class="input-prepend">
 662         <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
 663         <input class="span2" id="prependedInput" type="text" placeholder="Username">
 664       </div>
 665     </div>
 666     <div class="span6">
 667       <div class="input-append">
 668         <input class="span2" id="appendedInput" type="text">
 669         <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
 670       </div>
 671     </div>
 672   </div>
 673
 674   <h3>Stacked icons</h3>
 675   <div class="well">
 676     {% include tests/stacked.html %}
 677   </div>
 678   <div class="well lead">
 679     {% include tests/stacked.html %}
 680   </div>
 681   <h4>Stacked icons inside anchor</h4>
 682   <div class="well">
 683     {% include tests/stacked-inside-anchor.html %}
 684   </div>
 685
 686
 687   <h3>Mirrored and rotated icons</h3>
 688   <div class="row">
 689     <div class="span6">
 690       <div class="well">
 691         {% include tests/rotated-flipped.html %}
 692       </div>
 693     </div>
 694     <div class="span6">
 695       <div class="well lead">
 696         {% include tests/rotated-flipped.html %}
 697       </div>
 698     </div>
 699   </div>
 700   <h4>Mirrored and rotated icons inside anchors and buttons</h4>
 701   <div class="row">
 702     <div class="span6">
 703       <div class="well">
 704         {% include tests/rotated-flipped-inside-anchor.html %}
 705       </div>
 706     </div>
 707     <div class="span6">
 708       <div class="well">
 709         {% include tests/rotated-flipped-inside-btn.html %}
 710       </div>
 711     </div>
 712   </div>
 713
 714 </section>