Social Icons with Font Awesome


Wait, social icons are fonts? What? Well, if you haven’t heard of Font Awesome before, they offer over 500 icons for people to use free! Here is a complete list of their icons. Now scroll all the way to the bottom of that page and you’ll see the social media/brand icons.

What’s great about these icons is that they are very easy to add to your blog and they aren’t images. Why are images not as good? Images take longer to load and they lose quality on higher resolution computers. Using these Font Awesome icons will load faster and have a nice clean/crisp look. Plus they will be easy to customize for this tutorial.

funny cat

Cat Tip!

Before we get started, make sure you have this line of code in the head tag section of your template:

That line of code will make the font icons appear in your blog when you add them.

Now I’ve gone through the Font Awesome list and picked out what I believe to be the more popular social media icons for this tutorial. I’ll show you at the end of this tutorial how to add extra icons that I didn’t initially include. There are two parts to this tutorial, the HTML and the multiple CSS versions.

Social Icons HTML

The first thing we need to do is add our social media url links to the HTML and delete the social icons that we don’t want for our blog. We’ll be using this HTML:

I’ve written this code the be pretty self explanatory. Each line of HTML code above is a separate social icon. There are 10 of them. You can tell which icon is which by the title text. For example, the first one is for Twitter.

To add your links to the social icons, paste your url where it says LINK for each social icon you wish to use. Put the link between the quotes. Don’t delete the quotes. If you don’t want a social icon included, just delete that entire line of code.

Once you’ve finished adding your links/deleting unwanted icons, add this code to an HTML/Javascript gadget(for Blogger) or a Text widget(for WordPress).

Social Icon CSS Styles

The important step in this section is don’t forget to choose your colors and add them to the CSS. The colors will not magically appear for you.

You’ll need to choose two colors. The color of your icons and the color of the icons when you hover over them. You can choose colors and get the color code here:

I’ve put together a couple different styles for the social media icons. In the CSS just look for the all caps text: MAIN_COLOR and HOVER_COLOR for where to put your chosen colors. If you’re not sure how to add CSS, follow this tutorial.






Increase/Decrease Size of Icons

Since these icons are “fonts” we can increase/decrease the size of the icon with CSS. Just look for this in the CSS: font-size: 18px;

Increase or decrease that number 18 to increase/decrease the size of the icon.

There’s a second part to this though, since these icons use a width and height as well. In the CSS, look for these three values:

All of these values should match. Increasing/decreasing these values, will increase/decrease the size of the box/circle that surrounds the social icon. If you picked the last CSS option, the plain icons, then don’t worry about the width/height as this is not applied there.

Adding Additional Social Icons

Font Awesome offers MANY icons and I’ve only included a few of them in this tutorial. It’s pretty easy to add additional ones though to the HTML code above.

So, if you go to this icon list: and

and click on Stumbleupon. That will bring you to a page for Stumbleupon where you will see this code:


Remember how I said each social icon was on it’s own separate line in the HTML above? Let’s take Twitter for example:

There are two HTML tags here. First is an ‘a’ link tag and inside that is an ‘i’ tag. Font Awesome uses these italicize tags to store their font icon. What you’ll need to do, is go to the Font Awesome page, copy that ‘i’ tag from their site, and paste it in HTML like below where it says PASTE_HERE.

Then add that HTML tag to your other social icons. If I were to add StumbleUpon to the original HTML that I wrote above, it would look like this:

Make sure you don’t add the icon HTML after that ending /div tag.

What about goodreads?

As someone who loves to read, I can’t forget about Goodreads, who has been left out of the Font Awesome list :(

For this we can just use a simple ‘g’ letter. Here’s what the HTML will look like:

Since this is a regular font, we need to add some CSS to make sure that ‘g’ looks similar to the Goodreads ‘g’.

Phew, I think that’s it. Hopefully I covered most of the bases for using Font Awesome social icons. If you have any questions though, just let me know in the comments!

Leave a Reply

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

CommentLuv badge

28 thoughts on “Social Icons with Font Awesome

  1. Ouuh I never heard of font awesome before. But thanks to you now I do know what is it all about. That’s such a cool feature. Oh and thanks for the tutorial. That will make everything easier. :D

    By the way, I like your style :)

    1. Hi Audrey,

      Font Awesome doesn’t have goodreads (see last part of tutorial above). Mine may look different because I use a the Raleway google font. Really it’s just the letter ‘g’ not an icon. You can use whatever font you want for it to make it look similar to the goodreads ‘g’.

  2. Oooh, I’ve been looking for these for so SO long! Thank you so much <3 but one thing, at the bottom of my blog, where i'm trying to apply this code, it's in a vertical line, not horizontally as it should be. Am I needing to do something different or what? Thank you :)

  3. Hey, I really appreciate the icons tutorials. I was wondering if you could explain how to social icon styles on my blog as well:) I can’t figure it out:P I’m not good at coding. I did get the social icons there, but I’d like to make them larger. If you could look on my blog: and tell me what I did wrong, I’d really appreciate it:)

  4. Hi, I have a couple of questions. Firstly, I copied the correct code with the round borders but they are not showing up, even after changing the colours. Also, I changed the colour to what I wanted but they are all showing up as the hover colour other than the last one, and I can’t figure out how to fix this.
    Thanks, Ella x

      1. I have a question, since none of your examples are working examples, I couldn’t test it, but most of the templates I find have the font awesome codes in the share portion of the template, however not one twitter “icon” is set up to add the site owner’s Twitter handle. (for instance, I’d like the resulting tweet to read “My awesome post( ie the title) @someone). I see you know how to do it, can you explain, please where to drop all that into the code? When I find one thing that works, it *only* seems to work on one template. Change the template, the code fails.

    1. Hi Juli,

      I think you mean social share icons, which isn’t what this tutorial covers. This tutorials is for social icons that go in your sidebar and link to your social accounts. If you’re looking for share icons that you can fully customize, then I’d recommend AddToAny ( You’ll need to read through the customize documentation to figure out how to add your twitter handle to it.

      1. Yeah, those. I’ve seen people do it before without the AddtoAny type coding, so I know it’s possible. I just can’t make heads or tails of it! *lol* You don’t know how they’re doing it, though? Oh well.Thanks anyway. :)

        1. Well you’ll need the script tags that come with apps like AddtoAny. Share icons don’t work with just HTML. There are many different options out there when it comes to share icons. I just like AddtoAny because you can customize the look and features of the app. Another option is AddThis: