Font Icon syntax

After installign the JB Type plugin, using the font icons is as simple as using the following syntax in your Joomla content.

[jb_icon-glass]Here is my font-iconified bit of text[/jb_icon-glass]

Please change the square brackets above to the curly brackets {

List of available font icons:

New icons available in JB Type v1.8+

This is the jb_icon-cloud-download style.
This is the jb_icon-cloud-upload style.
This is the jb_icon-lightbulb style.
This is the jb_icon-exchange style.
This is the jb_icon-bell-alt style.
This is the jb_icon-file-alt style.
This is the jb_icon-beer style.
This is the jb_icon-coffee style.
This is the jb_icon-food style.
This is the jb_icon-fighter-jet style.
This is the jb_icon-user-md style.
This is the jb_icon-stethoscope style.
This is the jb_icon-suitcase style.
This is the jb_icon-building style.
This is the jb_icon-hospital style.
This is the jb_icon-ambulance style.
This is the jb_icon-medkit style.
This is the jb_icon-h-sign style.
This is the jb_icon-plus-sign-alt style.
This is the jb_icon-spinner style.
This is the jb_icon-angle-left style.
This is the jb_icon-angle-right style.
This is the jb_icon-angle-up style.
This is the jb_icon-angle-down style.
This is the jb_icon-double-angle-left style.
This is the jb_icon-double-angle-right style.
This is the jb_icon-double-angle-up style.
This is the jb_icon-double-angle-down style.
This is the jb_icon-circle-blank style.
This is the jb_icon-circle style.
This is the jb_icon-desktop style.
This is the jb_icon-laptop style.
This is the jb_icon-tablet style.
This is the jb_icon-mobile-phone style.
This is the jb_icon-quote-left style.
This is the jb_icon-quote-right style.
This is the jb_icon-reply style.
This is the jb_icon-github-alt style.
This is the jb_icon-folder-close-alt style.
This is the jb_icon-folder-open-alt style.
 

Successful and unsuccessful people do not vary greatly in their abilities. They vary in their desires to reach their potential.

Template provides various menu options for desktop and mobile devices. All menu options are located within template settings. 

In order to use all features provided by T3 framework select navigation type -> Megamenu otherwise you won't be able to define dropdown animation or use advanced layout setting of Megamenu.

Starting with T3 version 1.3.0 is megamenu setting on standalone page accessible via template setting.

Megamenu allows:

• group submenus where 2nd level menu item serves as header for 3rd level menu items
• add icons to menu items (use FontAwesome icons, ex: icon-bug)
• add menu item captions
• add columns
• add rows
• add modules into specified row / column

Mobile menu setting

For tablets and mobile devices is possible to choose between dropdown mobile menu and offcanvas mobile menu (inspired by Facebook menu).

Mobile dropdown menu

Mobile offcanvas menu

This template comes with a wide variety of module classes that can be used to change the appearance and structure of your module classes. 

The module classes are broken up into the three broad categories - strucure, function and appearance.

Structural module classes

Used to change the position of a module

Positioning

• top25 {margin-top: 25px}
• top50 {margin-top: 50px}
• top75 {margin-top: 75px}
• top100 {margin-top: 100px}
• top125 {margin-top: 125px}
• top150 {margin-top: 150px}
• top175 {margin-top: 175px}
• top200 {margin-top: 200px}
• top225 {margin-top: 225px}
• top250 {margin-top: 250px}
• top275 {margin-top: 275px}
• top300 {margin-top: 300px}
• top325 {margin-top: 325px}
• top350 {margin-top: 350px}
• top375 {margin-top: 375px}
• top400 {margin-top: 400px}
• top425 {margin-top: 425px} 
• top450" {margin-top: 450px}
• top475 {margin-top: 475px}
• top500 {margin-top: 500px}

Functional module styles

Used to change the function of a module

All functional module classes are handled via the module chrome / style options in each module's module settings.

Functional module styling available includes:

• zentabs - Bootstrap tab styling
• zenslider - Bootstrap collapse style

Appearance module classes

Used to change the appearance of a module

• primary1
• primary2
• primary3
• secondary1
• secondary2
• secondary3
• inset
• border
• shadow
• shadow2
• hot - adds the word hot to the .moduletable h3 span:after
• new - adds the word new to the .moduletable h3 span:after

The appearance module classes can be used in combination with each other to create more compel xmoduel styles. To use multiple styles together please ensure that each module class suffix is separated by a space as per the following example. Also please note that there needs to be a space before the start of the first class in order to render the class output properly:

 primary1 inset border

Font Icon Module classes

Add font awesome icons to your modules

Using a combination of module classes, it is possible to create a wide range of module styles using the font awesome font icons.

A typical module class suffix using the font icons looks like this:

icon icon-comments large bottom secondary1

• icon - initiates the font icon display
• icon-comments - selects the icon to display. You can see a full list of icons available on the typography page.
• large - (optional) You can choose between tiny, medium or large which set the font-size of the icon as follows: 1em, 2em (default), 4em and 8em.
• bottom - (optional) Displays the icon at the bottom of the module. By default the icon is set to display at the top.
• secondary1 - as per the examples on this page this refers to the built in colour control in the template.

You can scroll down to the bottom of this page to see a very small selection of the styles in action.

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.