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 through CSS, and it can be customized for size, color, shadow, etc.
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 many times. Currently the mainstream versions are **Font Awesome 6**, **Font Awesome 5**, and **Font Awesome 4**. All versions can be referenced at: [https://fontawesome.com/versions](https://fontawesome.com/versions).
This site uses **Font Awesome 4** for testing, the icon list is available at: [https://fontawesome.com/v4/icons/](https://fontawesome.com/v4/icons/).
To use Font Awesome icons, add the following line to the section of your HTML page:
1γDomestic recommended CDN:
2γInternational recommended CDN
3γDirect download to local
(
> **Note:** It is not recommended to download and install. Simply reference the CDN file in the HTML document head.
>
>
> **Note:** This tutorial uses version 4.7.0.
You can place Font Awesome icons using the prefix fa and the icon name.
## Example
Result:
[Try it Β»](#)
Click the "Try it" button to view the online example
Font Awesome is designed to be used with inline elements.
and 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.
* * *
## Large Icons
The fa-lg (increase 33%), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon size relative to its container.
## Example
Result:
[Try it Β»](#)
Tip: If your icons are being cut off at the top and bottom, increase the line height.
* * *
## List Icons
The fa-ul and fa-li classes are used to replace the default prefixes in unordered lists.
## Example
- List icons
- List icons
- List icons
Result:
* List icons
* List icons
* List icons
[Try it Β»](#)
* * *
## Border and Pulled Icons
The fa-border, fa-pull-right or fa-pull-left classes are used for pull quotes or article icons.
## Example
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
Result:
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
-- Learning not just technology, but dreamsοΌοΌοΌ
[Try it Β»](#)
* * *
## Animated Icons
The fa-spin class can make icons rotate, and the fa-pulse class can make icons rotate in an 8-step cycle.
## Example
Result:
[Try it Β»](#)
**Note:** IE8 and IE9 do not support CSS3 animations.
* *
YouTip