[Support request] How to align icon and text on button?

[Nicolas]

Have a look at this green button.
How can align the icon and the text next to it so that the icon is at the very vertical middle of the text?

[Fernando]

Hi Nicolas,

I think the Font you’re using has uneven spacing. To test, can you try using a different font like Arial?

If it is, you’ll need to modify the paddings you have to account for this font spacing.

[Nicolas]

Hello,

I am very confused.

No change = same result with Arial.

I don’t have the issue on URL 1 on my other site.
I have this issue on URL 2 of my second site.

I can’t see a difference in the settings.
I put the exact same arrow icon on both side.

How can I know which font is issue for both URLs since they are both set on “Select the font“.

[Ying]

Can you set the line-height of the button text to 1?

[Nicolas]

1. I can’t find the line-height setting.

2. Also, I still have my initial issue with each new page I’m creating whatever my web site using GP.

[David]

1. There is no line-height on the button block.

You can adjust the Top and Bottom Padding of the Icon to move it up or down.

2. Also, I still have my initial issue with each new page I’m creating whatever my web site using GP.

What issue ?

[Nicolas]

1. I was just trying to implement Ying’s instruction.
So I refer you back to #2494399. As you can see, 2 different behaviors for the exact same button and icon.

[Fernando]

Can you try adding this through Appearance > Customize > Additional CSS?:

.gb-button .gb-button-text {
    line-height: 1;
}

Then, add padding to the buttons.

[Author]

Posts