How can I use the new version of Font Awesome in my Webflow website?

TL;DR

Get the latest Font Awesome CDN script from their website and add it to Webflow under Project Settings > Custom Code > Head Code.
Use Embed elements in the Webflow Designer to insert icons with the correct class syntax (e.g., fas, far, fab), then publish and verify they display correctly.

To use the new version of Font Awesome in your Webflow site, you need to add the updated CDN link and ensure your icons use the correct syntax.

1. Get the Latest Font Awesome CDN Link

Go to the official Font Awesome website: https://fontawesome.com
Click Start for Free or Get Started
Copy the latest Web CDN URL (it looks like https://kit.fontawesome.com/your-kit-id.js)
If needed, register or log in to get a free kit

2. Add the CDN Link to Webflow

Go to Project Settings in your Webflow dashboard
Open the Custom Code tab
Under Head Code, paste the Font Awesome <script> tag
Example: <script src="https://kit.fontawesome.com/your-kit-id.js" crossorigin="anonymous"></script>
Click Save, then Publish your site

3. Use Icons in Your Webflow Site

Open your Webflow Designer
Use an Embed element to add icons manually with HTML, e.g.:

<i class="fas fa-camera"></i> for a solid camera icon

Make sure to use the correct style prefix:
fas for solid (<i class="fas fa-star"></i>)
far for regular
fab for brands
You can look these up in the Font Awesome icon gallery

4. Confirm Icon Appearance

Publish your Webflow site to preview icons live
If they don’t appear:
Check that your CDN link is active (try visiting it directly)
Make sure you’re using correct icon names and style classes (e.g., fa-solid fa-user in Font Awesome 6)

Summary

To use the latest Font Awesome in Webflow: Get a CDN script from Font Awesome, add it in Project Settings > Custom Code, and use Embed elements to insert icons with correct class names based on the icon style you want.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What are the steps to host a site on a domain hosted via Google Domains, considering that Google Domains is not available in Germany and the domain is hosted on enom?

Are there any tutorials on integrating native Webflow and Bubble for user signups, logins, forums, and user interaction perks, while keeping Webflow as the front end and utilizing Bubble as the backend for features like building a forum?

How can I prevent products from appearing as sold out until the purchase is complete on my Webflow site?

What is the purpose of providing a Read-Only link for my Webflow site?

Can images be linked in Webflow?

How to integrate Chart.js into Webflow and display the chart on a subpage?

Can I use Webflow to change a child element's styling when hovering over its parent?

What are the best practices for using SVG instead of PNG images with Webflow to optimize the site's speed and performance without the need for fallback methods?

How can I host two Webflow sites on the same domain with the second site in a subfolder? I want to use different themes for each site.

How can I fix an element to scroll within a section in Webflow, similar to the animation used for the share function on the Webflow blog?

What is causing the scroll wheel to stop working on the published Webflow site when reaching the section with the black and white gradient?

What is the correct code snippet to prevent search engines from crawling a page in Webflow? And should the "noindex/nofollow" code be added to empty collection pages and the 404 page?

What are some plug and play, customizable options to implement a searchable map in Webflow to show business partners near the user?

What are some ways to optimize a large JSON file from an exported image sequence in Webflow?

Is it possible to create a comment area in a blog post in Webflow CMS where readers can leave comments about the post?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?

How can the text color be changed for custom input fields on Webflow?

How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?

How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?

How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?

How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?

How can I implement a ThreeJS script as a background for my Webflow project using custom code?

How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?

Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?