Changing Font Awesome Icon Link color after it's :visited

Question

Just trying to change some FA Icons a:visited color from the default blue. Giving me a hell of a time for some reason. All I want is to change the links color from blue after it is visited. Here is the following code:

HTML:

<div class="pull-right" id="socialMediaIcons">
<a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook-official fa-3x"></i></a>
</div>

CSS:

#socialMediaIcons .fa a:link, #socialMediaIcons .fa a:visited  {
    color: #ccc;
}
#socialMediaIcons .fa:hover, #socialMediaIcons .fa:focus {
    color: #ccc;
    border: none;
}
#socialMediaIcons .fa {
    padding-left: 10px;
    position: relative;
    bottom: 25px;
}

Everything is seeming to have an effect except the #socialMediaIcons .fa a:link, #socialMediaIcons .fa a:visited part. Just want to change color of visited link.

Answer 1

Try:

#socialMediaIcons a:link .fa, #socialMediaIcons a:visited .fa  {
    color: #ccc;
}

Your .fa is inside of the a and thus have to be after the a:visited in the selector.