Streaming live at 10am (PST)

Add Icons into text box

#1

Hi,
I’d like to add icons next to text under the “For Instance” section on my UX Coaching page. How Can I do this? Can anyone show me with a video? The icon is the green checkmark circle in my photos.


https://preview.webflow.com/preview/blog-1-324f36?utm_source=blog-1-324f36&preview=eb5ad576e3e11f04021f19204b042860

#2

I can’t seem to find the “For instance” section of your page. Same goes to the green checkmark. However, what you’re trying to achieve is doable in many ways. You can create a link block, and place inside that block an image and a text for the service. You can create a div and give the elements inside it an “inline-block” setting. Gosh, you can even do that with grid layouts.

#3

Here’s a video with one way to do it:

The read only link: https://preview.webflow.com/preview/forum-help-79884?utm_source=forum-help-79884&preview=004ea13a2ae3469a6dbf808c979d1454

Hope it helps, if it don’t let me know =)

#4

Hey thanks a lot however I think the video link might be broken

#5

Also, sorry it says “For Example” now

#7

Sorry. Here you go.

#8

Flexbox

In my opinion the best approach is by flexbox (But their is a lot of tricks ideas for this Example).

“not clean” approach (Extra elements) - but really easy to use/change/edit.

  1. Put icon and h1-6 inside div:

  2. Set the div block display to flex

  3. Remove margin/padding for h1 (or use even top/bottom margin)

Result - perfect align icon to text (For any size of text or icon)

Add left margin for the text. Done.

layout issue

If you set the icon to 600px and “no room” the icon will shrink (Without extra properties/setting). But this situation is rare (Rare to use huge icons).
image

rich-text

No way (yet) to solve this for text inside rich-text blocks or in a middle of p (Beside using font icon - like font awsome).

1 Like
#9

By background image

I don’t like this approach (No alts for the images. And its hard to use this trick for a lot of headings).

Add extra left margin:

Add the icon as background image (align left-center)

By position relative

Also “not clean” + “not dynamic” approach, but this is also an option.

Change icon position to relative and add bottom or top value.

by line-height

Weird trick and not so useful for responsive sites - but for one short heading this idea works fine.
Match line-height and icon-height