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

Profile picture of Dominik Schöler
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)