Setting up your Social Media Icons

This tutorial applies to the following templates:

  • Colette
  • Maya
  • Grace
  • Magnolia
  • Harmony
  • Verona
  • Kodaline
  • London
  • Hannah
  • Elvira
  • Valencia
  • Serenity
  • Chelsea
  • Scarlett
  • Trinity
  • Willow
  • Caitlin
  • Nadia
  • Beaumont
  • Ashley
  • Fedora
  • Artisan
  • Creative
  • Revolve
  • Madison
  • Florence
  • Vitality
  • Enterprise
  • Boutique
  • Stockholm
  • Alexis
  • Central
  • Boss
  • Journal
  • Enlighten
  • LifeStyle
  • Habitat
  • Grafik
  • Brooklyn
  • Cashmere
  • Virtuoso
  • Polaris
  • Calibra
  • Renovate
  • PianoForte
  • Kindle
  • LetterPress
  • Impulse
  • Nocturne
  • Metropolis
  • Clarity
  • Substance
  • Privilege
  • Resonate
  • Arkadia
  • Presence
  • Evolution
  • Catalyst
  • Executive
  • Bordeaux
  • Novation
  • Specialize
  • Chimera
  • Avenue
  • Rendezvous

Social media has become a very important part of any website, helping to promote your site and to communicate to your clients. For the majority of our templates we have included an area to which you can add icons linking to your social media pages. These icons have been carefully styled to blend in seamless with the look and feel of each template and are prominently placed within each design to be easily found by your website visitors. Icons can be easily and quickly set up from within the 'Social Media' tab of your templates parameters.

  1. Navigate to your template style parameters (Extensions -> Template Manager -> [YourTemplateStyle]
  2. Select the 'Social Media Icons' tab
  3. Enter the URL(s) to your social media pages in to the corresponding field
  4. 'Save & Close'

Note: Icons will automatically be enabled once its corresponding field is not empty. If you find an icon displaying when its corresponding field appears blank please ensure that you have not inadvertently add a space (spoacebar) within its field.

In our more recent template releases we have started using the FontAwesome font set instead of images to render the social media icons. This has brought with it a number of benefits.

  1. Smaller file size
  2. Scales to any size without loss of clarity
  3. Looks great on retina displays
  4. Improved coloring options
  5. Wide selection of icons to choose from (500+)

Along with fields for each of the more popular social media icons, templates using the FontAwesome font set include the option to add any of the 500+ FontAwesome icons.

  1. At the bottom of the 'Social Media Icons' tab click the 'List/Add Custom Icons' button
  2. Using the +/- create a row of fields for each custom icon you wish to implement
  3. In the 'Custom Icon' column add the FontAwesome class for the icon you wish to use (eg. fa-coffee). A full list of the FontAwesome icon class names are available at http://fortawesome.github.io/Font-Awesome/icons/
  4. Under the 'Icon Title' add the title to your icon. This title will displayed as a tooltip when a user hovers over the icon.
  5. Under the 'Icon URL' column add the URL you wish the icon to link to.
  6. Under the 'Icon Color'/'Icon Hover Color' column add the color/hover color for your icon.
  7. Click 'Save'
  8. Click 'Save & Close'

Note: It is important to click save on both the 'List/Add Custom Icons' modal box and within your template style for your changes to take effect. To avoid any issues like blank icons appearing I would also suggest removing any empty rows within the 'List/Add Custom Icons' modal box using the '-' button.


  • Thursday, 18 June 2015

Who's Online

We have 531 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.