After you get up and running, you can place Fork Awesome icons just about
anywhere with the
Some examples appreciatively re-used from the Bootstrap documentation.
The following examples are kept simple. So please be sure to visit the manual accessibility examples and read more about making your icons accessible for all users.
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. Fork 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-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
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.
Fork Awesome works great with the full range of Bootstrap components.
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.