▼
Streaming live at 10am (PST)

*help* Icon next to text within a flex layout

#1

Hi all. Could anyone please tell me how to do the following.

Put an icon next to the text within a flex layout?

See screenshot attached to see what I mean!

Here is my read-only link so far: https://preview.webflow.com/preview/h-l-fd4bf0?preview=2e0258e5679e8a63420d5d6c8ba743d9

Thanks,
Ryan

#2

You can solve this in simpe/basic CSS (Flex power is "to much" for this case)

step zero: change "link-block" to "block" (inline block will push the text to the row or the logo) + put the H + img in the same parent (some wrapper - "link-block" for example)

  1. Change flex-container to block.
  2. img as inline block (ok in your code)
  3. Change h1 (block element) to inline block (now the icon and the text will be in the same line).
  4. Add padding-left for H1 (add space between the img and the H)

Thats it. Now if you want to align the icon and the text - change the img to relative and add 2-3px top or bottom.
Her you get more ideas (or google it):

Way 2 (flex)
If you want to align flex verticaly - change "link block (inside link-block the img+header)" to "flex" than add horzinital align center. Important: remember to remove from "sub-header" any top margin/padding (add margin/padding to the parent)

image.jpg1728x498 231 KB

#3

amazing - thank you very very much!

closed #4

This topic was automatically closed after 60 days. New replies are no longer allowed.