Inline Images Within Text Using Keywords

What You'll Create

Decorative images or icons in Squarespace that appear inline with your text, flowing naturally with the typography. The technique uses CSS triggered by specific keywords in link URLs (like #furniture) or by custom text colors. The graphics size automatically to match your text, creating that editorial look where illustrations enhance headlines without breaking the reading flow.

The Problem It Solves

Squarespace doesn't support inline images within text blocks—you can't just drop an icon mid-sentence. Most workarounds involve icon fonts (limited selection) or breaking text into multiple blocks with images between (layout headaches). This technique lets you mark where images should appear using native editor features, then CSS handles the insertion.

Perfect For

Playful headers with decorative icons between words, branded typography with logo marks or symbols, custom bullet alternatives that flow with text, editorial layouts with inline illustrations, feature callouts with visual markers, any design where icons should feel like typography.

What Makes This Different

The trigger system is what makes this practical. Instead of hardcoding positions, you mark inline image locations using either link URLs with keywords (text linked to #furniture gets a furniture icon) or custom text colors (pink text triggers a specific graphic). This means you or clients can add new inline images without touching code—just apply the right link or color in the editor.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Text Block with link or colored text as trigger. Image URL for the inline graphic.

• Toolkit Title: Fluid Inline Text & Image

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support