Font Awesome icon
Font Awesome is a popular icon font library used for web design and development.
Font Awesome contains a series of vector icons that can be easily called and used via CSS, and they can be customized in size, color, shadow, and more.
Font Awesome was originally an open-source project created by Dave Gandy, with the goal of providing a flexible, easy-to-use, and scalable icon set to replace traditional image icons.
Font Awesome has been updated through many versions, and the mainstream version currently isFont Awesome 6 、Font Awesome 5AndFont Awesome 4, all versions can be referenced at:https://fontawesome.com/versions。
This site's test usedFont Awesome 4, icon list:https://fontawesome.com/v4/icons/。
To use Font Awesome icons, in the HTML page's<head>add the following line(s) to the section:
1. Domestic recommended CDN:
2. Overseas recommended CDN
3. Download directly to local
Download
Note:It is not recommended to download and install it; simply reference the CDN file in the head of the HTML document.
Note:This tutorial uses version 4.7.0.
You can use the prefixfaPlace Font Awesome icons according to the icon names.
Example
Result:
Try it Yourself »
Click the "Try it" button to view online examples
Font Awesome is designed to be used with inline elements. The `<i>` and `<span>` elements are widely used for icons.
Also note that if you change the font size or color of the icon container, the icon will change accordingly.
Large icons
The fa-lg (increases by 33%), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase icon size relative to their container.
Example
Result:
Try it Yourself »
Tip: If your icons are cut off at the top and bottom, increase the line height.
List Icon
The `fa-ul` and `fa-li` classes are used to replace the default prefix in unordered lists.
Example
Result:
- List icons
- List icons
- List icons
Try it Yourself »
Bordered and pulled icons
The fa-border, fa-pull-right, or fa-pull-left classes are used for pull quotes or article icons.
Example
Result:
Rookie Tutorial -- Learning is not only technology, but also dreams!!!
Rookie Tutorial -- Learning is not only technology, but also dreams!!!
Rookie Tutorial -- Learning is not only technology, but also dreams!!!
Try it Yourself »
Dynamic Icon
The `fa-spin` class makes the icon rotate, and the `fa-pulse` class makes the icon rotate in 8-step cycles.
Example
Result:
Try it Yourself »
Note:IE8 and IE9 do not support CSS3 animations.
Rotated and flipped icons
The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.
Example
Result:
Try it Yourself »
Stacked icons
To stack multiple icons, use the `fa-stack` class on the parent, the `fa-stack-1x` class for icons of regular size, and `fa-stack-2x` for larger icons.
The `fa-inverse` class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control size.
Example
Result:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Try it Yourself »
Fixed-width icons
The `fa-fw` class is used to set fixed-width icons. This class is very useful when different icon widths cause misalignment. It is especially suitable for Bootstrap's nav lists and list groups.
Example
Try it Yourself »