Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

How do i change the color of the facebook icon ?

Im making a basic webpage and i want the background to be black. However, when i change the background to black, the facebook icon at the bottom that is linked to my facebook is barely visible. How do i change the color of that icon?

5 Answers

Jason Desiderio
Jason Desiderio
21,811 Points

For an image, you'd have to change the color in a program such as Photoshop.

An alternative is to include a font like Font Awesome so that you can control the size and the color in your css. To do this follow the steps below:

  • You would start by adding the following could in your <head> section:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  • Then you would replace
<img src="img/facebook-wrap.png" alt="Facebook logo">

with

<i class="fa fa-facebook-official facebook-icon"></i>
  • Lastly you would style the icon with css as if it was a font
.facebook-icon {
  color: white;
}

Here is a link to more classes you can add to further customize the icon: http://fortawesome.github.io/Font-Awesome/examples/

Let me know if this helps.

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

Wow brilliant! Yes it did work however it also resized the icon to an extremely small size. why would it resize it and can i make it bigger? thanks for all the help

Jason Desiderio
Jason Desiderio
21,811 Points

How are you including the icon in your page? It is from a font like Font Awesome or an image?

Feel free to post some code so we can get a better idea of what you're working with.

Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

The icon is included in the footer at the bottom of the page. here is the code for that part:

<footer> <a href="https://www.facebook.com/TheProxyFunkBand/info?tab=overview"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2015 PFB.</p> </footer>

Abe Layee
Abe Layee
8,378 Points

You can change the icon color with css background-color and using the !important.Rad this article on stackoverflow to know more about the importan http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

.facebook-icon { 
background-color:#222  !important;
 }
Jason Desiderio
Jason Desiderio
21,811 Points

You can add a font-size property to the facebook-icon class in the css file. In there you can type exactly how many pixels you'd like it to be.

.facebook-icon {
  color: white;
  font-size: 24px;
}
Joshua Harris
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 Points

so i tried adding the font-size where you said with the proper syntax and code but it doesnt resize on the front end. Any idea why?

Jason Desiderio
Jason Desiderio
21,811 Points

It sounds like the Font Awesome library css is overwriting your local css. Can you make sure that the link to the stylesheet for Font Awesome is above your own css file in the <head>?

Example (with a placeholder for the url of your css):

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="LINK TO YOUR STYLESHEET">