引导程序 4：带有图标和文本的按钮

【问题标题】：bootstrap 4: Button with Icon and text引导程序 4：带有图标和文本的按钮
【发布时间】：2018-04-14 03:29:44
【问题描述】：

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 Bootstrap 4 和 Font-Awesome，如果要将图标放在文本的左侧，请使用以下 sn-p

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

【讨论】：

【解决方案3】：

创建一个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>

【讨论】：