Posted almost 6 years ago. Visible to the public. Linked content.

Fontawesome 4 helper classes

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

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
almost 6 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more