How to add extra Social Icons for Helix framework?

by Kelvin | Jun 12, 2017 | Template Guides | 20 comments

Hello everyone!

Many customer asked me about how to add more social icons (such as VK, Instagram,…) for helix framework. So, today I make this blog instruction with this question. Step by step, I will make example for VK social network and LT Inteco – Premium IT Company Joomla! template as example for this blog.

Go to Admin > Extensions > Templates > Templates (File Manager for template), open LTHEME template.

Via template file list, click to folder ‘features’, and open file ‘social.php’. We just define new once social param, and make output style for them.

+ Via function renderFeature(), define new more social param

$vk = $this->helix3->getParam(‘vk’);

+ Then, add more HTML output for this social

if( $vk ) {
$html .= ‘<li><a target=”_blank” href=”‘. $vk .'”><i class=”fa fa-vk”></i></a></li>’;
}

* Remember that you must to define Font Awecome class for social because social load font awesome, not icon, in this case it’s “fa fa-vk”, you can see Font Awesome social class here.

Via Templates (File Manager for template), open file ‘templateDetails.xml’ and go to social defination code (search for keyword ‘social’, you will see it), define option for Template Settings

<field name=”vk” type=”text” label=”HELIX_SOCIAL_ICON_VK” description=”HELIX_SOCIAL_ICON_VK_DESC” class=”child social_icons social_icons_1″ />

HELIX_SOCIAL_ICON_VK and HELIX_SOCIAL_ICON_VK_DESC: you can define via language file, or make direct text, example: label=”VK Social Network” description=”This is social network URL and Icon for VK”.

If you have any questions, please feel free to let me know.

—

Kelvin from L.THEME

5/5 - (7 votes)

Author
Recent Posts

Kelvin

Hello everyone! My name is Kelvin – I’m Founder & CMO at Ltheme. I have more than 10 years in Joomla! & WordPress development, more than 4 years in Digital Marketing, SEO specialist. Everyday I make some blogs for Joomla! and WordPress, support everyone with building beauty websites based on these CMSs, help everyone from Joomla Support Board as Joomla Guru role in forum support.

Interesting with this topic? You can read related articles:

20 Comments

ANDERSON on June 12, 2017 at 11:23 am

Great article.
How can I change the size of the icons, please?
Reply
- admin on June 16, 2017 at 8:49 am
  
  You just add more CSS via Template Settings > Custom Code > Custom CSS code field
  .social-icons li a i {
  font-size: 20px;
  }
  Reply
Abderson on June 12, 2017 at 11:27 am

Hi. Thanks for th tutorial.

How could I Change the icon size?
Tx
Reply
- admin on June 16, 2017 at 8:49 am
  
  Just replied you above.
  Reply
Fernando Barbi on November 24, 2017 at 4:49 pm

Tks! Work perfect!
Reply
- admin on November 25, 2017 at 2:47 am
  
  You’re welcome!
  Reply
Oscar on January 12, 2018 at 6:41 pm

If I want to do it with instagram just have replace vk for instagram, I did but nothings happens.
Thanks
Reply
- admin on January 13, 2018 at 2:14 am
  
  Did you follow correct instruction and change icon class from vk to instagram?
  Reply
  - George Taxidis on August 14, 2018 at 11:08 am
    
    Hi,
    
    I have the same problem. I managed to create the new menu on template and enabled it with # but on the front-end is appeared as a small box symbol and doesn’t appear the the Instagram logo. I added on the code the correct Font Awesome social class . Should I change somewhere the logo of Instagram or add the icon into the site files in order to appear it as Instagram logo?
    Reply
    - George Taxidis on August 14, 2018 at 11:17 am
      
      I found the issue. On the website their code is wrong. You should remove the “b” and change it to
      Reply
      - admin on August 14, 2018 at 2:44 pm
        
        Not sure about your mean with the “b”, can you explain more? So, I can test and update.
oscar on January 13, 2018 at 4:48 pm

This is waht I did step 1
$instagram = $this->helix3->getParam(‘instagram’);

and then this:
if( $instagram ) {
$html .= ‘‘;
}

This is what I added in step 2

When I tried to modify the template then get “Error loading file”
Reply
- admin on January 15, 2018 at 3:32 am
  
  Please send us your site and admin login via our email [email protected], so I can help.
  Reply
George Taxidis on August 14, 2018 at 9:30 am

Hello,

How can I change the social icons?
Reply
Scott Abernethy on January 30, 2019 at 4:38 pm

Thanks for this tutorial. It works great and I followed it add a link to Instagram. The only issue I have is that if I don’t have any other social media links other than the one I just added, the link I added doesn’t appear. If I add any of the other links (Facebook, Twitter, etc…) then my social media link appears. Any idea why?
Reply
- admin on January 31, 2019 at 2:51 am
  
  Thank you, just follow this guide and change font-awesome class and parameter, so you will have other social networks icon and link.
  Reply
Phani on December 4, 2019 at 4:09 pm

HI Team,

Great Tutorial. Can we use this social icons in Joomla Articles.
Reply
- Kelvin on December 5, 2019 at 3:55 am
  
  Glad to help 🙂
  Reply
Arnaud Lehman on December 28, 2019 at 12:20 am

Hi, I did follow the instructions and created the instagram logo but I have two issues:

1- The instagram logo is thinner than the others (in my case facebook and linkedin). The others logo look like in bold in comparison… and I checked every parameters didn’t see anything different.
2- In the back office, in the template’s social icon’s section, the new line for instagram doesn’t display like the others (“HELIX_SOCIAL_ICON_INSTAGRAM” instead of “Facebook URL” for example). Maybe because I followed strictly the instructions…But didn’t see any difference with the other social medias in the code…

Thanks you 🙂
Reply
- Kelvin on December 28, 2019 at 2:21 am
  
  Thank you for your info.
  Can you submit ticket support and give us your site URL, admin login, so we can help.
  Reply