Placing Social Media Icons in Header
Published on August 17, 2015
Published on Wealthy Affiliate — a platform for building real online businesses with modern training and AI.
Social Media Icons in Header file:
Ever thought that sometimes there just doesn’t seem to be a Word Press Plugin that can create your Social Media icons in the right place you want, or in the style you want?
If your Theme doesn’t include Social Media links well here is a solution for you.
The first time I used this technique was on a friend’s website, they wanted to have specific Social Media icon design & links within the header of their website so they would show on all pages. You could do the same with placing the icons in the footer of your website too.
I found the information I needed from this site: http://www.dreamtemplate.com/dreamcodes/documentation/social_icons.html# they have a large variety of icons in various styles and sizes and provide all the code you need.
CODING:
Yes here is where you need to have the courage to do a little coding, and a little understanding on where to place the code.
You will need to add this next bit of code from CSS/JS files (add code to <HEAD> section) only once anywhere into your header.php file (that is if you want the icons in your header:)
<!-- DC Social Icons CSS -->
<link rel="stylesheet" type="text/css" href="http://www.dreamtemplate.com/dreamcodes/social_icons/tsc_social_icons.css" />
Ready to put this into action?
Start your free journey today — no credit card required.
Now under every section of the available icons from Dreamtemplate’s webpage there is a dropdown - "View Code" this give you all the code needed for the icon/s you are looking for, you can see here in this image that the code shown is associated with the L1: (Line 1).
If we look at adding the Facebook Icon in a square32 format the code looks like this:
Now if you just stuck this into your page along with the CSS/JS code, yeah it would display the Facebook Square, but it wouldn’t lead anywhere. You need to add in the address reference for your Facebook page in the href=”https://www.facebook.com/page_name”
I would suggest copying the code required and paste it into a notepad just so you can configure the full code later before pasting to your hearder.php file.
So once you have this set you can then paste the code into your page, you may have to play around with the positioning of the code as I have noticed that it can vary from Theme to Theme.
Manipulating code position
Here I had placed code for the icons and the CSS/JS code within the header.php file just above the Navigation bar area and that produced what you can see here:
If I wanted to have the same Icons below the Navigation bar you just paste the code in after the </Nav> code and I would have gotten this result:
Now on my website http://onlineincomescamfree.com I have the Social Media Icons sitting at the bottom of my header banner, as I am using the Bouquet theme, this was the best positioning for my icons.
Seriously Coding can be very powerful and as you can see it can easily be manipulated to your liking, with Coding if you have an idea you can generally make it work for you.
Word of Warning: As always it is suggested that you have a backup copy of the files you are changing, just incase something goes south and breaks you file or your website.
Good Luck Coding
Share this insight
This conversation is happening inside the community.
Join free to continue it.The Internet Changed. Now It Is Time to Build Differently.
If this article resonated, the next step is learning how to apply it. Inside Wealthy Affiliate, we break this down into practical steps you can use to build a real online business.
No credit card. Instant access.