FAVSOCIAL is a free responsive Joomla! module that lets you choose up to 10 social media icons from Font Awesome and link each one to your social media accounts.

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

FavSocial Joomla module documentation main screen

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

Module Settings

1. Module Options

FavSocial Joomla module documentation settings main screen

  1. MODULE ALIGNMENT - Choose if the icons should be aligned to the left, in the center or to the right.

2. Icon Options

FavSocial supports up to 10 icons for every module. Each one of the icons from 1 to 10 has these options:

FavSocial Joomla module documentation settings icon

  1. SHOW ICON - Choose if this icon should be displayed or not.
  2. ICON NAME - Insert the Font Awesome icon name (for example: fa-twitter or fa-facebook). 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.
    A useful resource for the colors of the icons is Brand Colors, so copy and paste the color code provided by this resource inside the icon color and icon background color fields.
  5. 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.
  6. ICON LINK - Insert the URL for the icon. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  7. ICON TARGET - Choose the link target of the URL for the icon.
  8. ICON PADDING - Insert the padding for the icon using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  9. 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.

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.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.