Drop in this code in the header of your site to quickly add some social links in your header.

This version uses foundation for the grid system. But you can swap this grid system out for bootstrap by changing the classes in the grid if needed.

I will also show adding a small logo and simple menu into the grid as the base header on your site.

1. Add a new folder and file in atom
2. Get your library files
3. Add these links to your header
4. Add Structure
5. Adding the social header
6. Browse the Icons
7. Grid Container
8. Style and Test
9. Final Padding and Touches

1. Add a new folder and file in atom

Get the base of this up and running with foundation library and html base code. Just call the file index.html for now.

Tip: in atom and sublime text editors (and maybe vs code) you can type in html and then press tab and it will add a basic html layout into your file.

2. Get your library files

head over to cdnjs and find the library files you need in your project and copy and paste them into your index.html file.

3. Add these links to your header.

For this project we will need font awesome and also foundation css.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" integrity="sha512-IyYpCJ+7aODR+LWiU+buuFnKg69IYu7SCmn+3IBNxvEcfsDC7z1xyWhAZTAFTGTlLMnDwcQBFWhhe7JiSw6TEg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

4. Add Structure

Ok now we can finally add some structure to our html page.

I did have a video of this but its 2 minutes so you will have to check the full video for this one.

5. Adding the social header

For this example i will just leave the logo and nav items blank, just as placeholders for now as this post concentrates on the social header links.

6. Browse the Icons

For the icons you can browse the icon library here, and pick out the codes for the icons if you want to use different ones.

7. Grid Container

To make this more responsive make sure your items within the section are also in a grid container, or you could add your own wrapping class, if you dont want the items to be full width.

8. Style and Test

Add some styles and see if it all looks how we want it.

Here is the basic layout working in the grid format.

Just add some additional padding logo and nav items and its ready to go

9. Final Padding and Touches

Complete Code

Now we have a basic structure for the header of our site and the social links over too the right.

Video