Adding icons to links

This post was migrated from my old site to a new system that doesn't quite support the same formatting. Sorry if it looks a bit weird!

Now that I migrated to Ghost this doesn't really work any more. I'll leave it up in case it's useful.

Here's how I added icons to links on my site. I initially wanted to have a way to highlight social links, but I'm also using it to denote different types of downloads, links to videos, etc.

The HTML & CSS you'll need

Add a class to your URL's

<a class="sketch" href="your url">Your Link Text</a>

Add this to your stylesheet

This CSS positions the image :before the link. You can also use :after to put it after the link. I've styled this to look good inline, but you can modify it as you see fit.

a.sketch {
  text-decoration: none;
  color: #e4882d
}
a.sketch:before {
    content: "";
    display: inline-block;
    background: url("linklogo/sketch.svg") no-repeat top right;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 4px;
    margin-bottom: 2px;
}
a.sketch:hover {
  color: #c46c1e;
}

Using SVG

I'm using SVG, since it's pretty well supported now and this will deprecate nicely. If they can't be shown - your links will still work. You can use any browser supported image format, but with SVG, you don't have to worry about retina displays.

I'm also using it for social links like Twitter and Medium etc - it works well for them.

Here's a download that has a bunch of the most common social icons, so you don't have to spend ages hunting them down and sanitizing them like I did. It also includes the CSS you'll need:

Download SVG Icons & CSS

Includes: Instagram, Pinterest, Facebook, Twitter, Slack, Email, Sketch, Medium, YouTube.
Email icon is from Google's Material icon set.