Adding Icons to Your Blog’s Content Links

Add Icons to your Blog's Links

I’ve recently been receiving attention for the way I identify affiliate links on RechargeWorkshop.com. They are styled differently than the default links and include an icon. You can do all of this manually whenever you add a link, but that’s too much hassle!

Here’s what this tutorial will show you how to do:

Most links are boring. This is what a standard link looks like. But some links are special. For example, all links that point to social media sites are worth identifying…

If you’d like to follow me on Facebook, you can find my profile here. If you’re into Twitter, my handle is @AndrewMiguelez. And lastly, should you need photographic evidence, my Instagram account is @andrewmiguelez.

How to Style Certain Links Differently

example of styled amazon affiliate links

An example of the customized styling of Amazon affiliate links on the Recharge Workshop blog. See the original post here.

Whenever I’m linking to an Amazon product with my affiliate shortcode, I have the link styled with their logo before the link. For the most part, I could do this within the WordPress editor. But I don’t do this manually because CSS is so much easier and once it’s set up, it does it for me.

Grabbing some icons

Google image search for social icons

A quick search for “social icons” will give you plenty of options.

In this walkthrough, I’m going to be using PNG image files because of the simplicity. But if you are comfortable with CSS and webfonts, I highly recommend you use a customized icon font instead. It’s not only better for performance, but it’s also way more flexible.

First, decide on what link types you’ll be styling. Next, go grab each icon you’ll need from a site like https://iconmonstr.com/ or wherever you prefer to get icons. I recommend using a size that will fit your text. If your font is 16px, then a 16×16 icon will work just fine. Adjust as you see fit.

Upload these image files to your website and get their URLs. This is quite easy in most modern CMS-driven websites.

Identifying the URL structure

In order to style the links automatically, we need to identify the structure of each of the links. If you’re going to be styling an Amazon affiliate link, you’ll notice that they all look like this: https://amzn.to/blah....

So amzn.to/ is what we’re going to set aside. Whenever we see that in a link, we want to style it. Now do the same thing for all your link types.

In this tutorial, I’m demonstrating with social media links. Here are my three link types:

  • facebook.com/
  • twitter.com/
  • instagram.com/

Unleash the power of CSS

Now we’re going to write our CSS to style the special links. You’ll want to put this wherever you have access to your stylesheets. In WordPress, you can edit your theme CSS in the Admin, but I’d recommend using a plugin so that your code won’t be overwritten every time the theme gets updated.

Here’s what we’re going to add to our stylesheet:

a[href*="facebook.com/"]:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background-image: url('ICON_URL_HERE');
}

Now let’s dissect.

a[href*="facebook.com/"]:before {} is our selector. It is selecting a link (or anchor) a. The part that you’re going to want to modify is [href*="facebook.com/"]. Obviously you can see the URL in there and what it’s doing is saying that all anchors with an href attribute that contains facebook.com/ should be selected. Change this to your special link’s URL structure. Finally, the :before means that we’re going to place the icon before the link text.

It’s time to modify the styles to your liking. The last four styles in the example above are what I’ll describe, but you can add whatever you like to customize it further.

  • margin-right: adjusts how much breathing room there is between the icon and the link text.
  • width: and height: must be set to the size of your icon image.
  • background-image: specifies the image to be used. So change ICON_URL_HERE to the image URL you saved earlier.

Once you’ve got this looking the way you like, duplicate it for each of the special links you have. You’ll have to adjust the URL’s but otherwise, it’s going to be exactly the same for each.

See a full, working example of this code here: http://codepen.io/anon/pen/aJxRdz

Final Advice

It’s best if your CSS selectors are very specific to the links you want to style. If they’re not, you’re going to affect all links to the specified URLs within your website. I’m thinking of links in your header, footer, etc.

You probably don’t want to apply these changes anywhere but in the main content of your pages and posts. So add on to the selectors to increase your specificity.

In WordPress, most themes use a wrapper with a class of .entry-content around the main content area. Let’s use that to improve our selector.

.entry-content a[href*="facebook.com/"]:before {}

Find out what is wrapping your main content area and add it like we did in this example.

You’re done!


This tutorial was kind of easy to follow, but also touches on some seriously complex things. If you’ve got questions, please leave them in the comments below. I’ll be happy to help.

I want to see what you made. Share how you’ve implemented this styling improvement on your site in the comments too.