2
我在我的網站上有很多fontawesome品牌圖標，我用它作爲各種其他網站的鏈接。Fontawesome品牌圖標背後的彩色背景
我設法將這些品牌圖標設置爲與懸停時的品牌顏色相匹配，但我完全停留在一個特殊的Flickr中。
暫時我用漸變背景顯示了它，一半藍色的&，但我對它不是很滿意。
我真正想要的是唯一可見的顏色應該是Flickr品牌圖標外部的藍色rgb（0,99,220），但是直接位於圖標後面的背景應該是藍色/粉色漸變將鼠標懸停在圖標中的兩個孔顯示爲左孔藍色&右孔粉紅色。
我試圖通過使背景具有與圖標相同的尺寸來實現此目的，並使用漸變，然後在背景周圍包裹8px藍色邊框，但我無法使其工作，一切似乎都不符合對齊方式看起來很糟糕。
我已經削減了HTML & css只包括在這裏張貼需要的部分。
/* Renaming of FONT AWESOME fonts */
.soc-flkr:before {
content: "\f16e";
}
/* Footer Social Buttons */
ul.soc-icns {
list-style: none;
display: block;
float: left;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 10px;
padding-left: 0px;
}
ul.soc-icns li {
display: inline;
}
/* Footer Section Icons */
.soc-icns a.socFlickr:hover {
background: rgb(0, 99, 220);
background: -moz-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
background: -webkit-linear-gradient(left, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
background: linear-gradient(to right, rgb(0, 99, 220) 0%, rgb(0, 99, 220) 50%, rgb(255, 0, 132) 50%, rgb(255, 0, 132) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0063dc', endColorstr='#ff0084',GradientType=1)";
border: 1px solid rgb(201, 201, 201);
}
.soc-icns a.socFlickr:hover i {
color: rgb(255, 255, 255);
}
.soc-sq li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
width: 24px;
height: 24px;
font-size: 16px;
border: 1px solid rgb(141, 141, 141);
line-height: 24px;
color: rgb(141, 141, 141);
vertical-align: middle;
}
.soc-sq li i {
margin-top: 0px;
}
.soc-sq li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.soc-sq i {
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.soc-icns a {
background-color: rgb(201, 201, 201);
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<div>
<ul class="soc-icns soc-sq">
<li><a href="https://www.flickr.com" target="_blank" class="socFlickr" title="Flickr"><i class="fa soc-flkr"></i></a>
</li>
</ul>
</div>任何幫助，將不勝感激
問候..，