CSS: Add Icon to Links

By Xah Lee. Date: . Last updated: .

You can add a little icon to links to indicate what type of link it is.

For example, suppose you have links to Twitter like this:

<a href="https://twitter.com/xah_lee">Xah Lee</a>

And you want browser to show a icon, like this

CSS Google Plus Twitter Facebook icon link-2
Link with favicons, Twitter, Facebook, Google Plus

Instead of using a img tag for each link, you should use CSS to add them, by matching the URL.

Here's the CSS code:

a[href*="twitter.com/"] {
background:url(https://twitter.com/favicon.ico) no-repeat left center;

a[href*="facebook.com/"] {
background:url(https://www.facebook.com/favicon.ico) no-repeat left center;

The CSS selector a[href*="twitter.com/"] matches any “a” tag with “href” attribute that has value contanining the string “twitter.com/”. For a full list of such selector syntax, see: CSS 3 Selector Syntax.

See also:

CSS Misc Examples

  1. Display Table on Small Screen
  2. Fixed Aspect Ratio
  3. Add Icon to Links
  4. Progress Bar Example
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog