Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

FAVGLYPH is a free responsive Joomla! module that uses any icon from Font Awesome and assigns it a description and a title. SEE THE DOCUMENTATION

4 default
layouts

CSS3 layout
effects

90+ module
settings

free Joomla!
module

FavGlyph Layout

Designed to be versatile and customizable, FavGlyph has many layout options. Here are some examples of different layouts made using FavGlyph:

Top Icon Layout

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Left Icon Layout

Title Text

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

Title Text

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

Bottom Icon Layout

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Right Icon Layout

Title Text

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

Title Text

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

FavGlyph Columns

This module supports a 6 column layout which means it can have 6, 5, 4, 3, 2 or 1 column for the module layout without assigning each module to a new module position. Using the module settings, each one of the columns can be further customized. Here are some examples of different column layouts:

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

FavGlyph Effects

This module supports 8 preset CSS3 effects on page scroll and load which can be changed by using the module settings. Here are some examples of different CSS3 load & scroll effects for this module:

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

Title Text

Lorem ipsum dolor sit amet, dolore magna aliqua.

FavGlyph Documentation

The downloaded package for the module is a .zip archive that needs to be unzipped before use. After it has been unzipped, inside the downloaded package you will find:

  1. the module's .zip archive - must to be installed using EXTENSIONS/MANAGE/INSTALL
  2. the ReadMe.txt file - has useful information about the product

Once installed, find the module in EXTENSIONS/MODULES and open it:

FavGlyph Joomla module documentation main screen

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.

MODULE CONTENT - this tab controls the individual settings for each element of the module such as images, text or icons for each one of the columns.

Module Settings

1. Module Options

FavGlyph Joomla module documentation settings main

  1. LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
  2. LAYOUT EFFECT - Choose a CSS3 effect for the layout on page scroll and load. Note that the CSS3 features are not supported by older browsers.

2. Icon Options

FavGlyph Joomla module documentation settings icon

  1. ICON BORDER RADIUS - Insert the border-radius for the background of the icon using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.
  2. ICON BORDER TYPE - Choose the border type for the background of the icon.
  3. ICON BORDER WIDTH - Insert the border width for the background of the icon using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.

3. Title Options

FavGlyph Joomla module documentation settings title

  1. TITLE GOOGLE FONT - Insert the name of the Google Font for the title of the module, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. TITLE FONT WEIGHT - Set the font weight for the title of the module.
  3. TITLE FONT STYLE - Set the font style for the title of the module.
  4. TITLE FONT SIZE - Insert the font size for the title of the module using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  5. TITLE MARGIN - Insert the margin for the title of the module using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  6. TITLE TEXT TRANSFORM - Choose the text transform for the title of the description title.

4. Description Options

FavGlyph Joomla module documentation settings description

  1. DESCRIPTION FONT SIZE - Insert the font size for the description text using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.

Module Content

This module supports a 6 column layout. This means it can have 6, 5, 4, 3, 2 or 1 icons for the module layout without assigning each module to a new module position. Each one of the icons from 1 to 6 has these options:

1. Display Options

FavGlyph Joomla module documentation content main screen

  1. SHOW ICON - Choose if the icon for this module should be displayed or not.

2. Width Options

FavGlyph Joomla module documentation content width options

    1. ICON WIDTH - Insert the width for the icon using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.
    2. DESCRIPTION WIDTH - Insert the width for the description title and text using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.

The width settings can be used with any ICON LAYOUT and are very useful for the left and right icon layouts.

3. Icon Options

FavGlyph Joomla module documentation content icon options

  1. ICON LAYOUT - Choose if the icon should be aligned to the top, bottom, left or right of the description.
  2. ICON NAME - Insert the Font Awesome icon name (for example: fa-magic or fa-joomla). A blank field reverts the setting to the default value.
  3. ICON COLOR - Choose the color for the icon. A blank field reverts the setting to the default value.
  4. ICON BACKGROUND COLOR - Choose the color for the background of the icon. A blank field reverts the setting to the default value.
  5. ICON BORDER COLOR - Choose the color for the border of the background of the icon. A blank field reverts the setting to the default value.
  6. ICON LINK - Insert the URL for the icon. Note that the link must include http:// or https://. A blank field means that no link is assigned to the icon.
  7. ICON LINK TARGET - Choose the link target of the URL for the icon.
  8. ICON FONT SIZE - Insert the font size for the icon using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.

4. Title Options

FavGlyph Joomla module documentation content title

  1. TITLE TEXT - Insert the text for the description title. A blank field reverts the setting to the default value.
  2. TITLE COLOR - Choose the color for the description title. A blank field reverts the setting to the default value.
  3. TITLE LINK - Insert the URL for the title. Note that the link must include http:// or https://. A blank field means that no link is assigned to the title.
  4. TITLE LINK TARGET - Choose the link target of the URL for the title.

5. Description Options

FavGlyph Joomla module documentation content description

  1. DESCRIPTION TEXT - Insert the text for the description of the module. A blank field reverts the setting to the default value.
  2. DESCRIPTION TEXT COLOR - Choose the color for the description of the module. A blank field reverts the setting to the default value.

The module features using CSS3 have limited support for older browsers, so please check the demo first.

Being a responsive module, this Joomla! module has no fixed width. The maximum width of the module is the width of the module position containing the module and/or the width of the device used (desktop, tablet or mobile). To test the responsive behaviour of the module columns, simply adjust the width of the browser window to different sizes.