Add Icon to Right of Button Text?

[ursaminor]

Hello,

Using the Prompt element, I want to include an icon on the button to the right of the button text.

Using Button Icon adds the icon to the left of the button text and does not appear to provide an option for changing it.

Thanks.

[christopher]

Hi there,

Please kindly add the code below to X > Launch > Options> CSS:

.x-prompt-section i {
	float: right;
}

Thank you.

[ursaminor]

Thank you!

The icon is now on the right, but it pushes the button text left so now it looks off-center. Is there a way to make the icon appear directly to the right of the button text and keep the entire content (button text + icon) be centered within the button?

[jade]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[ursaminor]

Thank you. I added a Secure Note to my previous comment with access info…

To clarify, here’s the way the button looks now, and a mockup showing how I want it to look:

[ruenel]

Hello There,

Thank you for posting the screenshots. To resolve this issue, please edit the page back in Cornerstone and insert the following custom js code

(function($) {
  $(".x-btn-block").each(function(){
    var icon = $(this).find("i");
    $(this).find("i").remove();
    $(this).append(icon);
  });
})(jQuery);

And also, you will need to remove the custom css:

.x-btn [class*="x-icon-"] {
    float: right;
    padding-right: 30px;
}

Please let us know if this works out for you.

[ursaminor]

Nice. That worked perfectly.

[thai]

You’re most welcome