字体真棒社交媒体按钮悬停效果

这是您需要添加的内容，以更改hover 上社交网络图标的原始颜色

.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
 }
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}

body {
  margin: 0;
  text-align: center;
  color: #f7f7f7;
  background: url(citybackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 10%;
  margin-bottom: 10%;
}
.referral {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight:20;
  margin-top: 5px;
}
h1 {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 100px;
}
h2, h3 {
    color: white;
    font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
}
head {
  text-align: center;
  color: white;
}
.me {
    height: 1000px;
    width: 1000px;
    border-radius: 100%;
    align: center;
    position: relative;
    top: 35px;
    right: 18px;
}
.me:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.info {
    font-size: 30px;
    display: inline;
    margin-top: 30px;
    margin: 0 auto;
}
.info a {
    background-color: #f7f7f7;
    border-radius: 15px;
    margin: 6px 6px;
    width: 10px;
    height: 10px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}
.info a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}
.socialmedia {
    display: inline;
    margin-top: 30px;
}
.socialmedia a {
    background-color: #f7f7f7;
    border-radius: 35px;
    margin: 6px 6px;
    width: 36px;
    height: 36px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}
.socialmedia a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
}
.socialmedia a .fa {
    font-size: 2.2em;
}
.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
}
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}
@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<div class="socialmedia">
            <a href="mailto:tarik.kdiry@gmail.com" title="Email">
                <i class="fa fa-envelope-o"></i>
            </a>
            <a href="https://www.facebook.com/Tarik.Kdiry" target="_blank" title="Facebook">
                <i class="fa fa-facebook"></i>
            <a href="https://twitter.com/GalacticWizrdry" target="_blank" title="Twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.instagram.com/tarik_kdiry/" target="_blank" title="Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
            <a href="https://www.linkedin.com/in/tarik-kdiry-0b62b8100" target="_blank" title="LinkedIn">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://github.com/tarikkdiry" target="_blank" title="Github">
                <i class="fa fa-github"></i>
            <a href="https://www.pinterest.com/tarikkdiry/" target="_blank" title="Pinterest">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>

在.socialmedia a .fa的CSS块中，您正在更改FontAwesome图标的字体大小-这也是您可以添加代码来更改颜色的地方：

.socialmedia a .fa {
  font-size: 2.2em;
  color: #222;
}
.socialmedia a:hover .fa-facebook {
  color: #4267B2;
} 

这是我的SCSS文件，名为"_fontawesome-social-colors.SCSS"，我在我的网站中导入：

/*
 * CSS Snipped for display logo color brand on HOVER for font awesome social media icons
 * List is obviously incomplete
 *
*/
a {
  &:hover, &:focus {
    > i {
      &.fa-facebook-square,
      &.fa-facebook {
        color: #3b5998;
      }
      &.fab.fa-facebook-messenger {
        color: #0084ff;
      }
      &.fa-youtube {
        color: #ff0000;
      }
      &.fa-twitter {
        color: #4099ff;
      }
      &.fa-envelope-o,
      &.fas.fa-envelope {
        color: red;
      }
      &.fa-twitter {
        color: #55acee;
      }
      &.fa-instagram {
        color: #5851db;
      }
      &.fa-linkedin {
        color: #0077b5;
      }
      &.fa-github {
        color: #333333;
      }
      &.fa-pinterest {
        color: #bd081c;
      }
      &.fa-whatsapp {
        color: #25d366;
      }
    }
  }
}

将其更改为您喜欢的