字体超赞的图标,在图标(文本)中间更改颜色 [英] Font-awesome icons, change color in the middle of the icon (the text)
问题描述
我遇到了问题,更改了字体真棒社交图标的文本颜色.现在它是透明的,由于我的页脚背景色而显得很奇怪.有什么办法可以将其更改为白色?
I have a problem, changing the text color of my font-awesome social icons. Right now it's transparent which looks weird because of my footer background-color. Is there any way that I can change it to white?
尝试过使用颜色:(和颜色代码),但这只会更改文本周围的颜色.
Have tried with color: (and a color code) but that only changes the color around the text.
它看起来像这样:
我的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,以及是否锁定为透明.
Not sure if i'm using the right icons etc fa-facebook-square and if it locked to be transparent.
推荐答案
尝试添加白色背景.您可以使用真棒字体"图标堆栈来实现.为此,请使用fa-square
并制作color: white;
并将其放在方形社交媒体图标下方.
Try to add a white background. You can achieve this with a Font Awesome icon stack. To do this, use a fa-square
and make the color: white;
and put this underneath the square social media icon.
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 来查看运行中的代码.
Check my jsFiddle to see the code in action.
这篇关于字体超赞的图标,在图标(文本)中间更改颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!