home projects speaker
buy me a coffee? sponsor me!

How to add icons to links with css

Written by Alexander

Have you ever thought your links looked boring and that they needed the little extra? Well, fear not, for I have the solution!

The CSS

Put this in your css file, preferably after your global CSS notation for links. I have added the most used icons/link types, so if you feel the need to update it, please do. Make sure you have the correct icons before you test it ;)

css
a[href^='https:'] {
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/page_link.png) center right no-repeat;
}

a[href^="https://twitter"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/twitter_16.png) center right no-repeat;
}

a[href^="https://qik"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/qik_16.png) center right no-repeat;
}

a[href^="https://qik"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/qik_16.png) center right no-repeat;
}

a[href$='.rss'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/rss_16.png) center left no-repeat;
}

a[href^="https://feeds."]
{
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/rss_16.png) center left no-repeat;
}

a[href^="https://digg"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/digg_16.png) center right no-repeat;
}

a[href^="https://facebook"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/facebook_16.png) center right no-repeat;
}

a[href^="https://flickr"]
{
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/flickr_16.png) center right no-repeat;
}

a[href^='https:'] {
  display: inline-block;
  padding-right: 20px;
  background: transparent url(/img/icons/page_white_key.png) center right
    no-repeat;
}

a[href^='mailto:'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/email.png) center left no-repeat;
}

a[href$='.pdf'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_acrobat.png) center left
    no-repeat;
}

a[href$='.jpg'] {
  background: none;
}

a[href$='.iso'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_dvd.png) center left
    no-repeat;
}

a[href$='.md5'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_key.png) center left
    no-repeat;
}

a[href$='.swf'],
a[href$='.fla'],
a[href$='.swd'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_flash.png) center left
    no-repeat;
}

a[href$='.xls'],
a[href$='.csv'],
a[href$='.xlt'],
a[href$='.xlw'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_excel.png) center left
    no-repeat;
}

a[href$='.ppt'],
a[href$='.pps'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_powerpoint.gif) center left
    no-repeat;
}

a[href$='.doc'],
a[href$='.rtf'],
a[href$='.txt'],
a[href$='.wps'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_word.png) center left
    no-repeat;
}

a[href$='.zip'],
a[href$='.gzip'],
a[href$='.rar'] {
  display: inline-block;
  padding-left: 20px;
  line-height: 18px;
  background: transparent url(/img/icons/page_white_compress.png) center left
    no-repeat;
}

I recommend the Silk Icon set from famfamfam.com. They are free to use for non-profit use.

About the author

Hi! My name is Alexander, and I am a creative frontender, specializing in UX, accessibility, universal design, frontend-architecture, node and design systems. I am passionate with open source projects and love to dabble with new emerging technologies related to frontend. With over 24 years of frontend experience, I have earned the right to be called a veteran. I am a lover of life, technologist at heart. If I am not coding, I am cooking and I love whisky and cigars. Oh, and coffee, I LOVE coffee!

If you want to know more about me, here is some links you might want to check out: GitHub, Instagram, Twitter, LinkedIn, CodePen, Slides.com, npm,

Speaker

I am also an avid speaker on several topics! Check out some of the things I speak about, and contact me if you are interested in having me at your next event!