Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Get the latest Font Awesome kit or CDN link from fontawesome.com.
  • Add the script or link to Webflow’s Project Settings under the Head Code section.
  • Use icon markup inside Embed elements in Webflow Designer and publish your site.

To use the newest version of Font Awesome in your Webflow project, you need to manually add the Font Awesome kit or link since Webflow doesn't automatically support the latest version.

  • Go to the Font Awesome website: https://fontawesome.com.
  • Sign up or log in to get access to your Font Awesome Kit or download the CDN reference.
  • If using a kit, copy the Kit embed URL (e.g., https://kit.fontawesome.com/yourKitID.js).
  • Alternatively, for the free version, copy the CDN link from the “Start Using Free” section (e.g., https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x.x/css/all.min.css).
  • Go to Project Settings in Webflow.
  • Click the Custom Code tab.
  • Paste the kit script tag or CDN into the Head Code section (only the script or link, not the full HTML page).
  • Example script (for a kit):
    <script src="https://kit.fontawesome.com/yourKitID.js" crossorigin="anonymous"></script>
  • Example link (for CDN):
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x.x/css/all.min.css">

3. Apply Font Awesome Icons in Webflow

  • Open the Webflow Designer.
  • Add an Embed element where you want the icon.
  • Insert the appropriate Font Awesome icon markup, such as:
    <i class="fas fa-user"></i> (for solid icons) or
    <i class="fab fa-twitter"></i> (for brand icons).

4. Publish Your Website

  • Click Publish and choose your domain.
  • Test the icons on the live site to confirm they are rendering correctly.

Summary

To use the new version of Font Awesome in Webflow, embed the latest script or CDN link in your Project Settings under Custom Code, then use icon markup inside Embed elements in the Designer. Be sure to publish changes for them to appear.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I share and copy pages and content between projects in Webflow?
What should I do if a Webflow integration is not working on my website?
Is it possible to display data from an external database, such as Airtable, on a Webflow page? I am looking for a solution where Webflow acts as the front-end only and retrieves and displays data from a separate database. Additionally, if I have a blog page that displays articles from the external database, is it possible to have unique URLs for each article, even though the data is not from Webflow CMS? Why or why not?
How can I highlight the 'current' page in Webflow CMS collection template pages for my nav-bar links? (For example, I have a page called 'case studies' that shows items from a CMS collection also called 'case studies'. When showing the CMS collection template page for each case study, I want the nav link for 'case studies' to be highlighted to indicate the user's current location on the site). Can anyone suggest a solution? Thank you.
Can I set up a Webflow landing page with buttons that, when clicked, open a different page with a specific tab already open? Do I need to write code for this, and if so, could you provide a tip?
How can I dynamically redirect to a CMS created after form submission in Webflow?
I am unable to find a specific question in the provided prompt.
How can I add inline text on hover in Webflow?
How can I increase the right padding of the dropdown arrow in Webflow?
Does Webflow have a built-in photo gallery tool, or is there an alternative service available to create photo galleries without additional expenses for hosting or integration with Adobe Lightroom?
How can I ensure that a Lottie animation remains in place on a webpage while the content beneath it scrolls and only ends after a certain duration or number of pixels, without constantly adjusting the timing in Webflow's scroll effects?
Has anyone experienced the issue of Googlebot being blocked by robots.txt in Webflow, even though access has been allowed in the file?
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
How can I enable event tracking for button clicks in Webflow using Google Analytics?
How can I easily make future edits to exported Webflow sites hosted on Bluehost (or another hosting company) to avoid complications and still have the ability to make quick changes in the Webflow creator? Can you provide guidance on integrating WordPress for blogging with Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?