字体真棒图标，改变图标中间的颜色（文本）答案

【问题标题】：Font-awesome icons, change color in the middle of the icon (the text)字体真棒图标，改变图标中间的颜色（文本）
【发布时间】：2015-11-14 06:03:28
【问题描述】：

我遇到了一个问题，要更改字体很棒的社交图标的文本颜色。现在它是透明的，因为我的页脚背景颜色看起来很奇怪。有什么办法可以改成白色吗？

已尝试使用颜色：（和颜色代码），但这只会改变文本周围的颜色。

看起来像这样：

我的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 以及它是否锁定为透明。

【问题讨论】：

尝试改变 background.color
已经试过了..背景填充的比图标还多
更改<a> 的background-color，为其添加填充，然后更改<i> 的color

标签： css font-awesome

【解决方案1】：

尝试添加白色背景。您可以使用 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 以查看正在运行的代码。

【讨论】：