How to add a graphic icon at the end of a headline?

Support
#1

Hi!

I have added a custom icon graphic to a few headlines, but wonder whether I can move the icon to the end of the headline, instead of the beggining?

Please see this page https://zencompany.nl/over-ons/

I will add the logon credentials in a private message.

Thanks!
Aida

#2

Hi Aida,

Thank you for writing in, please inspect your headline element and enable the Reverse Layout, also since this is now a reverse layout, set the Horizontal to End.



If the text and graphic become too far apart, please add this to the headline’s Element CSS area under the customize tab.

$el .x-text-content-text {
  flex-grow:0;
}

Hope it helps,
Cheers!

#3

Perfect! thank you so much!! :slight_smile:

#4

You’re welcome. Glad we’re able to help.

#5

Hi again,
I just found out that I can not adjust the distance between the text and the graphic at the end on a windows machine… It works perfect on my mac but not on windows. I used this code:

$el .x-text-content-text {
flex-grow:0.15;
}

Can you let me know what do I need to change to achieve the same on windows?

thanks!
Aida

#6

Hello Aida,

You may add some padding on the left and right of the element. You can update the code and use this:

$el .x-text-content-text {
  flex-grow:0.15;
  padding-left; 10px;
  padding-right; 10px;
}

Feel free to adjust the paddings.

#7

thanks a lot!!

#8

Hi Aida,

You can also keep the flex-grow to 0 and use the margin-right to create space between the text and graphic.

$el .x-text-content-text {
  flex-grow: 0;
  margin-right: 15px;
}

Thanks,

#9

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