Display icon inline with text in button

Support
#1

Hello,

How can I in the footer builder have the icon align with the text in a button? I added an icon and it display above the text.

URL: https://v2.unikpieces.ch/
(Pwd: E-MM)

Thanks.

#2

Hi There,

You should create a container contains 1 text & 1 button element:

Please make sure the Flex Layout option should be Row:

Hope it helps :slight_smile:

#3

Thank you for the explanation. This is not what I am trying to do though, sorry for not explaining correctly.

I am willing to have the icon and the text in the same line WITHIN the button (currently, the icon is above the text within the button (https://v2.unikpieces.ch, in the footer (pwd: E-MM).

How can I achieve this?

#4

Hi There,

Please make sure the CONTENT FLEX LAYOUT option of the button is set to this:

If it still doesn’t work, please add the following CSS under Pro > Theme Options > CSS:

a.fm9.x-anchor.x-anchor-button.inline-block span.x-anchor-content {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
}

Hope it helps :slight_smile:

#5

Thank you!