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:
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
Sorry. Here you go.
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.
Set the div block display to
margin/paddingfor 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.
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).
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.
Weird trick and not so useful for responsive sites - but for one short heading this idea works fine.
Match line-height and icon-height