css link fra ikoner

Hej jeg har brug for hjælp.

Jeg arbejder på denne side: http://menofunding.dk/
i bunden af siden er der nogle ikoner her vil jeg gerne kunne linke fra hver ikon. Ved ikke om man kan gøre det med javascrip eller der en mere simple løsning?

Her har HTLM koden:

<ul class="social">   
  <li class="mail"><?php the_field('mail'); ?><br /><a href="mailto:christian@menofunding.dk">christian@menofunding.dk</a></li>
    <li class="twitter"><?php the_field('twitter'); ?></li>
  <li class="linkedin"> <?php the_field('linkedin'); ?></li>
  <li class="phone"> <?php the_field('phone'); ?></li>
</ul>

Her har css koden:

.social {
    overflow: hidden;
    list-style: none;
}

.social li {
    float: left;
    width: 200px;
    padding: 0 0 0 60px;
    font-size: 12px;
    text-align: center;
    line-height: normal;
    margin: 0 21px;
    height: 50px;
}

li.mail {
    margin-left: 0px;
    background: url(images/mail.png) no-repeat;
}

li.twitter {
    background: url(images/twitter.png) no-repeat;
}

li.linkedin {
    background: url(images/linkedin.png) no-repeat;
   
}


li.phone {
    margin-right: 0px;
    background: url(images/phone.png) no-repeat;
}