bootstrap 4：带图标和文字的按钮

Question

我尝试使用Bootstrap 4创建按钮，如下所示：

图标（字体真棒）应该以文本为中心，并且所有图标在屏幕上具有相同的y位置。按钮的边框应该是不可见的。

我是否必须使用按钮或使用其他元素更好？欢迎任何帮助。

Answer 1

使用bootstrap-4和font-awesome，如果您想要显示文本左侧的图标，请使用以下代码段

<button class='btn btn-lg ' style='background-color:transparent;'>
   <i class="fa fa-pencil"></i> Edit
</button>

Answer 2

创建一个div，然后将字体很棒的图标放入其中，然后编写文本然后提供必要的css，然后您可以在(click)上使用div事件。

Install bootstrap and font-awesome 

然后在angular-cli.json的'styles'中提供路径。             或者，

<button class='btn btn-lg ' style='background-color:transparent;'> 
  <div style='text-align:center;'><i class="fa fa-times"></i></div>  
    Cancel Reservation
</button>

Answer 3

试试此。这将解决您的查询。 <a href="#" class="btn btn-success"> <i class="flaticon2-pie-chart"></i> Success </a>