Avant comes baked with Font Awesome 4.0.1, which provides you with scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
One Font, 370 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
Desktop Friendly
To use on the desktop or for a complete set of vectors,
check out the cheatsheet provided below.
Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
Screen Reader Compatible
Font Awesome won't trip up screen readers, unlike other icon fonts.
Rotated and Flipped
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
To arbitrarily rotate and flip icons, use the
fa-rotate-*
and
fa-flip-*
classes.
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
Stacked Icons
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
To stack multiple icons, use the fa-stack
class on the parent, the fa-stack-1x
for the regularly sized icon, and fa-stack-2x
for the larger icon. fa-inverse
can be used as an alternative icon color. You can even throw larger classes on the parent to get further control of sizing.
Better Bullet Lists
- List icons (like these)
- can be used
- to replace
- default bullets in lists
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
<li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>