Can someone provide a tutorial on using Font Awesome in Webflow now that font uploading capability has been added?

You can now use Font Awesome in Webflow more flexibly thanks to the ability to upload custom fonts directly. Here's how to integrate Font Awesome 6 into Webflow using font upload, enabling access to solid icons and more without relying on external scripts.

1. Download Font Awesome Web Fonts

• Go to the Font Awesome website and download the free or Pro version if you have access.
• In the unzipped folder, locate the webfonts directory and the css/all.css file.
• Make sure you're using Font Awesome 6, as it supports modern webfont embedding.

2. Upload Font Files to Webflow

• Open your Webflow project and go to Project Settings > Fonts.
• Click Upload and upload the following WOFF2 font files from the webfonts folder:
• fa-solid-900.woff2 (for solid icons)
• fa-regular-400.woff2 (for regular icons, optional)
• fa-brands-400.woff2 (for brand icons, optional)
• Assign each uploaded font a unique name, e.g., Font Awesome Solid.

3. Add Corresponding CSS Styles

• Open Project Settings > Custom Code tab > Inside Head Tag.

• Paste the following minimal @font-face declarations, modified to match your Webflow-generated font URLs:

• Get the hosted URL of each uploaded font from the Font Manager UI in Fonts tab.

• Example:

  ```

  ```

• Repeat for each weight you uploaded (regular, brands, etc.), changing font-family and font-weight accordingly.

4. Use Font Awesome in Your Webflow Project

• Add a Text Element (e.g., Paragraph or Span) to your canvas where you want the icon.
• Set the font family to match the name you gave, e.g., Font Awesome Solid.
• In the text field, paste the corresponding Unicode character for the icon you want. You can find these from the Font Awesome Cheatsheet.
• Example: To show a heart icon (fa-heart), paste \f004 into a span or use the actual character via copy and paste from a test HTML file.
• Set the font weight to match (e.g., 900 for solid).

5. Optional: Add Custom Classes for Simpler Styling

• Create custom Combo Classes like .icon, and apply the Font Awesome font family.
• Use that class to apply size, color, hover effects, etc.
• This allows you to reuse icons without constantly resetting styles.

Summary

By uploading Font Awesome webfonts and defining custom @font-face rules in your Webflow project, you can now use icons natively as text content. This avoids reliance on CDN scripts and gives you full control over styling and performance.