How to add new social icons to Arkitek header

Adding new icons or replacing old icons in Arkitek theme isn't really hard. It takes only one line of code to do this job. Before we start this tutorial, please make sure that you're using a child theme. So here we go.

First you need copy the header.php file from your parent theme folder to your child theme. Now, open the header.php file of your child theme and look for the following code:

$ti_general_vimeo_link = get_theme_mod( 'ti_general_vimeo_link', '#' );
if ( !empty($ti_general_vimeo_link) ) {
echo '<a href="'. $ti_general_vimeo_link .'" title="'. __( 'Vimeo', 'ti' ) .'" style="background-color: '. get_theme_mod( 'ti_general_socials_backgroundcolor', 'ti' ) .'; color: '. get_theme_mod( 'ti_general_socials_color', '#ffffff' ) .';" target="_blank"><i class="fa fa-vimeo-square"></i></a>';
}
?>

First you need copy the header.php file from your parent theme folder to your child theme. Now, open the header.php file of your child theme and look for the following code:

Found it? Great!

You just need to add the following line of code, just after above line, to add new Instagram icon to your header:

<a href="#" style="background-color: <?php echo get_theme_mod( 'ti_general_socials_backgroundcolor', 'ti' ); ?>; color: <?php echo get_theme_mod( 'ti_general_socials_color', '#ffffff' ); ?>;" target="_blank"><i class="fa fa-instagram"></i></a>

Found it? Great!

That's all it takes. You need to replace # in the above code with the link to your site/profile. Instagram icon isn't the only one, and you can pick from over hundred different icons from Font Awesome's official docs.

Don't forget to save your changes. And if you need any help then please post a new thread at our forums. :)