Bootstrap Button with Icon and Text


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>
</div>

Try it »

.
If you run the above example it will produce output something like this –

Bootstrap Button with Icon and Text

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>
</div>

Try it »

.
If you run the above example it will produce output something like this –

Bootstrap Button with Bookmark Icon

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>
</div>

Try it »

.
If you run the above example it will produce output something like this –

Bootstrap Button with Bookmark Icon Example

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>
</div>

Try it »

.
If you run the above example it will produce output something like this –

Bootstrap Button with Like | Dislike | Share Icon


Advertisements

Add Comment

📖 Read More





Warning: mkdir(): No such file or directory in /home/u312555568/domains/tutorialsplane.com/public_html/wp-content/themes/Modernia/footer.php on line 406