#11 Social Media Buttons

Amy Marsh Is A Fashion Technologist In Training

social media buttons


Happy Monday!! We are into are second full week of coding! Last week (for me) brought early mornings, late nights, coding celebrations and some coding anguish, overall in general it was a lot of coding but that is what we want! I am sure this week will not be far different with some tasks scheduled  that you won’t want to miss. The days of coding confusion should be getting further and further behind you!


Today I am showing you how to add social media icons to your navigation bar. If you didn’t already know (and who doesn’t) social media is kind of a big thing and making sure every avenue is hit is a vital feature for success, especially in the blogging world! Multiplatform publishing is very important nowadays, the more access (and ways of gaining access) people have to your blog on the different levels of engagement that social media brings the stronger the bond between you and your reader. You’ll gain ‘recurring occurring products’ (recurring visitors) and who does want a recurring occurring product?! Therefore these social media buttons need to be clear and easy for a user to see.


Let’s get started!


First add this section of HTML to your header.php file :



Target=”_blank” is VERY I can’t stress (or emphasis that more with font styles) the importance of this. It means the link will open in a new tab, you don’t want to lose a reader and ensuring they can still get back onto your site with ease is important!

Make sure this section of code is in your inner-nav div and below this line of coding:



Change the links in this code to be your Facebook, Twitter, Instagram etc.


NB: This code is using font awesome therefore you will of needed to have added this to your links in your header file, you will of already done this if you completed the tutorial for scrolling social media buttons:



Next add the css to the bottom of your style.css file:



You might not be familiar with ‘:last-of-type’, this section of code removes  the margin from the end of the social-nav div so that it is matching with the margin on the left on the navigation links:





Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!


Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">