Font Awesome Visual Test Cases
Author: Dave Gandy
Description: Font Awesome, the iconic font designed for Bootstrap

# Visual Test Cases

### Icons Icons should have proper alignment and not be clipped

Building
Building Large
Building
Building Large
Building
Building Large
Building Large
Circle
Circle Large
Circle
Circle Large
Circle
Circle Large
Circle Large

### Links with Icons icon should activate link & underline

Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here
Link Here

### Navbar should stay same height

### Plain buttons next to buttons w/icons should be same height, icons not clipped

#### Buttons

#### Anchors

Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button
Button Button

### Buttons with pulled 2x, 3x, 4x should be same height, have correct line height

Longer
Button Longer
Button
Longer
Button Longer
Button
Longer
Button Longer
Button

### Nav pills & nav tabs should be same height and properly vertically aligned

### 2x, 3x, 4x icons in text should have margins next to and below text

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.

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.

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.
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.
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.

### Bullets should wrap appropriately, have proper spacing

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. foo foo

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. foo foo

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. foo foo

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 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.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.

### Spinning icons icons should be aligned well and on center, buttons should be same height, won't work in ie7

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

#### icon-large

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

#### Bootstrap Prepend and Append

### Stacked icons

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

#### Stacked icons inside anchor

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

Twitter Icon Facebook Icon GitHub Icon

### Mirrored and rotated icons

normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical
normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical

#### Mirrored and rotated icons inside anchors and buttons

normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical
normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical