Custom Icons in blocksocial

[Whispar1]

Hello,

I am hoping someone can see what I am missing. I have added custom social icons but for some reason, the facebook icon is not showing up.

 

Here is a snippet of my css showing facebook (which is not showing) and twitter icon (which is showing)

<!--Custom Social Icons -->
.footer-container #footer #social_block ul li.facebook a{
	background: url(http://www.whispardesign.com/graphics/facebook-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.facebook{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.twitter a{
	background: url(http://www.whispardesign.com/graphics/twitter-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.twitter{
	height:48px; width:48px;
}

All the other icons are changed through css - For some reason facebook is being over-riden by this section of the css instead of what I wrote for it above:

.footer-container #footer #social_block ul li a {
display: inline-block;
color: #2D0829;
font-size: 28px;

Any ideas why this is happening?

Thanks for any input.

Edited October 23, 2014 by Whispar1 (see edit history)

[thepan]

I think it got something to do with the code in your css file just before you put these lines. Some syntax error maybe. 

 

EDIT: Yes its the comment just before. You are not using a CSS Comment tag.

 

BTW there are more of those comments and I just checked the css file with a validator and it gives a dozen parser errors.

Edited October 23, 2014 by thepan (see edit history)

[Whispar1]

Thanks for taking a look at this - I appreciate it!

I am not sure I understand what you mean by css comment tag. This is the section of code I added for the custom icons to the end of my global.css file. Everything works fine except the facebook icon. You can see the page here at the bottom http://www.whispardesign.com

All icons are there except the facebook icon.

<!--Custom Social Icons -->
.footer-container #footer #social_block ul li.facebook a{
	background: url(http://www.whispardesign.com/graphics/facebook-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.facebook{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.twitter a{
	background: url(http://www.whispardesign.com/graphics/twitter-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.twitter{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.pinterest a{
	background: url(http://www.whispardesign.com/graphics/pinterest-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.pinterest{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.google-plus a{
	background: url(http://www.whispardesign.com/graphics/gplus-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.google-plus{
	height:48px; width:48px;
}

.footer-container #footer #social_block ul li.houzz a{
	background: url(http://www.whispardesign.com/graphics/houzz-icon.png); 
	height:48px;
	width:48px;
}
footer-container #footer #social_block ul li.houzz{
	height:48px; width:48px;
}

Edited October 23, 2014 by Whispar1 (see edit history)

[Whispar1]

Never mind - I found it and you are correct.

I should have done my heading like this:

/* Custom Social Icons */

Instead of this:

<!-- Custom Social icons -->

Sometimes we get in a hurry and add comments where they shouldn't be