Qual è il modo standard per aggiungere un'icona a un collegamento con i CSS?

Question

Sono abituato a utilizzare padding + background-image per posizionare un'icona accanto a un collegamento.

Ci sono molti esempi di questo approccio. Qui è uno da 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; 
}  

Ma la maggior parte del browser immagine di sfondo, che è fastidioso non vengono stampati.

Che cos'è lo standard per posizionare l'icona accanto ai collegamenti che è semanticamente corretto e funziona in tutti i casi?

---

EDIT

Che dire di CSS :before e :after? È una pratica raccomandata?

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

Answer 1

Personalmente lo avrei riempito e inserito un'immagine di sfondo tramite una classe CSS (proprio come il tuo esempio). È di gran lunga la via più leggera, mantiene il documento leggero e semantico.

Se la stampa è veramente importante (e intendo dire che lo è veramente importante per) inserire un'immagine reale lì, ma essere consapevoli del fatto che rovina il markup da un aspetto semantico.

Forse una soluzione di compromesso migliore sarebbe quella di avere un "versione stampabile" che utilizza le immagini al posto (o da qualcosa di server-size o qualche JS che sostituisce la classe CSS con un'immagine reale.

Answer 2

Anche se come dicendo OLi tenere icona nel css è il metodo migliore e non c'è modo di stampare css sfondi. (fino a quando si è attivata su sfondo css stampa da impostazioni del browser).

ma se si può usare javascript allora questo metodo funziona per voi

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

è possibile aggiungere un'immagine incorporata al collegamento.