Why has this link turned purple and lost its styling properties?

I'm trying to style this button so that the text is white, with a white border like the other social media buttons. The code I used for all these buttons is identical and the button has the desired properties when I preview the HTML , but for some reason when I upload the file and visit the site (josholadunni.com) the button for LinkedIn is purple and doesn't have a border. Any help would be much appreciated!

<div id="socialmedia">

    <a href="https://www.facebook.com/oladunnidesign/" class="fa fa-facebook" target="_blank"></a>
    <a href="https://www.linkedin.com/in/josh-oladunni-96a893b8/" class="fa fa-linkedin" target="_blank"></a>
    <a href="https://www.instagram.com/JoshOladunniDesign/" class=" fa fa-instagram" target="_blank"></a>


  </div>

 .fa {
    padding: 10px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: transparent;
    color: white;
    border-color: white;
    border-style: solid;
}

.fa-linkedin {
    background: transparent;
    color: white;
    border-color: white;
    border-style: solid;
}

.fa-instagram {
    background: transparent;
    color: white;
    border-color: white;
    border-style: solid;
    }