带有Glyphicon的按钮小于带有文本的按钮

Question

我有当前页面（按钮中的字形作为下载按钮）。

如图所示，带有glyphicons的最后一列并不完全排列。我尝试用按钮中的“测试”替换字形，它们似乎完美排列。

这是与该列的其中一个按钮有关的代码行。

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>';

如何让第一张图像中带有字形符号的按钮与第二张图像中的按钮对齐？我尝试使用填充，但它看起来不是一个好的解决方案。

下面是带填充的相同代码。

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

试试这个

<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

尝试添加一些padding / font-size / line-height。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;