Example: basic icon fa-camera-retro
You can place Fork Awesome icons just about anywhere using the CSS Prefix
fa and the icon's
name. Font Awesome is designed to be used with inline elements (we like the
<i> tag for
brevity, but using a
<span> is more semantically correct).
To increase icon sizes relative to their container, use the
fa-lg (33% increase),
fa-li to easily replace default bullets in unordered lists.
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
fa-pull-left for easy pull quotes or
Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)
fa-spin class to get any icon to rotate, and use
fa-pulse to have it rotate
with 8 steps. Works well with
Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.
Note: CSS3 animations aren't supported in IE8 - IE9.
To arbitrarily rotate and flip icons, use the
To stack multiple icons, use the
fa-stack class on the parent, the
for the regularly sized icon, and
fa-stack-2x for the larger icon.
can be used as an alternative icon color. You can even throw larger icon classes on the parent
to get further control of sizing.
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)
With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.