Can Button Icon Appear Directly After Text?

Support
#1

Hi, is it possible for the button icon to appear directly after the text? I’ve managed to get it to right align, but I don’t want that big gap after the text to the icon. I still want the buttons to fill the width of the column.

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

#2

Hi There,

Please remove your custom CSS and try with this CSS instead:

.x-anchor .x-anchor-content {
    flex-direction: row-reverse !important;
}

Note that the custom CSS above will apply globally. To make it work for that page only, you can try with this CSS instead:

.page-id-439 .x-anchor .x-anchor-content {
    flex-direction: row-reverse !important;
}

Hope it helps :slight_smile:

#3

Hi, thanks, I’ve changed the CSS to the one suggested and the text is now centre aligned - I wanted it to stay left aligned - and the icon still is aligning to the right instead of coming straight after the text!

Cheers

#4

Hey There,

Did you want the buttons like this?

Please reduce the font size of your buttons to 1.15em.

Let us know how it goes!

#5

Hi, no sorry, I’d like them to be like this, so the icon comes straight after the text instead of being aligned right.

Thanks!

#6

Hey There,

Please keep your custom CSS and also add this custom CSS:

.x-anchor .x-anchor-content {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    align-self: start;
}

Then resize the font size of your buttons to 1.1em.

Hope it helps :slight_smile:

#7

Excellent, thank you, that’s sorted it!

Your help was much appreciated, thanks!

#8

Glad we were able to help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.