द प्रतीक क्षेत्र आपके विजेट के पैनल में एलिमेंट के पूर्ण आइकन लाइब्रेरी पिकर डालता है: फ़ॉन्ट बहुत बढ़िया, साइट पर पंजीकृत कोई भी कस्टम आइकन लाइब्रेरी, और सीधे एसवीजी अपलोड, आइकन चयनकर्ता संपादकों के पीछे सभी पहले से ही जानते हैं मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह फीचर बुलेट, सूचना बॉक्स, सामाजिक पंक्तियों और हर दूसरे स्थान के लिए क्षेत्र है जहां एक छोटा प्रतीक अर्थ रखता है।
प्रत्येक विजेट बिल्डर फ़ील्ड की तरह, आइकन नियंत्रण समर्थन करता है शर्तों, पिकर को केवल तभी दिखाने के लिए उपयोगी है जब एक “enable आइकन” टॉगल चालू हो, और इसका आउटपुट इसके माध्यम से प्रस्तुत होता है ट्विग-सिंटैक्स टेम्पलेट इंजन। दोनों गाइड विवरण और सीमाओं को कवर करते हैं।
मान दो कुंजी के साथ एक सरणी है। [+] value और library। उस आकृति का परिणाम सामने बताने लायक है: फ़ील्ड को सीधे प्रिंट करना {{ my_icon }} आउटपुट कुछ भी नहीं फ़ॉन्ट आइकन और अपलोड किए गए एसवीजी भी अलग-अलग मार्कअप के माध्यम से प्रस्तुत करते हैं, इसलिए टेम्पलेट को एक छोटी शाखा की आवश्यकता होती है दोनों पैटर्न नीचे हैं, पेस्ट करने के लिए तैयार हैं।
आइकॉन्स फ़ील्ड क्या करता है #
- एलिमेंट के आइकन लाइब्रेरी पिकर को खोलता है फ़ॉन्ट विस्मयकारी, कस्टम लाइब्रेरी और एसवीजी अपलोड के साथ।
- पिक को एक सरणी के रूप में संग्रहीत करता है का
valueऔरlibrary. - फ़ॉन्ट आइकन के लिए एक क्लास स्ट्रिंग रखता है:
valueक्या आइकन की कक्षा, एक के लिए तैयार है<i>टैग। - एसवीजी के लिए नेस्टेड फ़ाइल सरणी रखता है:
valueएक यूआरएल बन जाता है और आईडी जोड़ी इस प्रकार पहुंच जाती है{{ my_icon.value.url }}. - एक डिफ़ॉल्ट और एक अनुशंसित सूची स्वीकार करता है, इसलिए पिकर विजेट के अनुरूप आइकन को सतह पर ला सकता है।
यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक सुविधा सूची विजेट है जहां प्रत्येक उदाहरण एक आइकन दिखाता है, जिसका नाम है
feature_icon, एक छोटे टेक्स्ट ब्लर्ब के बगल में।
एक प्रतीक क्षेत्र कैसे जोड़ें #
को खोजें प्रतीक विजेट बिल्डर संपादक के बाईं ओर पैनल में फ़ील्ड, अन्य मीडिया फ़ील्ड के साथ समूहीकृत।
इसे नीचे एक अनुभाग में खींचें सामग्री टैब एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुले।
प्रतीक फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबलः एलिमेंटर में पिकर के ऊपर दिखाया गया पाठ, उदाहरण के लिए “फीचर आइकोन”।
- नाम: उदाहरण के लिए, केवल फ़ील्ड, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता
feature_icon. - डिफ़ॉल्टः एक के रूप में एक प्रारंभिक आइकन
valueऔरlibraryजोड़ी, इसलिए विजेट कभी भी आइकनलेस में नहीं गिरता है। - अनुशंसित: पिकर सतहों पर आइकन का एक सेट, संपादकों को उन विकल्पों की ओर ले जाता है जो डिज़ाइन में फिट होते हैं।
- विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।
आइकॉन्स फ़ील्ड को अपने टेम्पलेट से कनेक्ट करें #
सबसे पहले, गलती लगभग हर कोई एक बार करता हैः {{ feature_icon }} कुछ भी प्रिंट नहीं करता. सरणी मानों पर डायरेक्ट-प्रिंट शॉर्टकट केवल शीर्ष-स्तर आउटपुट करता है url कुंजी, और प्रतीक सरणी में कोई नहीं है, इसलिए टोकन खाली निकलता है कोई त्रुटि नहीं, कोई चेतावनी नहीं, बस एक खाली स्थान जहां आइकन होना चाहिए गुण हैं जहां सामग्री रहती है।
फ़ॉन्ट आइकन (फ़ॉन्ट विस्मयकारी और अन्य वर्ग-आधारित पुस्तकालय): value वर्ग स्ट्रिंग रखता है, इसलिए एक <i> टैग इसे प्रस्तुत करता हैः
<i class="{{ feature_icon.value }}" aria-hidden="true"></i>एसवीजी अपलोड किया गयाः जब एसवीजी लाइब्रेरी से पिक आती है, तो value स्वयं एक यूआरएल और आईडी के साथ एक सरणी है, इसलिए आइकन एक छवि के रूप में प्रस्तुत करता हैः
<img src="{{ feature_icon.value.url }}" alt="">एक विजेट शायद ही पहले से जानता हो कि संपादक किस प्रकार का चयन करेगा, इसलिए विश्वसनीय पैटर्न शाखाएँ library कुंजी और हैंडल दोनोंः
{% if feature_icon.library == 'svg' %}
<img src="{{ feature_icon.value.url }}" alt="">
{% else %}
<i class="{{ feature_icon.value }}"></i>
{% endif %}किसी भी मीडिया-प्रकार के फ़ील्ड की तरह, पूरी चीज़ को एक खाली-राज्य गार्ड में लपेटें, ताकि एक अनसेट आइकन कोई भटका न छोड़े <i class=""> पीछे:
{% if feature_icon.value %}
...the branch above...
{% endif %}केवल फ़ॉन्ट आइकन के साथ परीक्षण के लिए देखें। द <i>-टैग संस्करण पूरे सप्ताह काम करता है, फिर एक क्लाइंट एक ब्रांड एसवीजी अपलोड करता है और आइकन गायब हो जाता है, क्योंकि एक वर्ग विशेषता फ़ाइल सरणी को पकड़ नहीं सकती है यदि आप फ़ील्ड भेजते हैं, तो शाखा को शिप करें।
एलिमेंट में आइकन नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, संपादक को फिर से लोड करना यदि पृष्ठ पहले से ही खुला था फ़ील्ड आपके लेबल के तहत एलिमेंटर के आइकन चयनकर्ता के रूप में प्रस्तुत करता है, वर्तमान आइकन दिखाता है।
इसे क्लिक करें और आइकन लाइब्रेरी खुलती है खोज फ़ॉन्ट बहुत बढ़िया, किसी भी कस्टम लाइब्रेरी ब्राउज़ करें, या एसवीजी के लिए अपलोड टैब पर स्विच करें पिक और पूर्वावलोकन अपडेट की पुष्टि करें, जो भी शाखा आपके टेम्पलेट से मेल खाती है, लाइब्रेरी से मेल खाती है।
सामान्य उपयोग के मामले #
- फ़ीचर और लाभ सूचियाँ प्रति बिंदु एक प्रतीक के साथ।
- जानकारी और आइकन बॉक्स जहां आइकन कार्ड के विषय को एंकर करता है।
- सामाजिक लिंक पंक्तियाँ, प्रत्येक उदाहरण एक आइकन को URL फ़ील्ड के साथ जोड़ता है।
- बटन और कार्रवाई के लिए कॉल इसमें एक छोटा सा अग्रणी आइकन है।
- चरण और प्रक्रिया विजेट जहां क्रमांकित चरणों में से प्रत्येक को एक मिलान प्रतीक मिलता है।
आइकॉन्स क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- कभी भी फ़ील्ड को नंगे प्रिंट न करें।
{{ feature_icon }}कुछ भी आउटपुट नहीं देता; आइकन रहता है{{ feature_icon.value }}और, एसवीजी के लिए,{{ feature_icon.value.url }}. - पुस्तकालय शाखा जहाज। द
{% if feature_icon.library == 'svg' %}पैटर्न एकमात्र संस्करण है जो एक संपादक द्वारा की जा सकने वाली प्रत्येक पसंद से बचता है। - खाली राज्य की रक्षा करें।
{% if feature_icon.value %}खाली टैग रेंडर करने से अनसेट आइकन रखता है। - जोड़ना
aria-hidden="true"सजावटी फ़ॉन्ट आइकन के लिए। स्क्रीन रीडर प्रतीक को छोड़ देते हैं और इसके बजाय उसके बगल में पाठ पढ़ते हैं। - चयन का मार्गदर्शन करने के लिए अनुशंसित का उपयोग करें। क्यूरेटेड सेट की सतह विजेट के आइकन को साइट पर दृष्टिगत रूप से सुसंगत रखती है।
- आपके सीएसएस टैब में आकार एसवीजी। अपलोड किए गए एसवीजी छवियों के रूप में आते हैं, इसलिए दोनों शाखाओं को एक ही पैमाने पर प्रस्तुत करने के लिए आईएमजी शाखा को चौड़ाई दें।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में आइकन फ़ील्ड क्या है?
आइकॉन्स फ़ील्ड एलिमेंट के आइकन लाइब्रेरी पिकर, फ़ॉन्ट विस्मयकारी, कस्टम लाइब्रेरी और एसवीजी अपलोड को एक कस्टम विजेट में जोड़ता है। पिक को एक सरणी के रूप में संग्रहीत किया जाता है value और library, जिसे आपका टेम्पलेट एक के रूप में प्रस्तुत करता है <i> फ़ॉन्ट आइकन या ए के लिए टैग <img> एसवीजी के लिए टैग।
{{my_icon }} कुछ भी प्रिंट क्यों नहीं करता?
डायरेक्ट-प्रिंट शॉर्टकट केवल किसी सरणी के शीर्ष-स्तर को आउटपुट करता है url कुंजी, और प्रतीक मूल्य में कोई नहीं है, इसलिए टोकन खाली प्रस्तुत करता है इसके बजाय गुणों का उपयोग करेंः {{ my_icon.value }} एक फ़ॉन्ट आइकन वर्ग के लिए, {{ my_icon.value.url }} अपलोड किए गए एसवीजी के लिए।
मैं फ़ॉन्ट विस्मयकारी आइकन कैसे प्रस्तुत करूं?
एक के साथ <i> फ़ील्ड से कक्षा ले जाने वाला टैगः <i class="{{ my_icon.value }}" aria-hidden="true"></i>. द value कुंजी कक्षा-आधारित पुस्तकालयों के लिए संपूर्ण कक्षा स्ट्रिंग रखती है।
मैं अपलोड किए गए एसवीजी आइकन को कैसे प्रस्तुत करूं?
एक छवि के रूप में। एसवीजी के लिए चुनता है, value फ़ाइल के यूआरएल और आईडी के साथ एक नेस्टेड सरणी है, इसलिए मार्कअप है <img src="{{ my_icon.value.url }}" alt="">। एक वर्ग विशेषता इसे प्रस्तुत नहीं कर सकती।
मैं एक विजेट में फ़ॉन्ट आइकन और एसवीजी दोनों का समर्थन कैसे करूं?
पुस्तकालय पर शाखाः {% if my_icon.library == 'svg' %} आईएमजी टैग प्रस्तुत करता है, {% else %} मैं टैग करता हूं संपादक तब लाइब्रेरी के किसी भी टैब से चुन सकते हैं और विजेट किसी भी तरह से सही मार्कअप प्रस्तुत करता है।
क्या मैं एक आइकन का पूर्व-चयन कर सकता हूं या एक सेट का सुझाव दे सकता हूं?
हाँ। डिफ़ॉल्ट विकल्प एक शुरुआत निर्धारित करता है value और library जोड़ी, और अनुशंसित विकल्प चयन को ब्रांड पर बनाए रखने के लिए पिकर के शीर्ष पर एक चुने हुए सेट को सामने लाता है।
लपेटकर #
विजेट बिल्डर आइकन फ़ील्ड एक छोटी शाखा की कीमत के लिए पूरे एलिमेंटर आइकन लाइब्रेरी को एक कस्टम विजेट में लाता हैः value फ़ॉन्ट आइकन के लिए एक वर्ग के रूप में, value.url एसवीजी के लिए एक फ़ाइल के रूप में, और दोनों के चारों ओर एक गार्ड। इसके साथ जोड़ें मीडिया क्षेत्र जब एक स्लॉट एक प्रतीक के बजाय एक पूर्ण छवि के लिए कहता है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
