Font Awesome is the iconic font designed for use with Twitter Bootstrap. If you want to use these icons for the title of the modules, insert the name of the icon in the Module Variations tab using the Template Parameters.

To insert the icons in your articles or modules 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.

<i class="fa fa-name"></i>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet.

This is the .img-left element. 

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

<img class="img-left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

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

<img class="img-polaroid">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

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

<img class="img-rounded">

Note that .img-rounded, .img-shadow and .img-circle do not work in IE7-8 due to lack of border-radius and box-shadow support.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet.

This is the .img-right element. 

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

<img class="img-right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. Lorem ipsum dolor sit amet. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

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

<img class="img-shadow">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

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

<img class="img-circle">

Note that for a perfect circle the image's width has to be equal to its height (eg. width: 140px, height:140px)!

For an image that needs to be both rounded and floated to the right or left use both classes:

<class="img-rounded img-left">

Add the basic or arrow menu suffix to apply this style to your Joomla! menus:

To use 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>

For additional button sizes add .btn-large, .btn-small, or .btn-mini.

Large Button

Default Button

Small Button

Mini Button

To use the button sizes 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>

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Someone famous Source Title

This is the <blockquote> element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Add small tag for identifying the source. Wrap the name of the source work in cite.

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

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

<h1>...</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<p class="dropcap">...</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis.

This is the .lead element from Bootstrap for making a paragraph stand out . To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="lead"">...</p>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<span class="label-red">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<span class="label-blue">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<span class="label-green">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<span class="label-grey">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

<span class="label-orange">...</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

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

<p class="bubble-red">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

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

<p class="bubble-green">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

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

<p class="bubble-blue">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

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

<p class="bubble-orange">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

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

<p class="bubble-grey">...</p>

This is the .muted emphasis class.

This is the .text-warning emphasis class.

This is the .text-error emphasis class.

This is the .text-info emphasis class.

This is the .text-success emphasis class.

Convey meaning through color with a handful of emphasis utility classes. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="muted"">This is the muted emphasis class.</p>

<p class="text-warning"">This is the text-warning emphasis class.</p>

<p class="text-error"">This is the text-error emphasis class.</p>

<p class="text-info"">This is the text-info emphasis class.</p>

<p class="text-success"">This is the text-success emphasis class.</p>

Wrap inline snippets of code with code. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<code>...</code>

Use prefor multiple lines of code.

.class { 
background: #f1f1f1;  
}

Be sure to escape any angle brackets in the code for proper rendering. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<pre>...</pre>

Add the base class .table to any table.

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

<table class="table">
  …
</table>

Add borders and rounded corners to the table using the .table-bordered class.

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

<table class="table table-bordered">
  …
</table>