¿Cuál es la forma estándar de agregar un ícono a un enlace con CSS?

Question

Estoy acostumbrado a usar padding + background-image para colocar un ícono al lado de un enlace.

Hay muchos ejemplos de este enfoque. Aquí está uno de 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; 
}  

Pero la mayor parte del navegador no se imprimen imagen de fondo, lo cual es molesto.

¿Qué es la norma para colocar el icono junto a los enlaces que es semánticamente correcto y funciona en todos los casos?

---

EDITAR

¿Qué pasa con CSS :before y :after? ¿Es una práctica recomendada?

a.test:after { 
    padding-right: 5px; 
    content: url(../pix/logo_ppk.gif); 
} 

Answer 1

Personalmente lo rellenaré y pondré una imagen de fondo a través de una clase de CSS (como en el ejemplo). Es, de lejos, la ruta más ligera, mantiene el documento ligero y semántico.

Si imprimirlos realmente importa (y me refiero a realmente importa) pegar una imagen real allí, pero tenga en cuenta que no arruina el marcado desde un aspecto semántico.

Tal vez una mejor solución de compromiso sería tener una "versión imprimible", que utiliza imágenes en lugar (ya sea por algo servidor grande o alguna JS que sustituye a la clase CSS con una imagen real.

Answer 2

Aunque como diciendo OLi mantener el icono en css es el mejor método y no hay manera de imprimir css fondos. (hasta que enciende el fondo css imprimir desde la configuración del navegador).

pero si se puede utilizar Javascript a continuación este método funcionará para usted

http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

puede agregar una imagen en línea al enlace.