[英]bootstrap 4: Button with Icon and text
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.图标(字体真棒)应该以文本为中心,并且所有图标在屏幕上的 y 位置都相同。 The border of the buttons should be invisible.按钮的边框应该是不可见的。
Do I have to use a button or is it better to use another element?我必须使用按钮还是使用其他元素更好? Any help is welcome.欢迎任何帮助。
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>
Create a div
and then put font-awesome icons into it and then write text then provide necessary css
and then you can use (click)
event on the div
.创建一个div
,然后将字体很棒的图标放入其中,然后编写文本,然后提供必要的css
,然后您可以在div
上使用(click)
事件。
Install bootstrap and font-awesome
and then provide the path in the 'styles' of angular-cli.json.然后在 angular-cli.json 的“样式”中提供路径。 or,要么,
<button class='btn btn-lg ' style='background-color:transparent;'>
<div style='text-align:center;'><i class="fa fa-times"></i></div>
Cancel Reservation
</button>
Try out this.试试这个。 It will solve your query.它将解决您的查询。 <a href="#" class="btn btn-success"> <i class="flaticon2-pie-chart"></i> Success </a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.