Fontawesome 4 helper classes

Posted . Visible to the public.

Fontawesome 4 ships with many useful CSS helper classes.

Enlarge Icon

Add fa-lg (133%), fa-2x, fa-3x, fa-4x or fa-5x.

Fixed-width Icon

Add fa-fw. Will give all icons the same width.

Styling Lists

Add fa-ul to a <UL> and fa fa-<icon name> fa-li to a <LI> to give the list items custom "bullets".

Bordered Icon

Add fa-border to get a border around the icon.

Spinning Icon

Add fa-spin to make any icon rotate. Suggested icons: fa-spinner, fa-refresh, fa-cog. Doesn't work in IE <10.

Rotated Icon

Add fa-rotate-<degree> with degree ∈ [90, 180, 270] to rotate any icon.

Flipped Icon

Add fa-flip-<horizontal|vertical> to flip any icon.

Stacked Icons (aka "combined")

Wrap the icons in a span with the fa-stack class (you may add other helper classes here, like fa-lg).
Next, add fa-stack-2x to the base icon and fa-stack-1x to the actual icon.

Credits

Dominik Schöler
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2015-04-16 09:54)