Archived topic
How to align icon and text on button?
7 replies · Started by Nicolas on January 12, 2023
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?
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.
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".
Can you set the line-height of the button text to 1?
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.
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 ?
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.
Can you try adding this through Appearance > Customize > Additional CSS?:
.gb-button .gb-button-text {
line-height: 1;
}Then, add padding to the buttons.