Setting up the J51 Icons

Joomla51 Extensions

Our J51 Icons module extension allows you to quickly and easily place a set of icons in a module position along with a caption title and some text for each. This module uses the 'Font Awesome' icons collection which give you a massive 500+ scalable vector icons to choose from.

Firstly install the mod_j51icons.zip from the corresponding folder to your Joomla version in your template download via your extension manager (Extensions -> Extension Manager).

Once installed you can create a new instance of your J51 Icons module by navigating to Extensions -> Module Manager -> New -> J51_Icons. Multiple instances of your Icons module, or indeed any module can be achieved by simply repeating this process.

General Settings

When creating/editing your Icons module you will find your 'General Settings' tab. This tab contains the main settings for the full set of icons.

Icons Color - Select the color of your icon(s).
Icons Size - Select the size of your icon(s).
Icons Opacity - Select the opacity of your icon(s).
Number of Columns - The number of columns to place your icons.
Icon Alignment - Align your icons to left, right or center.
Horizontal Margins - Set the horizontal margin in pixels of each icon.
Vertical Margins - Set the vertical margin in pixels of each icon.

Icons Settings (Icon ##)

Along with your 'General Settings' tab, you will find a tab for each icon within your collection. There is a total of 8 tabs allowing your collection to contain a maximum of 8 icons. Set the following settings for each icon you wish to be displayed in your collection.

Select Icon - Set the class name for the Font Awesome icon you want to use (eg. fa-coffee). For a full list of icon names check out http://fortawesome.github.io/Font-Awesome/cheatsheet/
Icon URL - Set the URL to which your icon will link to.
Open link in new window - Allow the link to open in a new browser window.
Icon Alt text - Mainly for SEO purpose, this field allows you to set an 'alt' tag for the icon.
Icon Title - Set the icon title to display.
Icon Description - Set the icons caption text to display.
Animate On Scroll - Add an animate class name to animate the image on scroll.