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

HTML How to Make a Website Creating HTML Content Build the Footer

Jacob Thomson
Jacob Thomson
757 Points
Posted by Jacob Thomson
Jacob Thomson
757 Points

Could 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;
}
Stephen Gheysens
Stephen Gheysens
11,935 Points
Stephen Gheysens
Stephen Gheysens
11,935 Points

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

1 Answer

Jacob Thomson
Jacob Thomson
757 Points
Jacob Thomson
Jacob Thomson
757 Points

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