我有一个问题,更改我的字体 - 真棒社交图标的文字颜色。现在它是透明的,因为我的页脚背景颜色看起来很奇怪。有什么办法可以把它改成白色吗?
尝试过使用color :(和颜色代码)但只改变了文本周围的颜色。
看起来像这样:
我的HTML代码:
<div class="social-content">
<a href="#"><i class="fa fa-facebook-square fa-3x fb-btn"></i></a>
<a href="#"><i class="fa fa-twitter-square fa-3x twit-btn"></i></a>
<a href="#"><i class="fa fa-youtube-square fa-3x you-btn"></i></a>
<a href="#"><i class="fa fa-google-plus-square fa-3x gog-btn"></i></a>
<a href="#"><i class="fa fa-instagram fa-3x ins-btn"></i></a>
<a href="#"><i class="fa fa-pencil-square fa-3x pen-btn"></i></a>
</div>
我的css代码:
.fb-btn {
color: #2D609B;
}
.twit-btn {
color: #00C3F3;
}
.you-btn {
color: #CC181E;
}
.gog-btn {
color: #F6861F;
}
.ins-btn {
color: #517FA6;
}
.pen-btn {
color: #CC1D1F;
}
我不确定我是否使用了正确的图标等fa-facebook-square,如果它被锁定为透明的话。
答案 0 :(得分:0)
尝试添加白色背景。您可以使用Font Awesome图标堆栈实现此目的。为此,请使用fa-square
并制作color: white;
并将其放在方形社交媒体图标下方。
<强> HTML 强>
<span class="fa-stack fa-2x social social-fb">
<i class="fa fa-square fa-stack-1x white-bg"></i>
<i class="fa fa-facebook-square fa-stack-2x "></i>
</span>
<强> CSS 强>
/* Just to create some contrast */
body {
background: #DA4A10;
margin: 10px;
}
/* Color of the social media icon */
.social-fb { color: #2D609B; }
/* Definition of the white background */
.white-bg {
color: white;
font-size: 54px;
}
检查我的jsFiddle以查看正在运行的代码。