सीएसएस के माध्यम से यूनिकोड: पहले


81

मैं अपने वेबपेज पर फ़ॉन्ट विस्मयकारी का उपयोग कर रहा हूं और मैं :beforeछद्म तत्व के अंदर एक आइकन प्रदर्शित करना चाहता हूं ।

प्रलेखन / धोखाधड़ी के अनुसार , मुझे यह फ़ॉन्ट प्राप्त करने के लिए टाइप करना है, लेकिन यह काम नहीं कर रहा है। मेरा मानना ​​है कि यह सामान्य है क्योंकि HTML संस्थाएँ समर्थित नहीं हैं :before
इसलिए मैंने थोड़ा सा पता लगाया और पता लगाया, कि यदि आप HTML संस्थाओं को प्रदर्शित करना चाहते हैं, तो आपको :beforeबची हुई हेक्स संदर्भ का उपयोग करना होगा।
इसलिए मैं हेक्स संदर्भ की खोज कर रहा था लेकिन मुझे कुछ नहीं मिला। मेरा मानना ​​है कि ऐसा इसलिए है क्योंकि ये "निजी उपयोग" मूल्य हैं, जो भी इसका मतलब है।

क्या इसमें काम करने का कोई तरीका है :before?


चूंकि लिंक 404 है, आप pseduo तत्वों के बारे में बात कर रहे हैं? क्या आपने content: "";अपने :beforeतत्व के लिए CSS में जोड़ने की कोशिश की ?
जॉर्डन

बहुत यकीन है कि यह इस: fortawesome.github.com/Font-Awesome
स्टुअर्ट बरो

हाँ, क्षमा करें दोस्तों! लिंक अब तय हो गया है! @tsujp वास्तव में, आइकन को छद्म तत्व के अंदर प्रदर्शित किया जाना चाहिए।
स्वेन

कड़ाई से बोलते हुए, आप HTML संस्थाओं को प्रदर्शित नहीं कर सकते :before। आप HTML में संस्थाओं के संदर्भों द्वारा दर्शाया गया यूनिकोड वर्ण प्रदर्शित कर सकते हैं, लेकिन आप HTML इकाई सिंटैक्स का उपयोग नहीं करते हैं।
BoltClock

जवाबों:


120

का बचा हुआ हेक्स संदर्भ है \f066

content: "\f066";

24
हर कोई कृपया सुपर_टन से उत्तर देखें, कि आपको FontAwesome के साथ फ़ॉन्ट-परिवार घोषित करने की आवश्यकता होगी। अन्यथा आपको केवल एक विशेष प्रतीक मिलेगा न कि सही आइकन!
लोरेम बंदर

2
जो कोई PHP में CSS CSS का उपयोग कर रहा है, उसके लिए आपको हेक्स संदर्भ को इस तरह से डबल-एस्केप करना होगा: सामग्री: "\\ f066";
रामजीमेश

2
ध्यान दें कि अगर फ़ॉन्ट 5 का उपयोग कर रहे हैं, तो फ़ॉन्ट परिवार बदल गया है। यहां देखें: stackoverflow.com/a/48004111/83542
Kildareflare

142

CSS में, FontAwesome यूनिकोड केवल तभी काम करता है जब सही फ़ॉन्ट परिवार घोषित किया जाता है (संस्करण 4 या उससे कम):

font-family: "FontAwesome";
content: "\f066";

अद्यतन - संस्करण 5 के अलग-अलग नाम हैं:

नि: शुल्क

font-family: "Font Awesome 5 Free"

समर्थक

font-family: "Font Awesome 5 Pro"

ब्रांड्स

font-family: "Font Awesome 5 Brands"

इस संबंधित उत्तर देखें: https://stackoverflow.com/a/48004111/2575724


8
मुझे पसंद है कि आपने फॉन्ट-फैमिली पार्ट को कैसे जोड़ा क्योंकि यह वह कुंजी है जिसने मेरा काम किया
ajk4550

1
ध्यान दें कि अगर फ़ॉन्ट 5 का उपयोग कर रहे हैं, तो फ़ॉन्ट परिवार बदल गया है। यहां देखें: stackoverflow.com/a/48004111/83542
Kildareflare

1
केवल फ़ॉन्ट-परिवार: FontAwesome ने मेरे लिए काम किया। फ़ॉन्ट-परिवार नहीं: "FontAwesome"
समीरा आर।

हैरानी की बात यह है कि @Sameera ने जो कहा उसके अलावा मेरे लिए कुछ भी काम नहीं किया। पुष्टि कर सकते हैं कि, 10/23/19 तक, केवल फ़ॉन्ट-परिवार: FontAwesome ने मेरे लिए भी काम किया। मैं एफए के तीर आइकन का उपयोग करना चाहता था । यह मेरा कोड था:a:last-child:after { font-family: FontAwesome; content: '\f061'; }
sansae

11

Fileformat.info इस सामान के लिए एक बहुत अच्छा संदर्भ है। आपके मामले में, यह पहले से ही हेक्स में है, इसलिए हेक्स मूल्य है f066। तो आप करेंगे:

content: "\f066";

इस उत्तर के लिए धन्यवाद। मुझे नहीं पता था कि आइकन किसी कारण से हेक्स में थे। इसलिए मैं स्ट्रिंग में '#' डालता रहा और यह काम नहीं करेगा। अब यह काम कर रहा है।
शेल

3

आइकन फॉन्ट ट्रिक्स में उपयोग किए जाने वाले कोड पॉइंट आमतौर पर निजी उपयोग कोड पॉइंट होते हैं, जिसका अर्थ है कि उनका कोई आम तौर पर परिभाषित अर्थ नहीं है और इसका उपयोग खुली सूचना इंटरचेंज में नहीं किया जाना चाहिए, केवल इच्छुक पार्टियों के बीच निजी समझौते द्वारा। हालांकि, निजी उपयोग कोड बिंदुओं को किसी भी अन्य यूनिकोड मान के रूप में दर्शाया जा सकता है, जैसे कि सीएसएस में नोटेशन का उपयोग करके \f066, जैसा कि अन्य ने उत्तर दिया है। आप कोड बिंदु को इस तरह भी दर्ज कर सकते हैं, यदि आपका दस्तावेज़ UTF-8 एन्कोडेड है और आप जानते हैं कि आपके संलेखन वातावरण में इसकी संख्या द्वारा एक मनमाना यूनिकोड मान कैसे लिखें (लेकिन निश्चित रूप से यह अज्ञात के लिए प्रतीक का उपयोग करके प्रदर्शित किया जाएगा। चरित्र)।

हालाँकि, यह आइकन फोंट का उपयोग करने का सामान्य तरीका नहीं है। आम तौर पर आप फ़ॉन्ट के साथ उपलब्ध सीएसएस फ़ाइल का उपयोग करते हैं और जैसे निर्माण का उपयोग करते हैं <span class="icon-resize-small">foo</span>। सीएसएस कोड तब तत्व की शुरुआत में प्रतीक सम्मिलित करने का ध्यान रखेगा, और आपको कोड बिंदु संख्या जानने की आवश्यकता नहीं है।


1

अपनी HTML फ़ाइल में पहले लिंक फॉन्टवेट सीएसएस फ़ाइल पर फिर "फॉन्ट-फैमिली:" फॉन्टएवियस "जैसे छद्म वर्ग से पहले या बाद में बनाएं; सामग्री:" \ f101 ";" तो बचाओ। मुझे उम्मीद है कि यह काम अच्छा होगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.