Font Awesome is a font and icon toolkit based on CSS and LESS. It was created by Dave Gandy and used for Twitter Bootstrap, later integrated into BootstrapCDN. Font Awesome holds a 20% market share in websites that use third-party Font Scripts, ranking second after Google Fonts.
—— Wikipedia
First, go to the FontAwesome official website to download the toolkit: https://fontawesome.com/download
Download the Free For Web version and extract the compressed file to obtain all the necessary files.
Create a /assets folder in the root directory of your website, and create /css and /webfonts folders within that folder.
Copy the fontawesome.css, brands.css, and solid.css files from the extracted /fontawesome-free-6.2.0-web/css folder to /assets/css.
Copy the fa-brands-400.woff2, fa-brands-400.ttf, fa-solid-900.woff2, and fa-solid-900.ttf files from the extracted /fontawesome-free-6.2.0-web/webfonts folder to /assets/webfonts.
If you want to choose a different directory to place these files, please remember to modify the font reference paths in brands.css and solid.css.
In the <head> tag of your index.html file, add the following references:
<link href="./assets/css/fontawesome.css" rel="stylesheet">
<link href="./assets/css/brands.css" rel="stylesheet">
<link href="./assets/css/solid.css" rel="stylesheet">
After that, you can directly use the <i> tag to reference the icons in your web page. Enjoy!
For different ways to reference icons, please refer to the official documentation.
Search for icons: https://fontawesome.com/search
Official documentation: https://fontawesome.com/docs
Official tutorial: https://fontawesome.com/docs/web/setup/host-yourself/webfonts