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.

It looks like this:

My html code:

<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>

My css code:

.fb-btn {
    color: #2D609B;
}

.twit-btn {
    color: #00C3F3;    
}

.you-btn {
    color: #CC181E;    
}

.gog-btn {
    color: #F6861F;
}

.ins-btn {
    color: #517FA6;    
}

.pen-btn {
    color: #CC1D1F;    
}

Not sure if i'm using the right icons etc fa-facebook-square and if it locked to be transparent.

回答1:

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;
}

Check my jsFiddle to see the code in action.

来源：https://stackoverflow.com/questions/32120902/font-awesome-icons-change-color-in-the-middle-of-the-icon-the-text

标签

css

font-awesome