Instagram Social Icon

Is there a way to add this along side the other social media icons?

 

Hello,

Go to the front-page.php file present in your theme directory and paste the code given below in that file as shown in the image given below.

Code:

<li class="ins"><a href="Enter the link for instagram here" target="_blank"></a></li> 

See the image for reference



Similarly, do the above same process in the contact.php file present in your theme directory.


Now,
Download both the images attached with this post and upload them from Media panel in your dashboard and copy their URL .

See the image for reference


Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

ul.social-icons li.inst a {
background: url('Enter the URL address of social-icon-color1.png image') no-repeat -183px 0px;
width: 24px;
height: 23px;
}
ul.social-icons li.inst a:hover {
background: url('Enter the URL address of social-icon-hover1.png image') no-repeat -183px 0px;
}
ul.social-icons {
max-width: 205px;
} 

This will solve your issue.

 

The invisible link is there. But no logo. I uploaded as you stated. Changed the Front and Contact forms. Please advise.

 

And added to custom CSS

 

Hello,

Could you please share us your website link so that we can check your issue.

 

http://socialweddingsr.us/

 

Hello,

Remove previous code from front-page.php file and paste code given below

Code:

<li class="inst"><a href="Enter the link for instagram here" target="_blank"></a></li> 

It will work.

Thanks & Regards
Nitesh Raghuwanshi

 

That worked. But the icon images are cut up a little. Instead of complete circle, a portion is cutoff.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

ul.social-icons li.inst a{
height:24px;
} 

Thanks & Regards
Gourav Shrivastava