CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
netshark1000
netshark1000

Reputation: 7403

bootstrap 4: Button with Icon and text

I'm trying to create buttons like you can see below with Bootstrap 4:

enter image description here

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.

Do I have to use a button or is it better to use another element? Any help is welcome.

Upvotes: 8

Views: 89556

Answers (3)

Aashir Azeem
Aashir Azeem

Reputation: 169

Try out this. It will solve your query. <a href="#" class="btn btn-success"> <i class="flaticon2-pie-chart"></i> Success </a>

Upvotes: -1

Nitin Kamate
Nitin Kamate

Reputation: 2733

With Bootstrap 4 and Font-Awesome, if you want to place the icon to the left of the text, use the following snippet

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

Upvotes: 24

Manzer A
Manzer A

Reputation: 3806

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.

Install bootstrap and font-awesome

and then provide the path in the 'styles' of 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>

Upvotes: 6

Related Questions