Setting up the J51 Icons

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.
  • Tuesday, 23 June 2015

Who's Online

We have 577 guests and 4 members online

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.