To use the new version of Font Awesome in your Webflow website, follow these steps:
1. Create a new project or open an existing project in Webflow.
2. Go to the Font Awesome website (fontawesome.com) and sign up for a free account if you haven't already.
3. Once logged in, navigate to the "Get Started" page and select the version of Font Awesome you want to use. For example, you can choose Font Awesome 6.
4. Scroll down to the "Web Embed" section, and you'll see the different options for embedding Font Awesome into your website.
5. Select the "Webfont + CSS" option, and you'll be provided with a code snippet to add to your Webflow project.
6. Copy the code snippet provided by Font Awesome.
7. Go back to your Webflow project and navigate to the "Project Settings" by clicking on the gear icon in the left sidebar.
8. In the "Custom Code" tab, scroll down to the "Footer Code" section.
9. Paste the Font Awesome code snippet into the "Footer Code" section.
10. Save your changes.
Now that you have added Font Awesome to your Webflow project, you can start using the icons in your website. To add an icon, follow these steps:
1. Open the Webflow Designer and navigate to the page where you want to add the icon.
2. Drag and drop an HTML Embed element onto the page where you want the icon to appear.
3. Double-click the HTML Embed element to open the code editor.
4. In the code editor, add an HTML element with the appropriate Font Awesome classes and naming convention. For example, to add a search icon, you can use ``.
5. Save and close the code editor, and you'll see the Font Awesome icon displayed on your page.
You can now use any of the Font Awesome icons in your Webflow project by adding HTML elements with the appropriate classes. Be sure to check the Font Awesome documentation for the version you're using to explore the available icons and customization options.