Bootstrap 4 Demo
Bootstrap 4 Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <h3>Bootstrap 4 button with icon</h3> <button type="button" class="btn btn-primary"><i class="fa fa-times" aria-hidden="true"></i> Remove it</button> <button type="button" class="btn btn-success"><i class="fa fa-binoculars" aria-hidden="true"></i> Binoculars</button> <button type="button" class="btn btn-info"><i class="fa fa-cart-plus" aria-hidden="true"></i> Add to cart</button> <button type="button" class="btn btn-warning"><i class="fa fa-calendar" aria-hidden="true"></i> Calendar</button><br /><br /> <button type="button" class="btn btn-light"><i class="fa fa-trash" aria-hidden="true"></i> Delete</button> <button type="button" class="btn btn-outline-success"><i class="fa fa-wifi" aria-hidden="true"></i> Wifi</button> <button type="button" class="btn btn-dark"><i class="fa fa-upload" aria-hidden="true"></i> Upload</button> <button type="button" class="btn btn-outline-success"><i class="fa fa-download" aria-hidden="true"></i> Download</button> </div> </body> </html>
Bootstrap 4 button with icon
Remove it
Binoculars
Add to cart
Calendar
Delete
Wifi
Upload
Download