Cannot center align images with text in div

I am trying to create a footer for a website with links to social media accounts, but I'm having trouble centering the images.

The text is centered correctly, but clearly the images are not, they are closer to the right.

Here's what it looks like

HTML:

<div class="footer">
    <ul>   
        <li><a href="mailto:bannermangavin@gmail.com"><img src="/resources/email.png" alt="mail"></a></li>
        <li><a href="http://ift.tt/2h9tDi0" target="_blank"><img src="/resources/linkedin.png" alt="linkedin page"></a></li>
        <li><a href="http://ift.tt/2ieYKq6" target="_blank"><img src="/resources/github.png" alt="github page"></a></li>
    </ul>
    <p>Copyright Company Name &copy; 2016 | All Rights Reserved</p>
</div>

CSS:

.footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: green;
}

.footer ul{
    list-style: none;
}

.footer ul li {
    font-size: 26px;
    display: inline-block;  
    background-color: red;
    padding-bottom: 3px;
}

.footer a {
    text-decoration: none;
    color: white;
    padding-left:10px;
    padding-right: 10px;
    text-align: center;
}

.footer a:hover {
    color: orangered;
}
.footer p{
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.footer img{
    text-align: center;
    opacity: 0.7;
    height: 50px;
    width: 50px;
    margin: auto;
    display: inline-block;
}
.footer img:hover{
    opacity: 1.0;
}

I have already searched multiple threads, even copying the code, but I can't seem to get it to work.

Here's a fiddle with my work: http://ift.tt/2h9rvH6