Font Awesome Icons

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>
Favourite currently supports Font Awesome 4.1.0.

Image 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. 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">

Image 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-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">

Image Rounded

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.

Image 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. 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">

Image 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. 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">

Image Circle

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">

Για την δωρεάν συμμετοχή σας στην HAIRPROF, εαν είστε Σύλλογος Κομμοτών, blog ή έντυπο επικοινωνήστε μαζί μας στο This email address is being protected from spambots. You need JavaScript enabled to view it.

Menu Basic

How to use the menus

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

Menu Arrow

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">Button link</a>