[Resolved] Text next to image (icon)

[Henk]

Hello,

How do I create a text next to an image (icon)?
I want to build a ‘WHY CHOOSE US’ section in my website just like in this example (scroll down to see the example).

I tried to use the Media and Text block, but the problem with that is I can’t control the image size.

Any suggestions?

[David]

Hi there,

do you have those images as SVGs ?

[Henk]

Hi David,

Yes they are SVG’s.

[David]

I would do this in each of those Grid Columns:

1. Add a Headeline Block – and add your SVG icon. You can resize the icon, change the space between text and icon and change its color.
2. Below that add another Headline Block and set this to Paragraph for your text. Then add some Left Padding to match the size of your Icon.

[Henk]

Hello David,

I created a headline block, and added my SVG and text. It looks almost the way I want, but there is too much spacing under my headline text. I checked my settings, and both padding and margin are set to 0px. When I add negative margin (-15px) the Paragraph text moves up. But adding negative values is not a good practice.

Where does that spacing comes from?

[David]

It’s fine to use negative margins. And is the only way to do it without adding a lot more custom CSS.

[Henk]

Thanks David!

One more question, how do I add the Icon after the text?

I want to create a ‘read more >’ link. I used a headline block, but when adding the SVG Icon, it shows up before the text. But I want to add the SVG Icon after the text.

[Leo]

Have you considered using a buttons block instead of headline block since that is going to be link?

You can style the button so the appearance is exactly the same as what you have right now.

The buttons block gives you an icon location option:
https://docs.generateblocks.com/article/buttons-overview/#icon-location

[Henk]

Thanks Leo!

That worked for me.

[Leo]

Glad to hear 🙂

[Author]

Posts