Html 引导程序 4：带有图标和文本的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47061211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 4: Button with Icon and text
提问by netshark1000
I'm trying to create buttons like you can see below with Bootstrap 4:
我正在尝试使用 Bootstrap 4 创建如下所示的按钮：
The icon (font awesome) should be centered to the text and all the icons have the same y position on the screen. The border of the buttons should be invisible.
图标（字体真棒）应该以文本为中心，并且所有图标在屏幕上的 y 位置都相同。按钮的边框应该是不可见的。
Do I have to use a button or is it better to use another element? Any help is welcome.
我必须使用按钮还是使用其他元素更好？欢迎任何帮助。
回答by Nitin Kamate
With Bootstrap 4 and Font-Awesome, if you want to place the icon to the left of the text, use the following snippet
使用 Bootstrap 4 和 Font-Awesome，如果要将图标放置在文本的左侧，请使用以下代码段
<button class="btn btn-lg" style="background-color:transparent;">
<i class="fa fa-pencil"></i> Edit
</button>
回答by Manzer
Create a divand then put font-awesome icons into it and then write text then provide necessary cssand then you can use (click)event on the div.
创建一个div，然后将字体很棒的图标放入其中，然后编写文本然后提供必要的css，然后您就可以(click)在div.
Install bootstrap and font-awesome
and then provide the path in the 'styles' of angular-cli.json. or,
然后在 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>
