Add social media on footer


My website is I need to add social media icons in my footer widget

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

<h3 class='title'>
Social Media Icons
<div class='widget-content'>
<li><a href=''>instagram</a></li>
<li><a href=''>pinterest</a></li>
<li><a href='#'>youtube</a></li>
<li><a href=''>gplus</a></li>
<li><a href=''>twitter</a></li>
<li><a href=''>facebook</a></li>

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.


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

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

Hi there dressmaterialonline,

put this code…

 <ul class="social-icons">
  <li><a href="">instagram<span></span></a></li>
  <li><a href="">pinterest<span></span></a></li>
  <li><a href="">youtube<span></span></a></li>
  <li><a href="">gplus<span></span></a></li>
  <li><a href="">twitter<span></span></a></li>
  <li><a href="">facebook<span></span></a></li>

…here as indicated…

<!-- 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… (24.9 KB)



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.