Tutorials Tonight's Logo
Follow Us

Bootstrap Button With Icon And Text


In this tutorial, you will learn to create a bootstrap button with an icon and text, also we will play with color of the button, icon and text.


Whenever you visit a website you must have seen buttons over there. Either it is used to create some action or to trigger an event. Most of the buttons are used to take some action from the user side.

In this case, it becomes important for web developers to create a beautiful button that explains their work.

Using bootstrap you can easily create such an action button. Also in this tutorial, you will be able to add icons to the button which adds extra meaning to the button.

bootstrap button with icon and text
  1. Bootstrap button
  2. Font-awesome icon
  3. Bootstrap button with icon and text

1. Bootstrap button

Bootstrap provide several predefined button style with semantic meaning. For example for dangerous action you can add btn-danger class to the button to create a red button, semantically it specifies danger.

To create a bootstrap button you have to use at least 2 classes:

  1. btn- The btn class provides the basic structure to the button, like padding, border, border-radius, etc
  2. btn-* - The classes like btn-primary, btn-danger, btn-success, etc specifies color, background-color and border-color to the button. Which gives different look to the button.

Here is an example of a simple bootstrap button.

Example

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-success">Success Button</button>

Output:

bootstrap buttons

2. Font-awesome icons

The icons are not pre-build in HTML you have to use complex CSS, SVG or external resources to get an icon. Here we will use font-awesome as an external resource to get free icons.

To use font-awesome icons add its CDN (content delivery network) to your webpage in the head section.

<head>
  <title>font awesome icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

Now use the related icon class in the <i> tag and insert it in your webpage.

Example

<i class="fa fa-book"></i>
<i class="fa fa-glass"></i>
<i class="fa fa-home"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-star"></i>

3. Bootstrap button with icon and text

To create a bootstrap button with icon and text insert the font-awesome icons within the button discussed above and write related content in the button. The code is shown below. (Do not forget to add font-awesome CDN to your webpage).

Example

<button class="btn btn-primary"><i class="fa fa-facebook"></i> | Facebook</button>
<button class="btn btn-danger"><i class="fa fa-ban"></i> | Banned</button>
<button class="btn btn-success"><i class="fa fa-trophy"></i> | Trophy</button>
<button class="btn btn-info"><i class="fa fa-info-circle"></i> | Information</button>
<button class="btn btn-dark"><i class="fa fa-moon-o"></i> | Moon</button>
<button class="btn btn-warning"><i class="fa fa-thermometer-full"></i> | Thermometer</button>

Output:

bootstrap button with icon

Conclusion

We created Bootstrap buttons with icon and text. For icon, we used font-awesome and created multiple buttons with bootstrap.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.