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 trialJacob Thomson
757 PointsCould someone help me correct this code?
I already have a facebook and twitter badge in my footer, and im trying to add a instagram badge. I went on the instagram website and found this code for the badge
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } }</style>
<a href="http://instagram.com/jacobthomson1?ref=badge" class="ig-b- ig-b-24"><img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /></a>
But, obviously it isn't the same width/height/color as my other badges. What do i change in this chunk of confusing code to make it identical to my other badges?
This is the html for my other two badges:
<a href="http://twitter.com/jacobthomson16"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/jacob.thomson3"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
And this is the css for the two badges:
/*******************************
FOOTER
*******************************/
footer {
font-size: 0.7em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
Ken Alger
Treehouse TeacherEdited for markup.
1 Answer
Jacob Thomson
757 PointsThank you Stephen Gheysens, for taking the time to explain that to me. Makes perfect sense now :) Not great with Photoshop, and not sure that ill be able to match the color, but i will give it a go!
Stephen Gheysens
11,935 PointsStephen Gheysens
11,935 PointsHi Jacob,
The best way to add an Instagram "badge" to your page would be to download the image file containing the Instagram logo (preferably in .png or .jpeg format), upload it to your workspace, and style it in the exact same ways as the other badges. You will be able to size and position it in the same way as the Facebook/Twitter badges. but the gray color of the other badges is in the image - it's something that is changed by modifying the image itself, not HTML or CSS, and can be done in a photo editor such as Photoshop or Pixlr.
Once you've uploaded the image file (for example, let's call it 'instagram.png'), you would write the HTML exactly as you wrote it for the other badges, and the 'social-icon' class in your CSS file will take care of the rest:
html<a href="http://twitter.com/YOURINSTAGRAM"><img src="img/instagram.png" alt="Instagram Logo" class="social-icon"></a>
Let me know if you have any additional questions!