सीएसएस जेनरेट की गई सामग्री में यूनिकोड पूरक निजी उपयोग वर्णों को कैसे एम्बेड करें?

Question

मैं आइकन के लिए एक वेबफॉन्ट का उपयोग कर रहा हूँ। आइकन ग्लिफ़ यूनिकोड के पूरक निजी उपयोग करने के लिए मैप किया जाता है क्षेत्र-ए & बी

सब कुछ ठीक काम करता है अगर मैं डेटा- के माध्यम से सीएसएस में पात्रों पारित * गुण:

<div class="icon" data-icon="&#xF005A;"></div> 

और फिर:

.icon::before { 
    font-family: IconFont; 
    content: attr(data-icon) 
} 

लेकिन अगर मैं सीएसएस में सीधे भाग निकले चरित्र एम्बेड करने के लिए प्रयास करें ...

.icon::before { 
    font-family: IconFont; 
    content: '\0F005A '; 
} 

यह एक लापता प्रतीक प्रश्न चिह्न के रूप में दिखाई देता है।

लेकिन अगर मैं एक अलग विशेष वर्ण की कोशिश ...

.icon::before { 
    font-family: IconFont; 
    content: '\F8FF '; 
} 

यह ठीक काम करता है!

मुझे कल्पना में कुछ भी नहीं मिला है जो कहता है कि यह संभव नहीं है ... यह काम नहीं कर रहा है।

किसी को भी इसमें कोई अंतर्दृष्टि है?

Answer 1

निजी आइकन क्षेत्र में अपने आइकन फ़ॉन्ट को मैप करने के लिए आईकॉमून पर जाएं। जब आप फ़ॉन्ट डाउनलोड करते हैं, तो किमून ने एचटीएमएल प्रदान किया है, जिसमें विशेष पात्रों को प्रदर्शित करने के लिए दो विधियां हैं।

विधि 1 (from CSS-tricks) और Icomoon डाउनलोड में शामिल:

<i aria-hidden="true" data-icon="&#xe000;"></i> 

...... 

[data-icon]:before { 
    font-family: 'icomoon'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

विधि 2 from Icomoon:

<span aria-hidden="true" class="icon-pencil"></span> 

...... 

.icon-pencil, .icon-folder { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.icon-pencil:before { 
    content: "\e000"; 
} 
.icon-folder:before { 
    content: "\e001"; 
} 

आप एचटीएमएल वास्तव में किसी भी टैग का उपयोग कर सकते हैं; मैं सीएसएस-ट्रिक्स में टिप्पणियों में से एक से सहमत हूं कि इटालिक टैग सबसे अच्छा हो सकता है, क्योंकि इसे html5 में फिर से परिभाषित किया गया था। मैं बस आइकन के लिए पसंद है।