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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

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