Set up access to the Javascript API in your project.
Referencing Icons
We recommend referencing icons in your HTML with a dedicated element you'll use only for icons. We find the <i> tag perfect for the job. That element will contain: 1) Font Awesome specific style prefix (e.g. fa-solid), and 2) the icon's name (prefixed with fa-) you want to display.
<iclass="fa-solid fa-question-circle"></i><!-- solid style of the question circle icon --><iclass="fa-regular fa-question-circle"></i><!-- regular style of the question circle icon --><iclass="fa-light fa-question-circle"></i><!-- light style of the question circle icon --><iclass="fa-brands fa-facebook"></i><!-- facebook brand icon--><iclass="fa-brands fa-facebook-f"></i><!-- facebook "f" brand icon-->
In Font Awesome 6, Font Awesome includes 6 different styles - Solid, Regular, Light, Thin, Duotone, and Brands. Here's a break down of each's use and availability.
The first version of Font Awesome used web fonts to encode icon data into a container the browser could use. In Version 5, we added support for SVG which lets us do some fun things with icon data.
Since it's just text, we can easily store this information in JavaScript files. This can be easier to deal with in some projects versus web font files and CSS.
Package names
Icon content packages are segmented by license and style:
import{ library }from'@fortawesome/fontawesome-svg-core'import{ fas }from'@fortawesome/free-solid-svg-icons'import{ far }from'@fortawesome/free-regular-svg-icons'import{ fab }from'@fortawesome/free-brands-svg-icons'<!-- Add all icons to the library so you can use it in your page -->
library.add(fas, far, fab)
To import the same icon from different styles:
import{ library }from'@fortawesome/fontawesome-svg-core'import{ faCircle as fasFaCircle }from'@fortawesome/free-solid-svg-icons'// ES Module "as" syntaximport{ faCircle as farFaCircle }from'@fortawesome/free-regular-svg-icons'
library.add(fasFaCircle, farFaCircle)