index.html
1 --- 2 layout: base 3 title: Fork 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 fa-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 fa-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 fa-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 fa-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 fa-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 <h4>Stacked icon background with text foreground</h4> 733 <div class="well"> 734 {% include tests/stacked-with-text.html %} 735 </div> 736 737 738 <h3>Mirrored and rotated icons</h3> 739 <div class="row"> 740 <div class="col-md-6"> 741 <div class="well"> 742 {% include tests/rotated-flipped.html %} 743 </div> 744 </div> 745 <div class="col-md-6"> 746 <div class="well lead"> 747 {% include tests/rotated-flipped.html %} 748 </div> 749 </div> 750 </div> 751 <h4>Mirrored and rotated icons inside anchors and buttons</h4> 752 <div class="row"> 753 <div class="col-md-6"> 754 <div class="well"> 755 {% include tests/rotated-flipped-inside-anchor.html %} 756 </div> 757 </div> 758 <div class="col-md-6"> 759 <div class="well"> 760 {% include tests/rotated-flipped-inside-btn.html %} 761 </div> 762 </div> 763 </div> 764 765 <h3>Animation Wobble <a href="https://github.com/FortAwesome/Font-Awesome/issues/671">#671</a></h3> 766 <div> 767 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-spin"></i></span> 768 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-spin"></i></span> 769 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-spin"></i></span> 770 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-pulse"></i></span> 771 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-pulse"></i></span> 772 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-pulse"></i></span> 773 </div> 774 <div> 775 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-spin fa-5x"></i></span> 776 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-spin fa-5x"></i></span> 777 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-spin fa-5x"></i></span> 778 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-pulse fa-5x"></i></span> 779 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-pulse fa-5x"></i></span> 780 <span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-pulse fa-5x"></i></span> 781 </div> 782 <div> 783 <button class="btn btn-default"><i class="fa fa-spinner fa-spin"></i></button> 784 <button class="btn btn-default"><i class="fa fa-cog fa-spin"></i></button> 785 <button class="btn btn-default"><i class="fa fa-circle-o-notch fa-spin"></i></button> 786 <button class="btn btn-default"><i class="fa fa-spinner fa-pulse"></i></button> 787 <button class="btn btn-default"><i class="fa fa-cog fa-pulse"></i></button> 788 <button class="btn btn-default"><i class="fa fa-circle-o-notch fa-pulse"></i></button> 789 </div> 790 <div> 791 <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button> 792 <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button> 793 <button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button> 794 <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-pulse"></i></button> 795 <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-pulse"></i></button> 796 <button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-pulse"></i></button> 797 </div> 798 799 800 </section>