bootstrap 4：带有图标和文本的按钮

Question

我正在尝试创建按钮，就像您在下面使用 Bootstrap 4 看到的那样：

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

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

原文由 netshark1000 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Bootstrap 4 和 Font-Awesome，如果您想将图标放在文本的左侧，请使用以下代码片段

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

原文由 Nitin Kamate 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Mahi 发布，翻译遵循 CC BY-SA 3.0 许可协议