EasyTypeToolsVersion: 1.0.0

EasyTypeTools  is simple Joomla plugin that adds:

  • Font Awesome to your Joomla Website
  • Keyboard CSS styles to show <kbd> elements

to your Joomla 3 website.

The EasyType plugin works by adding the Font Awesome CSS or custom <kbd> CSS to  to your pages automatically. Setup is very simple.

Free Download  Pro Version from $4.99

  • About…
  • Free vs Pro
  • Installation
  • Changelog

Basic Usage Steps

  1. Install via the standard Joomla extension manager and enable it.
  2. Enable the plugin.
  3. For Pro users choose some settings.
  4. There is no step 4…


EasyTypeTools Pro can load the Font Awesome kit from the official CDN or from your local server.

EasyTypeTools Pro will also loads the non-minimised version when Joomla’s Debug is enabled, allowing for easy resolution of CSS issues when using Font Awesome.

EasyTypeTools Pro includes additional <KBD> themes — Apple, Heavy and Retro.

Example Usage

Font Awesome

Font Awesome 4.4.0 has 550 icons for you to choose from, here’s a few examples of how to use them.

Add an empty “battery” icon to text:

<p>I'm feeling completely flat… <i class="fa fa-battery-empty"></i></p>

Renders as:

I'm feeling completely flat…

Add an Amazon button like this one

<a href="https://amazon.com" target="_blank">  
    <span class="btn btn-large">  
        <i class="fa fa-amazon"></i>  

Keyboard Key Styles

The <kbd></kbd> element represents user input (typically keyboard input, although it may also be used to represent other menu commands) — you can read more here.

When Keyboard CSS is swithed On then <kbd> elements will be wrapped in borders to simulate keys on a keyboard. Something like this:

<KBD> Elements Styled as Keys by CSS

When Keyboard CSS is enabled, EasyTypeTools loads the relevant CSS into your Joomla page automatically.

Command Example

<p>To copy the selected text type <kdb><kbd>command ⌘</kbd>-<kbd>C</kbd></kbd> (or <kdb><kbd>alt</kbd>-<kbd>C</kbd></kbd> on Windows).</p>

Renders as:

To copy the selected text type command ⌘-C (or alt-C on Windows).

Menu Example

<p>To open Joomla's Article Manager select  <kdb><kbd>Content | Articles</kbd></kbd> from the menu bar.</p>

Renders as:

To open Joomla's Article Manager select Content | Articles from the menu bar.

More Keys Example

Select » About this Macintosh… to learn more.


Press Ctl + alt + Del and walk away.


KISS spells "KISS" — Keep It Simple Stupid

Font Awesome 
 — Load specific version (3.2.1 / 4.4.0 / Latest)
 — Option to load Font Awesome from local server 
<kbd> </kbd> Element CSS 
 — Light and Dark <kbd> variations.
 — Heavy and Retro <kbd> Themes in Light and Dark
 — Apple <kbd> Theme in Light and Dark
 — (uses the new San Francisco font when available)



Available in the current Version
Not available in this Version
New in the current Version. New in this Version
  1. Install EasyTypeTools via the standard Joomla Extension Manager.

    Install pluginInstall using the Joomla Extensions Manager

  2. A successful installation message is displayed, click on the link in the message to enable the plugin.

    Successful installSuccessful installation message

  3. Select EasyTypeTools in the Joomla Plugin Manager and enable it.

    Plugin managerEnable EasyTypeTools in the Plugin manager

  4. Click on the EasyTypeTools content plugin to open the plugin. Set Font Awesome and/or Keyboard CSS to On as required.

    Plugin tabEasyTypeTools Content Plugin

  5. If you enabled Font Awesome, click on the Font Awesome Settings tab and adjust the settings as required.

    Site TokenAdjust Font Awesome Settings.

  6. If necessary select a specific version of Font Awesome (we recommend leaving it on latests).

    Site TokenAdjust Font Awesome version if required.

  7. In the Pro version, you can specify where to load Font Awesome from the standard CDN or from your Local server. We recommend the CDN (which is the default of the free version).

    Advanced tabFont Awesome Load from option.

  8. If you enabled it, click on the Keyboard CSS Settings tab and adjust the settings as required.

    Select the CSS Default for a Light Background or Dark Background based on your template (generally we recommend the Light Background).

    Site TokenAdjust KBD CSS Settings.

  9. For the Pro version you can also select the Theme to use.

    Site TokenSelect the Theme.

  10. Save the plugin. 

Check out the "About" tab for examples of Font Awesome and Keyboard CSS usage.


  • This plugin is only supported and tested on Joomla 3.4+
  • This plugin requires PHP 5.4 or higher.



Pro & Free

  1. Initial Release



Free Download  Pro Version from $4.99

You need to login to access the forums.

Member Login

You need to Login to access your Subscription details or the Forums.