Bootstrap Button with Icon and Text – Sometimes we need to add icon and text both in bootstrap button. You can use bootstrap icons for adding icon in button. Here in this tutorial we are going to explain how you can add icon and text in bootstrap button. You can also use our online editor to edit and run the code online.
Bootstrap Button with Icon and Text Example
Let us create some example with icon and text.
Bootstrap Button with favorite Icon
You can add favorite icon and text simply as below-
Bootstrap Button with favorite Icon Example:
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Add Favorite</button> |
.
If you run the above example it will produce output something like this –
Bootstrap Button with Bookmark Icon
You can add Bookmark icon and text simply as below-
Bootstrap Button with Bookmark Icon Example:
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-bookmark"></span> Add Bookmark</button> |
.
If you run the above example it will produce output something like this –
Bootstrap Button with User Icon
You can add User icon and text simply as below-
Bootstrap Button with User Icon Example:
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> User</button> |
.
If you run the above example it will produce output something like this –
Bootstrap Button with Like | Dislike | Share Icon
You can add User icon and text simply as below-
Bootstrap Button with Like | Dislike | Share Icon Example:
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button><br/> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-thumbs-down"></span> Dislike</button><br/> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-share"></span> Share</button><br/> |
.
If you run the above example it will produce output something like this –