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 URLs
Add this to your stylesheetThis 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.
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.