How To Create Custom Twitter Bootstrap Buttons With Icons

Twitter Bootstrap makes web development a breeze with all that built-in components and plug-ins. But you cannot always stick on to the default theme provided by bootstrap. Definitely you'll love to see your work to be different from others. Basically it's easier than you think to customize the default bootstrap theme. In this bootstrap tutorial we'll see how to create custom twitter bootstrap buttons with icons and text. Check out our twitter bootstrap tutorials section to learn about customizing bootstrap themes in a simple way.

Glyphicons (Bootstrap Icons)

Bootstrap provides scalable font icons called glyphicons which we can use for images while working with bootstrap. These icons can be used anywhere and with any components like navbar, buttons, form inputs, text etc. To add the glyphicon we should wrap it inside a <span></span> element like this,

<span class="glyphicon glyphicon-user"></span>

Click here for the complete list of available glyphicons in Bootstrap.

Note:- Bootstrap has ditched glyphicons from version 4. Even though it's still in alpha phase you can download it from bootstrap official site and try out. So if you are going for Bootstrap 4, there are some good alternatives for glyphicons. One thing you can try fontawesome.io/ which is a vector font library and very easy to use with bootstrap. Check for the below links to learn about working with font awesome and bootstrap.

Twitter Bootstrap Button with Icon Only

To add images/icons to twitter bootstrap buttons, you have to wrap the above said <span> tag inside the <button></button> element. If you want the button to contain only icons without text then use this,

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon glyphicon-stats"></span></button>
<button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-envelope"></span></button>
<button type="button" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-remove"></span></button>

But this button will look slightly rectangle in shape. To make it a square add this css code,

.btn-lg {
    padding: 13px 16px;
}

This ensures for equal padding on all sides of the twitter bootstrap button element and make it as square shape.

We have used the css button class "btn-lg" to create a larger button. But you can also try this with other button classes like "btn-sm" or "btn-xs" to create smaller buttons.

Bootstrap Button with Icon and Text

You can also create bootstrap buttons with both icon and text if you prefer. In that case you have to add button caption to the above given html markup.

Bootstrap Button Icon Alignment

Bootstrap provides flexibility to align the icons before or after the text inside a button. Let’s see how to do it.

Align Glyphicon to the Left

To align the icon to the left of the text in bootstrap button use the html markup like this.

<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Favorite</button>
<button type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon glyphicon-bookmark"></span> Bookmark</button>
<button type="button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>
<button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-thumbs-down"></span> Dislike</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-share"></span> Share</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-envelope"></span> Mail</button>

This will align the icon to the left and text to the right of the button. Make sure you leave a single space between the closing span tag (</span>) and the text to have some space between image and the text.

Align Glyphicon to the Right

If you want the icon to be right aligned to the text inside the bootstrap button, then add the text before the <span> tag.

Here is the html markup to create one.

<button type="button" class="btn btn-default btn-xs">inbox <span class="glyphicon glyphicon-inbox"></span></button>
<button type="button" class="btn btn-primary btn-xs">Stats <span class="glyphicon glyphicon glyphicon-stats"></span></button>
<button type="button" class="btn btn-success btn-xs">Add <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger btn-xs">Remove <span class="glyphicon glyphicon-minus"></span></button>
<button type="button" class="btn btn-info btn-xs">Edit <span class="glyphicon glyphicon-edit"></span></button>
<button type="button" class="btn btn-warning btn-xs">Print <span class="glyphicon glyphicon-print"></span></button>

Leave a blank space at the end of the text and the <span> tag to add space between the text and the icon.

Related Read:

And that was all about creating custom twitter bootstrap buttons with icons and text.