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.
1/ Add more social field with PHP & HTML code for Helix III framework feature
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.
2/ Define more social field for Template Settings on Helix III framework
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”.
So, now you can go to Template Settings, open tab ‘Basic’, find option ‘Social’, so you can see new social field that we just defined.
If you have any questions, please feel free to let me know.
—
Kelvin from L.THEME
- Diving Into the Top 11 WordPress Table Plugins - August 28, 2024
- Top 9 Useful Joomla CRM Extension - August 28, 2024
- 11 Must-Haves of an eCommerce Website in 2024 - August 14, 2024
Great article.
How can I change the size of the icons, please?
You just add more CSS via Template Settings > Custom Code > Custom CSS code field
.social-icons li a i {
font-size: 20px;
}
Hi. Thanks for th tutorial.
How could I Change the icon size?
Tx
Just replied you above.
Tks! Work perfect!
You’re welcome!
If I want to do it with instagram just have replace vk for instagram, I did but nothings happens.
Thanks
Did you follow correct instruction and change icon class from vk to instagram?
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?
I found the issue. On the website their code is wrong. You should remove the “b” and change it to
Not sure about your mean with the “b”, can you explain more? So, I can test and update.
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”
Please send us your site and admin login via our email [email protected], so I can help.
Hello,
How can I change the social icons?
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?
Thank you, just follow this guide and change font-awesome class and parameter, so you will have other social networks icon and link.
HI Team,
Great Tutorial. Can we use this social icons in Joomla Articles.
Glad to help 🙂
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 🙂
Thank you for your info.
Can you submit ticket support and give us your site URL, admin login, so we can help.