Font Awesome & Web Awesome Kit Support

✨ What's New

QuillKit now supports loading Font Awesome and Web Awesome icons via modern JavaScript kits instead of traditional CSS files:

🔑 Font Awesome 6 Pro

Access to premium Pro icons with advanced features and better performance

🚀 Web Awesome 3.0

Next-generation Font Awesome (v7) with enhanced icons and capabilities

⚡ Automatic Loading

Kits load automatically when configured - no manual script tags needed

🎯 Icon Picker Ready

All icons work seamlessly in the built-in icon picker modal

PRO Demo 1: Font Awesome 6 Pro Kit

This editor uses the Font Awesome 6 Pro kit for enhanced icon support.

How to test:

Look for the star icon (⭐) button in the editor toolbar
Click it to open the icon picker modal
Browse through the Font Awesome icons
Click any icon to insert it into the editor content
The icon should render correctly in both the picker and the editor

NEW Demo 2: Web Awesome 3.0 Kit

This editor uses the Web Awesome 3.0 kit (Font Awesome 7.0) - the latest generation of icon technology.

How to test:

Click the star icon (⭐) in the toolbar
The icon picker will open with Font Awesome icons
Select and insert icons into your content
Notice the modern rendering and performance

🔧 Configuration Guide

Basic Configuration

To use Font Awesome or Web Awesome kits in your QuillKit instance:

const editor = QuillKit.init('#my-editor', {
  icons: {
    enabled: true,
    fontAwesomeKit: 'https://kit.fontawesome.com/aee0b6cfec.js'
  }
});

Web Awesome Configuration

const editor = QuillKit.init('#my-editor', {
  icons: {
    enabled: true,
    webAwesomeKit: 'https://kit.webawesome.com/0cae55a306764d0d.js'
  }
});

Using Both Kits (Advanced)

You can configure both kits simultaneously if needed:

const editor = QuillKit.init('#my-editor', {
  icons: {
    enabled: true,
    fontAwesomeKit: 'https://kit.fontawesome.com/aee0b6cfec.js',
    webAwesomeKit: 'https://kit.webawesome.com/0cae55a306764d0d.js'
  }
});

Configuration Options

`fontAwesomeKit`

URL to your Font Awesome Kit JavaScript file. Set to null to disable.

`webAwesomeKit`

URL to your Web Awesome Kit JavaScript file. Set to null to disable.

`bootstrap`

Enable Bootstrap Icons alongside Font Awesome. Defaults to true.

`autoLoadCss`

Auto-load CSS for non-kit icons. Kits load regardless of this setting.

📚 Technical Details

How It Works

Automatic Script Loading: When a kit URL is configured, the editor automatically injects the kit's JavaScript into the page
Smart CSS Management: If using kits, the editor won't load redundant CDN CSS to avoid conflicts
Icon Picker Integration: The existing icon picker automatically works with kit-loaded icons
Font Detection: The editor waits for icon fonts to load before displaying the picker

Advantages of Kits

Better Performance: Kits only load the icons you use, reducing page weight
Pro Features: Access to Font Awesome Pro icons (if you have a Pro account)
Modern Technology: Kits use newer technology for better rendering and features
Auto-Updates: Kits can be updated on the Font Awesome/Web Awesome side without code changes

Browser Support

Kit support works in all modern browsers that support JavaScript modules and dynamic script loading:

✅ Chrome 61+
✅ Firefox 60+
✅ Safari 11+
✅ Edge 79+

🎨 Font Awesome & Web Awesome Kit Support