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
Posted by Dominik Schöler to makandra dev (2015-04-16 09:54)