Typography styles are a great way to customize the appearance of content elements such as Font Awesome icons, menus, images, buttons, Bootstrap elements, all with different color styles.

Button Icons

To use the Font Awesome icons with the Bootstrap buttons, just type the following code in your text editor. Make sure the code is added in the html mode and turn on Editor None in Global Configuration.

Download

<a class="btn" href="#"> 
<i class="fa fa-download"></i>
Download
</a>

TOPlist

Default Button

This is the .btnbutton element.

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn">...</button>

or if you want to use the button with a link:

Button link

<a class="btn" href="#">...</a>

Primary Button

This is the .btn-primary button element.

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-primary">...</button>

or if you want to use the button with a link:

Button link

<a class="btn btn-primary" href="#">...</a>

Button Sizes

This is the large button size. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<button class="btn btn-large">...</button>

This is the default button size. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<button class="btn">...</button>

This is the small button size. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<button class="btn btn-small">...</button>

This is the mini button size. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<button class="btn btn-mini">...</button>

Bootstrap Buttons

This is the .btn-info button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-info">...</button>

This is the .btn-success button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-success">...</button>

This is the .btn-warning button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-warning">...</button>

This is the .btn-danger button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-danger">...</button>

This is the .btn-inverse button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-inverse">...</button>