Button with Glyphicon is smaller than button with text

Question

I have the current page (with glyphicons in buttons as download buttons).

As seen in the picture the final column with the glyphicons don't quite line up. I tried replacing the glyphicons with just a "test" in the button and they seem to line up perfectly.

This is the line of code that has to do with one of the buttons for that column.

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status"  onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';

How do I have the buttons with glyphicons in the first image align like the buttons in the second image? I tried using padding, but it doesn't look like a good solution.

Below is the the same code with padding.

document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status" style = "padding: 0.625vw;" onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';

Answer 1

Try this

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button class="btn btn-primary">Button</button> <button class="btn btn-primary"><i class="fa fa-bars"></i></button> 

Answer 2

Try to add some padding/font-size/line-height.

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> <button style="padding:5%;font-size:20px" type="button" class="btn btn-default"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button>