Icon CSS Auto-Injection Test

⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.

⚠️ Important: This page intentionally does NOT include Bootstrap Icons or Font Awesome CSS in the <head>. The editor will automatically inject these stylesheets when you open the icon modal, ensuring icons render properly!

Test 1: Auto-Injection with Default Settings

This editor uses default settings with auto CSS injection enabled.

Test: Click the ⭐ icon button. The Bootstrap Icons and Font Awesome CSS should be automatically injected, and icons should render properly in the modal.

Status: Waiting for test... Click the icon button to trigger CSS injection.

Test 2: Bootstrap Icons Only

This editor is configured to auto-inject only Bootstrap Icons CSS.

Test 3: Font Awesome Only

This editor is configured to auto-inject only Font Awesome CSS.

Test 4: No Auto-Injection (Disabled)

This editor has auto CSS injection disabled. Icons will appear as text in the modal.

How Auto CSS Injection Works

The QuillKit now automatically injects the required icon library CSS when you open the icon modal:

Default behavior: CSS is automatically injected when the icon modal opens
Smart detection: Checks if CSS is already loaded to avoid duplicates
Configurable: Set autoLoadCss: false to disable auto-injection
Custom CDN URLs: Specify custom CDN URLs via bootstrapCdn and fontAwesomeCdn options

Configuration Example

const editor = QuillKit.init('#my-editor', {
  icons: {
    enabled: true,
    bootstrap: true,
    fontAwesome: true,
    autoLoadCss: true,  // Auto-inject CSS (default: true)
    bootstrapCdn: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css',
    fontAwesomeCdn: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
  }
});