Add icon to a title

Design help General
1

Hello everyone,

I would like to know what is the “cleanest” way to add an icon near my title like in the screenshot attached.

I have been thinking of using :

  • a flexbox with image + heading and a negative margin to the left
  • Absolute position to the icon with 1 rem to the left of the x absis

Thanks a lot :)

CleanShot 2024-09-10 at 16.32.38@2x
CleanShot 2024-09-10 at 16.32.38@2x1920×1200 161 KB

Here is my site Read-Only: Webflow - Graine's Superb Site

2

I think I would personally go with the absolute positioning, only for consistency. You appear to have other places like the icon near the top right part of the page that are also positioned.

I’ll note though that for inline text annotations specifically, I’ll usually use CSS :before and SVG code to do this, because then in places like in a blog, a customer can create an H2 and it will be automatically annotated rather than requiring some form of complex embed arrangement for them to learn.

1 Like
3

Ok thank you for your help :)

I’ll use the absolute positioning then