5/5 - (2 votes)

Is it possible to add social icon for Helix framework? In this article, we will guide you how to add Social Icons For Helix Framework with VK social network and AT Halloween – Responsive Halloween website template as example.

Step 1. Add more social field for Helix III framework feature

To add more social fiels for Helix III frameworkfeature, the first thing you need to do is to go to Admin >> Extensions >> Templates >> Templates (File Manager for template) and open AGETHEMES template. See the following screenshot:

Agethemes

Next, you click to folder ‘features’ then you open ‘social.php’ file. We just define new social param and make output style for them.

Guide To Add Social Icons For Helix Framework

Now, we define new more social param via function renderFeature()
$vk = $this->helix3->getParam(‘vk’);

Add Social Icons For Helix Framework

+ Then add more HTML output for VK social network
if( $vk ) {
$html .= ‘<li><a target=”_blank” href=”‘. $vk .’”><i class=”fa fa-vk”></i></a></li>’;
}

Add Social Icons For Helix Framework

Note: Because social load font awesome, not icon, so you must define Font Awecome class for social, in this example, it’s “fa fa-vk”, you will see Font Awesome social class here.

Step 2. Define more social field for Template Settings on Helix III framework

Through Templates (File Manager for format), open ‘templateDetails.xml’ file, go to social defination code ( by searching for keyword ‘social’), now let’s 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″ />

Add Social Icons For Helix Framework

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

Next, go to Template Settings, then open “Basic” tab and find “Social” option. Now you can see new social field as the screenshot below:

Add Social Icons For Helix Framework

If you have any question about this post, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *

Flash Sale Enjoy your purchase with 25% OFF on today! code: FLASHSALE25 More Details
Flash Sale Enjoy your purchase with 25% OFF on today! code: FLASHSALE25 More Details