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