Font-awesome icons, изменить цвет в середине значка (текст)

Question

У меня проблема, меняя цвет текста моих знаковых социальных значков. Прямо сейчас это прозрачно, что выглядит странно из-за моего фонового цвета нижнего колонтитула. Есть ли способ изменить его на белый?

Пробовали с цветом: (и цветовой код), но это только меняет цвет вокруг текста.

Это выглядит следующим образом:

Мой 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 и если он заблокирован, чтобы быть прозрачным.

Answer 1

Попробуйте добавить белый фон. Вы можете добиться этого с помощью стека значков шрифта 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, чтобы увидеть код в действии.