An easier way to add social media icons

on 9.1.2014

How to add social media buttons without uploading images

My very first blog design tip is about how to add social media icons to your blog… without uploading any images! But wait, why would you want that? Well…

You’ll save time because you won’t have to create the icons yourself or hunt them down on the web. They’re also easy to customize in terms of color and size. They’ll look better because they’re scalable vectors, which means that you get clear, pixel-perfect icons at any size. No blurry images — even on screens with very high resolutions!

So how does it work, you ask? I use the free resource called Font Awesome, and it really is awesome. Alright, this is starting to sound like an infomercial, so let’s get started!

NOTE: Blogger users, don’t forget to back up your template before making any changes. And WordPress users, I recommend using a child theme to avoid your changes being overwritten if the theme is updated.

For both WordPress & Blogger:

1. From your Blogger dashboard, go to Template > Edit HTML. From your WordPress dashboard, go to Appearance > Editor and find the “header.php” file of your theme.

Add the following code between <head> and </head>:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

socialmediaicons_tutorial

2. In Blogger, go to Layout > Add a Gadget > HTML/JavaScript. In WordPress, go to Appearance > Widgets and add a Text widget.

Add a Twitter icon using this code:

<i class="fa fa-twitter"></i>

3. Wrap a link around the code — the link should be to your Twitter profile (I’m using mine as an example, you’ll need to replace it with your own link):

<a href="http://twitter.com/cristinadotdk"><i class="fa fa-twitter"></i></a>

socialmediaicons_tutorial2

4. To add more icons, go to this list of all the available icons. Search for your icon (“Pinterest” for example) and copy its code:

socialmediaicons_tutorial03

Then wrap your Pinterest profile link around it. The end result should look like this:

<a href="http://pinterest.com/cristinadotdk"><i class="fa fa-pinterest"></i></a>

5. The icons automatically inherit the font size and color of your main text, but if you want, you can customize this. In Blogger, go to Template > Customize > Advanced > Add CSS. In WordPress, go to Appearance > Editor and find your theme’s “style.css” file.

Insert this code:

.fa, .fa a {
font-size: 20px;
color: #000000;
}

The font-size determines the size of the icons; simply type in the size that you want. The color option uses “hex” codes — you can pick a color code here. If you’d like the icon to change color when you hover over it, insert this code as well:

.fa:hover, .fa a:hover {
color: #9f9f9f;
}

And that’s it, you’re done! I hope you enjoyed this first edition of my blog design tips & tricks. Follow me on Bloglovin’ to make sure you don’t miss any future posts!

NOTE: If you’re currently using one of my Blogger templates/WordPress themes and would like to add more social media icons, step 4 is the only step you’ll need. Everything else has already been done for ya!

Pin on PinterestTweet about this on TwitterShare on Facebook
by CRISTINA
Web and blog designer who's been designing and developing sites for over 10 years. Lives in Copenhagen, Denmark, but works with clients from all over the world. Get in touch

4 comments:

Leave a Reply

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