Streaming live at 10am (PST)

*help* Icon next to text within a flex layout

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:


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)

amazing - thank you very very much!

1 Like

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