bootstrap 4: Button with Icon and text

Question

I'm trying to create buttons like you can see below with 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.

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

Answer 1

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>

Answer 2

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>