Aşağıdaki kodları editörünüze koyalayıp bakar mısınz? Niçin butonların görsellerri gözükmüyor? Çözen arkadaşlarımız kodu derleyip yazmalarını rica ediyorum.
HTML:
<div class="sosyalbutonlar">

      <a href="http://facebook.com/cahitsoyman.blogspot.com" target="_blank" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
      <a href="http://twitter.com/cahitsoyman.blogspot.com" target="_blank" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      <a href="http://google-plus.com//cahitsoyman.blogspot.com" target="_blank" class="google-plus" ><i class="fa fa-google-plus" aria-hidden="true"></i></a>
      <a href="http://instagram.com//cahitsoyman.blogspot.com" target="_blank" class="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
      <a href="http://linkedin.com//cahitsoyman.blogspot.com" target="_blank" class="linkedin" ><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      <a href="http://youtube.com//cahitsoyman.blogspot.com" target="_blank" class="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
     

</div>


CSS:
*{
  

  margin:0;
  padding:0;
  box-sizing:border-box;
  

  

  }
  

.sosyalbutonlar{
  margin-top: 50px;
  display: inline-block;
  position: relative;
  left: 200px;
    

  

  }
  

.sosyalbutonlar a  {
  background:#a1a1a1;
  text-decoration: none;
  color: #FFF;
  width: 60px;
  height: 60px;
  display: inline-block;
  border-radius: 10px;
  margin-right: 20px;
  font-size: 30px;
  overflow: hidden;
  position: relative;
  line-height: 60px;
  text-align: center;
  }
    

.sosyalbutonlar a{  

   transition: transform 0.4s linear 0s, 
   border-top-left-radius 0.1s linear 0s, 
   border-top-right-radius 0.1s linear 0.1s, 
   border-bottom-right-radius 0.1s linear 0.2s, 
   border-bottom-left-radius 0.1s linear 0.3s;
   

}

.sosyalbutonlar .facebook:hover {
      background-color: #3b5998;
        transform: rotate(360deg);
      border-radius: 50%;   

}
  

 .sosyalbutonlar .google-plus:hover   {
      background-color: #dd4b39;
      transform: rotate(360deg);
      border-radius: 50%;   

}

 .sosyalbutonlar .linkedin:hover   {
      background-color: #00aced;
      transform: rotate(360deg);
      border-radius: 50%;   

}

 .sosyalbutonlar .youtube:hover   {
       background-color: #bb0000;
      transform: rotate(360deg);
      border-radius: 50%;   

}
```