WP Templater
Eyebrow StylesEyebrow Icon 01
Eyebrow Styles

Eyebrow - Icon 01

Add a compact square icon before Kadence Advanced Heading eyebrows using the Eyebrow Icon 01 X-Bar CSS recipe and the wpt-eyebrow class.

What Eyebrow Icon 01 does

Eyebrow Icon 01 adds a compact square icon before an eyebrow label on Kadence Advanced Heading blocks that use the wpt-eyebrow custom class.

The recipe:

  • Renders a small square in front of the eyebrow text using the ::before pseudo-element.

  • Uses the current text color for the square border so it stays in sync with your design.

  • Keeps the label bold and uppercase, so it still reads as a clear section label.

Use this when you want a subtle, geometric accent that visually ties the eyebrow to the main heading color.

Eyebrow recipes style a small label above a heading. All eyebrow recipes, including Icon 01, target Kadence Advanced Heading blocks that use the wpt-eyebrow custom class.

Expected selectors and structure

Eyebrow Icon 01 expects:

  • Block type: Kadence Advanced Heading.

  • Custom class on the block: wpt-eyebrow.

  • Eyebrow text location: The heading text field inside that Kadence block.

The CSS recipe you copy from X-Bar targets the wpt-eyebrow class and uses a ::before pseudo-element to draw the square icon before the label text.

If you have multiple eyebrow styles in the same layout, you can mix them as long as each Kadence Advanced Heading block has the correct eyebrow class applied.

How to apply Eyebrow Icon 01

Add a Kadence Advanced Heading block

  • Insert a Kadence Advanced Heading block where you want the eyebrow label.

  • Enter your eyebrow text (for example, Featured Story) in the heading field.

Add the eyebrow class

  • Select the Kadence Advanced Heading block.

  • In the block settings sidebar, find the Additional CSS class(es) field.

  • Add wpt-eyebrow to that field.

Copy the recipe from X-Bar

  • Open X-Bar.

  • In the Frontend Recipes section, locate Eyebrow – Icon 01.

  • Copy the provided CSS recipe to your clipboard.

Paste the CSS into your X-Bar editor

  • Open your X-Bar editor where you manage custom CSS.

  • Paste the Eyebrow Icon 01 CSS recipe into the editor.

  • Save or update the X-Bar configuration.

Your page should now show the eyebrow text in bold, uppercase, with a small square icon before the label.

Adjusting and troubleshooting

Most Eyebrow Icon 01 tweaks happen directly in the CSS inside X-Bar (for example, square size, border thickness, or spacing between square and text).

If the icon does not appear, first confirm that the Kadence block is an Advanced Heading and that the wpt-eyebrow class is spelled correctly with no extra spaces.

Common checks:

  • Make sure only the blocks you want styled as eyebrows use the wpt-eyebrow class.

  • Clear any caching or performance plugins after updating the X-Bar CSS.

  • Check that no theme or plugin CSS overrides the ::before pseudo-element for wpt-eyebrow.

All CSS Recipes

Eyebrow Pill 01

Eyebrow Pill 02

Eyebrow Icon 02

Was this page helpful?

Last updated today

Built with Documentation.AI