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

Posted by Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

How to add social media icon in my header

Hi guys. I want to add social media icon into my header like some sites do, (please check image) (http://www.carlosdiazdesigns.com/northpoint/img/header.jpg "header") Any idea how I can do this.. ? Also in case you need this info Im using Foundation platform. thanks a lot.

2 Answers

Ilja Daderko
Ilja Daderko
8,953 Points
Ilja Daderko
Ilja Daderko
8,953 Points 
<header>
   <!-- ... your stuff here ... -->
   <ul>
      <li><a href="#facebook">Facebook</a></li>
      <li><a href="#twitter">Twitter</a></li>
      <!-- etc.. -->
   </ul>
</header>

And in your css make sure that you set a big negative text-indent, like -9999px to make sure "Facebook" and "Twitter" text are invisible to users, than set backgrounds and dimensions for <a> tags so they look like image icons.

Carlos Diaz
PLUS
Carlos Diaz
Courses Plus Student 9,006 Points
Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

HI LLja. Thanks alot . I will put this in codepen and see If I understand the concept and I will get back to you for some feedback. Thanks again