🎨 QuillKit Icon Modal - Fixed!

⚠️ 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.

✅ What's Fixed

The icon modal now properly handles icon font loading with these improvements:

Waits for CSS and fonts to load before displaying the modal
Shows text labels as fallback when icon fonts don't load or are loading
Automatically hides labels when icon glyphs render successfully
Uses Font Loading API to detect when fonts are ready

Icon Fonts Loaded Successfully

These icons demonstrate that Bootstrap Icons and Font Awesome are loaded and rendering properly on this page:

Bootstrap Icon: heart-fill

Bootstrap Icon: star-fill

Font Awesome: home

Font Awesome: user

✓ Icons rendering correctly! The icon modal will display icons the same way.

Test the Icon Modal

Click the ⭐ star icon button in the toolbar below to open the icon modal.

Expected behavior:

Modal opens after a brief delay (waiting for fonts)
Icon glyphs display in each button (like the previews above)
Text labels are hidden because icons loaded successfully
You can click any icon to insert it into the editor

📝 Technical Details

How it works:

ensureIconCssLoaded() loads CSS files and waits for them to be ready
waitForIconFonts() uses the Font Loading API to wait for icon fonts
hasIconRendered() checks if an icon glyph has been rendered
Icons with .icons-loaded class hide their text labels via CSS

Fallback behavior:

If icon fonts fail to load (e.g., network issues, ad blockers), users will see text labels like "home", "star", "heart" so they can still identify and use icons.