सीएसएस के साथ एक लिंक में आइकन जोड़ने का मानक तरीका क्या है?

Question

मुझे एक लिंक के बगल में एक आइकन रखने के लिए padding + background-image का उपयोग करने के लिए उपयोग किया जाता है।

इस दृष्टिकोण के कई उदाहरण हैं। यहाँ 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; 
}  

लेकिन सबसे ब्राउज़र पृष्ठभूमि छवि है, जो कष्टप्रद है मुद्रित नहीं है।

मानक है जो लिंक के बगल में आइकन रखने के लिए मानक है जो सभी मामलों में अर्थपूर्ण रूप से सही है और काम करता है?

---

संपादित

क्या सीएसएस :before और :after के बारे में? क्या यह एक अनुशंसित अभ्यास है?

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

Answer 1

मैं व्यक्तिगत रूप से यह पैड था और एक CSS वर्ग (सिर्फ अपने उदाहरण की तरह) के माध्यम से एक पृष्ठभूमि छवि डाल दिया। यह अब तक का सबसे हल्का मार्ग है, यह दस्तावेज़ प्रकाश और अर्थपूर्ण रखता है।

यदि उन्हें प्रिंट करना वास्तव में मायने रखता है (और मेरा मतलब है वास्तव में मायने रखता है) वहां एक वास्तविक छवि चिपकाएं लेकिन ध्यान रखें कि यह एक अर्थपूर्ण पहलू से मार्कअप को पेंच करता है।

शायद एक बेहतर समझौता समाधान जो छवियों के बजाय का उपयोग करता है एक "मुद्रण योग्य संस्करण" के लिए होगा (या तो कुछ सर्वर-आकार या कुछ जेएस कि एक वास्तविक छवि के साथ CSS वर्ग की जगह से।

Answer 2

हालांकि ओली कहते हुए सीएसएस में आइकन रखने का सबसे अच्छा तरीका (जब तक आप सीएसएस पृष्ठभूमि चालू ब्राउज़र सेटिंग से प्रिंट करने में) है और वहाँ पृष्ठभूमि सीएसएस मुद्रित करने के लिए कोई रास्ता नहीं है।।

लेकिन अगर आप जावास्क्रिप्ट का उपयोग कर सकते तो इस प्रक्रिया में

के लिए काम करेंगे

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

आप लिंक करने के लिए इनलाइन छवि जोड़ सकते हैं।