What is the standard way to add an icon to a link with CSS?

Posted by ewernli on Stack Overflow See other posts from Stack Overflow or by ewernli
Published on 2010-06-10T12:54:00Z Indexed on 2010/06/10 13:12 UTC
Read the original article Hit count: 221

Filed under:

css

|

web-design

I'm used to use padding + background-image to place an icon next to a link.

There are many example of this approach. Here is one from here:

 <a class="external" href="http://www.othersite.com/">link</a>

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }

But most browser don't print background image, which is annoying.

What is the standard to place icon next to links which is semantically correct and works in all cases?

(I couldn't find an exact similar question. If there is one, just close this one as duplicate)

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about web-design

Book Recommendation: Web Design

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm looking to get back into advanced Web Design. I'd say I was already fairly advanced but I haven't designed much in a good few years and haven't got any books any more. I was just interested to know if anyone had any good recommendations for Web Design books and resources, I've spent the last couple… >>> More
Flash Web Design with the Help of Flash Professionals

as seen on Article City - Search for 'Article City'
Flash has often been criticized by web specialists for its relatively slow loading time. It?s also been targeted by many people who have experienced loading problem of a Flash site on the web. But no... [Author: David Jackson - Web Design and Development - August 31, 2009] >>> More
7 Web Design Tutorials from PSD to HTML/CSS

as seen on Just Skins - Search for 'Just Skins'
Some time back when I was looking for some tutorials to create a website from scratch i.e. the process from designing the PSD to slice it and CSS/XHTML it, then not many quality results appeared. But that was like almost an year back and a lot of water has flown down the river Thanes since [...] >>> More
Web Tools That Save You Money: Free Web Design

as seen on Internet.com - Search for 'Internet.com'
Imagine a free tool that lets you easily build a Web site thats actually attractive. Plus, fabulous freebie site for software youd actually use and a resource where you can buy high-quality printed envelopes. >>> More
Grids In Web Design: Organized And Effective Designing

as seen on Article City - Search for 'Article City'
Website designs are creative creations, which do exhibit the culmination of an artist?s outlook, usage of latest tools and progression of skill. Indeed, it is an art, but there are some parameters or... [Author: David Jackson - Web Design and Development - August 31, 2009] >>> More