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.
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.
Here’s a video with one way to do it:
https://www.useloom.com/share/ef0330c5b6934a39a2fcba586a2de22b
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 =)
Hey thanks a lot however I think the video link might be broken
Also, sorry it says “For Example” now
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.
-
Put
icon
andh1-6
inside div:
-
Set the div block display to
flex
-
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).
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).
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