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

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

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