other extensions
Font Awesome is a popular icon font library used in web design and development.
Font Awesome contains a series of vector icons that can be easily called and used via CSS. They can be customized in size, color, shadow, and so on.
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 released many versions, the current mainstream isFont Awesome 6 、Font Awesome 5AI thinking...Font Awesome 4, all versions can be referenced at:https://fontawesome.com/versions。
This site's testing 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 to the section:
1. Domestic recommended CDN:
2. Overseas recommended CDN
3. Download directly to your local machine
Download
note listIt is not recommended to download and install it; simply reference the CDN file in the head of the HTML document.
note listThis tutorial uses version 4.7.0.
You can use the prefixfaAnd place Font Awesome icons according to their names.
The note must be an extension of this article's content!
For article submission, click here
How to obtain the registration invitation code
Click the "Try it" button to view the online example
Font Awesome is designed to work 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.
Before sharing notes, you must
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.
The note must be an extension of this article's content!
For article submission, click here
How to obtain the registration invitation code
Tip: If your icons are cut off at the top and bottom, increase the line height.
Log in
The fa-ul and fa-li classes are used to replace the default prefix in unordered lists.
The note must be an extension of this article's content!
For article submission, click here
- List icons
- List icons
- List icons
How to obtain the registration invitation code
Bordered and pulled icons
The fa-border, fa-pull-right, or fa-pull-left classes are used for pull quotes or article icons.
The note must be an extension of this article's content!
For article submission, click here
Cancel
Cancel
Cancel
How to obtain the registration invitation code
Share note
The fa-spin class can make the icon rotate, and the fa-pulse class can make the icon rotate in 8-step cycles.
The note must be an extension of this article's content!
For article submission, click here
How to obtain the registration invitation code
NicknameIE8 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.
The note must be an extension of this article's content!
For article submission, click here
How to obtain the registration invitation code
Nickname (required)
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for regular-sized icons, and fa-stack-2x for larger icons.
The fa-inverse class can be used as an alternative icon color. You can also add a larger icon class to the parent to further control the size.
The note must be an extension of this article's content!
For article submission, click here
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
How to obtain the registration invitation code
Fixed-width icons
The fa-fw class is used to set a fixed-width icon. This class is very useful when different icon widths deviate from alignment. It is especially suitable for Bootstrap's nav lists and list groups.
The note must be an extension of this article's content!
How to obtain the registration invitation code