如何使用glyphicon引导程序更改按钮文本并保留顺序？

Question

I have a search bar and a submit button with text and an icon. So, I want to replace it for another text and keep the same icon on the right when I click in another button. But when I try, the icon comes first and mess the text. How can I maintain the same order and pattern?

I am doing something wrong? Please any help will be welcome. Here goes some images to show what is happening.

Before and after replace

And my function code to replace the text.

$('#button').click(function(e) {
  $("#submit").text("New Search");
  $("#submit").addClass('glyphicon glyphicon-search');
});

Live Demo: https://jsfiddle.net/gheleri/mL2btnws/3/

Answer 1

Glyphicons aren't meant to added directly to the button as a class, but added as an inline tag such as i or span .

I changed your fiddle to insert as HTML the text with the icon tag. See here: https://jsfiddle.net/mL2btnws/5/

Answer 2

You can wrap the button text in a separate span in order to update its value without affecting the rest of the button .

I updated the fiddle: https://jsfiddle.net/twernt/mL2btnws/12/

Here is the modified HTML:

<button id="submit" class="btn btn-success" type="submit">
  <span class="label">Search!</span>
  <span class="glyphicon glyphicon-search"></span>
</button>

Here is the modified JavaScript:

$('#button').click(function(e) {
  $("#submit .label").text("New Search");
});

Answer 3

                <button
                  className=" delete-button glyphicon glyphicon-trash"
                  onClick=() =>

                />

and in you css file

.delete-button {
  padding: 0;
  border: none;
  background: none;
}