Button icon alignment

[mizejewski]

If an icon is added to a button, it should stay aligned with the text. If the button is getting too small, then the line should wrap rather than pushing the icon out of alignment.

[arielk]

You can fix it with some CSS like this:
.elementor-button-content-wrapper {white-space: nowrap;}

But I think it will cause other problems, so we need some time to figure out how to fix it in the core

[mizejewski]

Thanks for looking into it.

[Pagester]

If you move the button text <span into the <span containing the FA icon and remove the display:inline-block from the button text class that will solve your problem.

See code change below, obviously the class names would need to be amended so as to not confuse people,

<span class="elementor-align-icon-left elementor-button-icon"> <i class="fa fa-calendar-check-o"></i> <span class="elementor-button-text">Workshops &amp; special events</span> </span>

and remove from class like below:

.elementor-button .elementor-button-text { /* display: inline-block; */ }

[BradMK]

Has there been any more progress on this? This issue is still present in the current version.

[black-eye]

+1

[fxaviers]

More than 2 years and the problem remains. Did the Elementor team give up on this problem?

[fxaviers]

I am organizing the 3 year party of this problem. Come'on, is it so complicated to solve a responsive alignment problem on a button with icon?

I have no idea what risks this can bring to other buttons, but in all projects I use the code below to make it less worse:
.elementor-button .elementor-button-text { display: unset; }

@arielk @bainternet @shilo-ey Am I asking too much to fix such a known old problem?