引导程序 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 ，然后您可以在div上使用(click)事件。

Install bootstrap and font-awesome 

然后在 angular-cli.json 的“样式”中提供路径。 要么，

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