Social Header Links easy Drop in Code with Font Awesome Icons
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.
- Add a new folder and file in atom
- Get your library files
- Add these links to your header
- Add Structure
- Adding the social header
- Browse the Icons
- Grid Container
- Style and Test
- 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
Social Header Links easy Drop in Code with Font Awesome Icons Demo
View Demo Full Screen View Demo New Tab
Social Header Links easy Drop in Code with Font Awesome Icons Code
HTML
<section class="header">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-3">
<div class="logo">
.logo
</div>
</div>
<div class="cell large-6">
<div class="nav">
.nav
</div>
</div>
<div class="cell large-3">
<div class="social">
<a href="#!" target="_blank"><i class="fas fa-envelope-square"></i></a>
<a href="#!" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="#!" target="_blank"><i class="fab fa-facebook-square"></i></a>
</div>
</div>
</div>
</div>
</section>
CSS
.social {}
.social a:hover {
color:#EEE;
text-shadow:0px 1px 5px rgba(0,0,0,0.4);
}
.social a {
display:inline-block;
font-size:26px;
margin-right:3px;
}
.header {
padding:20px 0;
background:teal;
color:#FFF;
}
.header a {
color:#FFF;
}
Scripts
<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" />