How do I use Bootstrap 5.3.3 css and have the buttons back to their original colours with glyphicons?

Question

I have been using Dropzone.js for a few years and have an app that has been working well. There are three buttons that are used.

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Browse files...</span>
</span>

<button class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start</span>
</button>

<button data-dz-remove class="btn btn-danger delete">
   <i class="glyphicon glyphicon-trash"></i>
   <span>Remove</span>
</button>

I have been using bootstrap@3.1.1/dist/css/bootstrap.min.css from cdn.jsdelivr.net and as I said it works well. The buttons look like this:

I would now like to add a modal but it doesn't work with Bootstrap 3.1.1

If I use bootstrap@4.6.2/dist/css/bootstrap.min.css from cdn.jsdelivr.net the buttons look like this:

The modal works but the button colour is slightly different and I have lost the glyphicons.

I would like to use the latest version possible of the Bootstrap css. If I use bootstrap@5.3.3/dist/css/bootstrap.min.css from cdn.jsdelivr.net the buttons look like this:

The modal works but again the button colours are slightly different and the glyphicons have disappeared. Also the Remove button only has an outline and no fill.

How do I use Bootstrap 5.3.3 css and have the buttons back to their original colours with glyphicons?

Ultimately I would like to use my own custom coloured buttons with either glyphicons or font-awesome icons. Is this possible?

Answer 1

If you want to change the color of the button to the original color is to change the span html element to a button html element. Then take the html elements and put them inside within the button element. For the first button that one should look like this <button class="btn btn-success" type="button" value="Input"