Add social media on footer

[dressmaterialonline]

Sir/Madam

My website is www.livingindiatv.com I need to add social media icons in my footer widget

[SamA74]

I see at present you only have text for your social links:-

<h3 class='title'>
Social Media Icons
</h3>
<div class='widget-content'>
<ul>
<li><a href='https://www.instagram.com/livingindiatv/'>instagram</a></li>
<li><a href='https://in.pinterest.com/livingindiatv/'>pinterest</a></li>
<li><a href='#'>youtube</a></li>
<li><a href='https://plus.google.com/102689304172526656580'>gplus</a></li>
<li><a href='https://twitter.com/livingindiatv'>twitter</a></li>
<li><a href='https://www.facebook.com/livingindiatv/'>facebook</a></li>
</ul>
</div>

This would just be a case of replacing the text with an img element linking to an appropriate icon which you could probably find with an image search.

Eg:-

<li><a href='https://www.facebook.com/livingindiatv/'><img src="icons/facebook.svg" alt="Facebook" width="30" height="30"></a></li>

[dressmaterialonline]

Thanks for replay i will try code if any error will come could you help me?

[coothead]

Hi there dressmaterialonline,

put this code…

 <ul class="social-icons">
  <li><a href="https://www.instagram.com/livingindiatv/">instagram<span></span></a></li>
  <li><a href="https://in.pinterest.com/livingindiatv/">pinterest<span></span></a></li>
  <li><a href="https://youtube.com">youtube<span></span></a></li>
  <li><a href="https://plus.google.com/102689304172526656580">gplus<span></span></a></li>
  <li><a href="https://twitter.com/livingindiatv">twitter<span></span></a></li>
  <li><a href="https://www.facebook.com/livingindiatv/">facebook<span></span></a></li>
 </ul>

…here as indicated…

</div>
<!-- put the HTML here -->
<div class='copyright'>2018 Living India TV All Rights Reserved</div>

Put this CSS, wherever you see fit…

.social-icons li {
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: middle;
 }

.social-icons a {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    word-break: break-all;
 }

.social-icons  span  {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background-image: url( social-icons.png );
 }

.social-icons li:nth-child(2)  span {
    background-position: -48px 0;
 }

.social-icons li:nth-child(3) span {
    background-position: -96px 0;
 }

.social-icons li:nth-child(4) span {
    background-position: 0 -48px;
 }

.social-icons li:nth-child(5) span  {
    background-position: -48px -48px;
 }

.social-icons li:nth-child(6) span  {
    background-position: -96px -48px;
 }

Use this image…

…and make certain that it is named social-icons.png

You can see a working example in this attachment…

dressmaterialonline.zip (24.9 KB)

coothead