CSS Instagram Logo

Question

自分のサイトにソーシャルメディアのアイコンを追加しようとしています。グラデーションはCSS3にあります。 現在、インスタグラムアイコンのアウトラインは、ホバーオーバーされたときに非表示になります。

これは私の現在のコードです。私のFacebookロゴは動作しますが、グラデーションWebkitの代わりに無地の(background: #3b5998;)を除いては同じです。 Facebookは必要に応じて機能し、ホバリングされると、アイコンが青色になり、中央に「F」が表示されます。

ここでそれを達成するためのヒントを教えてください。ありがとうございました！

.social-icons li.instagram a { 
      border-radius: 50%; 
      background: #F2F2F2 /* This is for the default "gray" background */ 
url(http://www.example.com/images/social/instagram.png) no-repeat 0 0; 
     } 
     .social-icons li.instagram a:hover { 
      background-color: #f09433; 
     background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
     background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
     background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1); 

     } 

Answer 1

私は、彼らがイメージだったので、私がやったことは必要とされた結果を得るために、2つの「画像」の重複したかのように勾配が扱われるということでした私の問題を実現しました。

だから、確定コードはでした：

.social-icons li.instagram a { 
    border-radius: 50%; 
    background: #F2F2F2 url(http://www.myprojectsite.com/images/social/instagram.png) no-repeat 0 0; 
} 
.social-icons li.instagram a:hover { 
    background-color: #f09433; 

    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1); 

background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 

background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
}