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
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 PointsHow 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
21,811 PointsFor 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.
Jason Desiderio
21,811 PointsHow 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
Full Stack JavaScript Techdegree Student 3,674 PointsThe 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
8,378 PointsYou 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
21,811 PointsYou 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
Full Stack JavaScript Techdegree Student 3,674 Pointsso 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
21,811 PointsIt 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">
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 PointsYes! thankyou for all the help jason i really appreciate it!
Jason Desiderio
21,811 PointsNo problem at all!
Joshua Harris
Full Stack JavaScript Techdegree Student 3,674 PointsJoshua Harris
Full Stack JavaScript Techdegree Student 3,674 PointsWow 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