Adding Icons to Links

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.

End result:

Boring old link becomes Sketch Download Link

The HTML & CSS you'll need

Add a class to your URLs

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.

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 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.


If you liked this, please take a moment to Follow @Lloyd on Twitter

Comments

© 2017 Lloyd Humphreys |