Fontawesome Webflow _verified_ (COMPLETE — 2025)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> Download the Font Awesome package, upload to Webflow’s asset manager, and link the CSS file. Using Icons in Webflow Option A: HTML Embed element (Most reliable) Drag an HTML Embed onto your canvas and paste:
<i class="fa-solid fa-arrow-right hover-slide"></i> Then in Webflow Designer → :
.icon-list li:before font-family: "Font Awesome 6 Free"; content: "\f00c"; margin-right: 10px; color: #10b981; fontawesome webflow
→ Use fab not fas or far . Example: fab fa-github .
.sr-only position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; <link rel="stylesheet" href="https://cdnjs
$('.accordion-trigger').click(function() $(this).find('.accordion-icon').toggleClass('fa-chevron-up'); ); <i class="fa-solid fa-circle-notch fa-spin fa-2x"></i> Classes: fa-spin = continuous rotation, fa-pulse = stepped rotation. Sizing & Styling Tricks | Need | Webflow Approach | |------|------------------| | Larger icon | Add class fa-2x , fa-3x up to fa-10x | | Fixed width | fa-fw | | Rotate 90° | fa-rotate-90 | | Flip horizontally | fa-flip-horizontal | | Custom color | Set color in Webflow style panel | | Custom size | font-size: 24px (overrides FA sizing) | Troubleshooting (Common Webflow Issues) ❌ Icon shows as a square/rectangle → Missing font-family or wrong CDN. Check console for 404 errors.
.hover-slide transition: transform 0.2s ease; .hover-slide transition: transform 0.2s ease
<i class="fa-solid fa-camera"></i> Add a Text Block → Type a space → In the Selector field , add: