Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 474
netshark1000 Avatar asked Nov 01 '17 18:11

netshark1000


2 Answers

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>
like image 200
Nitin Kamate Avatar answered Oct 16 '22 08:10

Nitin Kamate


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>
like image 27
Manzer Avatar answered Oct 16 '22 09:10

Manzer