আইকন

আইকন ক্ষেত্রটি মাস্টার অ্যাডঅনগুলির সাথে নির্মিত একটি কাস্টম উইজেটে এলিমেন্টরের আইকন পিকার যুক্ত করে৷ উইজেট নির্মাতা। সম্পাদকরা আইকন লাইব্রেরি থেকে একটি আইকন বেছে নেয় বা তাদের নিজস্ব SVG আপলোড করে এবং আপনার টেমপ্লেট এটি প্রিন্ট করে। বৈশিষ্ট্য তালিকা, তথ্য বাক্স, বোতাম, সামাজিক লিঙ্ক এবং অন্য কোথাও একটি ছোট প্রতীক সাহায্য করার জন্য এটি ব্যবহার করুন।

আইকন একটি প্রো ক্ষেত্র। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে৷ মাস্টার অ্যাডনস প্রো.

আইকন ক্ষেত্র কি করে #

• এটি এলিমেন্টরে আপনার উইজেটের প্যানেলে একটি আইকন বক্স যোগ করে, আইকন লাইব্রেরির জন্য বোতাম এবং একটি SVG আপলোড করার জন্য।
• আইকন লাইব্রেরিতে রয়েছে ফন্ট অসাধারন এবং অতিরিক্ত আইকন সেট যা মাস্টার অ্যাডঅনগুলির সাথে আসে, যেমন এলিমেন্টর আইকন, সিম্পল লাইন আইকন, লিনিয়ার আইকন এবং মেটেরিয়াল আইকন।
• ক্ষেত্র দুটি জিনিস সঞ্চয় করে: value (আইকনের CSS ক্লাস, বা আপলোডের জন্য SVG ফাইল) এবং library (যা সেট থেকে এসেছে)।
• আপনার টেমপ্লেট একটি প্রিন্ট <i> লাইব্রেরি আইকন এবং একটি জন্য ট্যাগ <img> আপলোড করা SVG-এর জন্য ট্যাগ করুন।

আপনি যদি এখনও একটি উইজেট তৈরি না করে থাকেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথম।

আপনি শুরু করার আগে #

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “eature List” উইজেট: একটি আইকন ক্ষেত্র যার নাম feature_icon এবং শিরোনামের জন্য একটি পাঠ্য ক্ষেত্র।

কিভাবে একটি আইকন ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. উপর বিষয়বস্তু ট্যাব, একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “feature”।
3. টাইপ করা icons বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন আইকন বিভাগে। এর সেটিংস বাম সাইডবারে খোলে।

আইকন ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

• লেবেল এলিমেন্টরের আইকন বক্সের উপরের লেখাটি, উদাহরণস্বরূপ “Feature Icon”।
• নাম ক্ষেত্রের অনন্য আইডি এবং এর টোকেন শুরু, তাই feature_icon দেয় {{ feature_icon.value }}. অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা elementor এ নিয়ন্ত্রণে উপস্থিত হয়।
• চামড়া ইনলাইন এবং মিডিয়া অফার করে। এটি পরিবর্তন করে কিভাবে নির্মাতার নিজস্ব পূর্বরূপ ক্ষেত্রটি আঁকে। আমাদের পরীক্ষায় Elementor বড় আইকন বক্সটি যেকোন উপায়ে দেখিয়েছে।
• ডিফল্ট মান আইকনটি কি উইজেটের একটি নতুন কপি দিয়ে শুরু হয়। ক্লিক করুন আইকন পরিবর্তন করুন একটি বাছাই করতে, বা এটি পরিষ্কার করতে ছোট ক্রস। কোনো ডিফল্ট সেট ছাড়াই, ক্ষেত্রটি Elementor লোগো আইকন দিয়ে শুরু হয়।

আইকন পরিবর্তন করুন মাস্টার অ্যাডঅন আইকন পিকার খোলে। বাম দিকে একটি সেট বাছুন, নাম দ্বারা অনুসন্ধান করুন, একটি আইকনে ক্লিক করুন এবং তারপরে ঢোকান.

আপনার টেমপ্লেটে আইকনটি প্রিন্ট করুন #

{{ feature_icon }} তার নিজস্ব প্রিন্টে কিছুই নেই, কারণ ক্ষেত্রের দুটি মান রয়েছে। পরিবর্তে এর অংশগুলি ব্যবহার করুন:

• {{ feature_icon.value }} একটি লাইব্রেরি আইকনের জন্য আইকন ক্লাস, যেমন eicon eicon-check। একটি আপলোড করা SVG-এর জন্য এটি ফাইলের URL প্রিন্ট করে।
• {{ feature_icon.library }} সেট নাম, যেমন eicons, simple-line-icons বা svg একটি আপলোড জন্য।
• {{ feature_icon.value.url }} লাইব্রেরি হলে SVG এর URL হয় svg.

সম্পাদকরা যেকোনো ধরনের বাছাই করতে পারেন, তাই লাইব্রেরি চেক করুন এবং সঠিক ট্যাগ প্রিন্ট করুন। একটি খালি মানের জন্য এটি একটি চেক এ মোড়ানো যাতে আইকনটি সরানো হলে কিছুই প্রিন্ট না হয়:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

লাইব্রেরি আইকন ফন্ট গ্লিফ, তাই তারা নিতে color এবং font-size তাদের চারপাশের উপাদানের। একটি আপলোড SVG একটি <img> ট্যাগ তার নিজস্ব রং রাখে, তাই এটি দিয়ে আকার width এবং height CSS ট্যাবে।

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

Elementor এ আইকন নিয়ন্ত্রণ ব্যবহার করুন #

একটি পৃষ্ঠায় উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। আইকন বক্স বর্তমান আইকন দেখায়। দেখতে এটি উপর ঘোরান আইকন লাইব্রেরি এবং SVG আপলোড করুন, এবং আইকন সরাতে একটি ট্র্যাশ আইকন।

আইকন লাইব্রেরি এলিমেন্টরের আইকন উইন্ডো খোলে। বাম দিকে একটি সেট চয়ন করুন, নাম অনুসারে ফিল্টার করুন, একটি আইকনে ক্লিক করুন এবং ক্লিক করুন ঢোকান. SVG আপলোড করুন মিডিয়া লাইব্রেরি খোলে যাতে আপনি একটি SVG ফাইল আপলোড বা বাছাই করতে পারেন। Elementor আপনাকে প্রথমবার SVG আপলোড করার অনুমতি দিতে বলতে পারে।

ফন্ট অসাধারণ আইকন এবং ইনলাইন ফন্ট আইকন #

আমাদের পরীক্ষার সাইটে, এলিমেন্টর আইকন, সিম্পল লাইন আইকন এবং আপলোড করা SVG সবই প্রকাশিত পৃষ্ঠায় দেখানো হয়েছে, কিন্তু একটি ফন্ট অসাধারণ আইকন তা করেনি। এলিমেন্টরের ইনলাইন ফন্ট আইকন বৈশিষ্ট্যটি ডিফল্টরূপে চালু থাকে এবং এটি ফন্টের দুর্দান্ত স্টাইলশীট লোড হওয়া বন্ধ করে, তাই <i> উইজেট থেকে ট্যাগ ফাঁকা থাকে। যাও এলিমেন্টর > সেটিংস > বৈশিষ্ট্য, ইনলাইন ফন্ট আইকন সেট করুন নিষ্ক্রিয় এবং সংরক্ষণ করুন। ফন্ট অসাধারণ আইকন তারপর হাজির। আপনি যদি সেই বৈশিষ্ট্যটি চালু রাখতে চান তবে অন্যান্য আইকন সেট বা একটি SVG আপলোড ব্যবহার করুন৷।

সাধারণ ব্যবহারের ক্ষেত্রে #

• প্রতিটি শিরোনামের পাশে একটি আইকন সহ বৈশিষ্ট্য তালিকা এবং তথ্য বাক্স।
• একটি অগ্রণী বা পিছনের আইকন সহ বোতাম।
• সামাজিক লিঙ্ক, যোগাযোগের বিবরণ এবং তালিকা বুলেট।
• SVG হিসাবে লোগো আপলোড করে ব্র্যান্ড চিহ্ন।

আইকন ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা টেমপ্লেটে উভয় ক্ষেত্রেই পরিচালনা করুন: <i> লাইব্রেরি আইকন জন্য এবং <img> SVG আপলোডের জন্য।
• সঙ্গে গার্ড {% if feature_icon.value %} তাই একটি খালি আইকন একটি খালি মোড়ক পিছনে ছেড়ে না।
• উইজেটের জন্য উপযুক্ত একটি ডিফল্ট মান সেট করুন, তাই এটি দুর্ঘটনাক্রমে এলিমেন্টর লোগো দেখায় না।
• র্যাপার স্টাইল করুন, আইকন ট্যাগ নয়, তাই উভয় আইকনের ধরন একই বাক্সে বসে।
• আপনি এটির উপর নির্ভর করার আগে লাইভ পৃষ্ঠায় একটি ফন্ট দুর্দান্ত বাছাই দেখুন (উপরের বিভাগটি দেখুন)।
• আইকনগুলির পরিবর্তে চিত্রগুলির জন্য, ব্যবহার করুন৷ মিডিয়া ক্ষেত্র.

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

আইকন ক্ষেত্র যোগ করুন, একটি ডিফল্ট আইকন সেট করুন এবং লাইব্রেরি আইকন এবং SVG আপলোড উভয়ই পরিচালনা করে এমন একটি টেমপ্লেট দিয়ে এটি মুদ্রণ করুন। প্রকাশিত পৃষ্ঠায় ফন্ট অসাধারন পিকগুলি পরীক্ষা করুন এবং ইনলাইন ফন্ট আইকনগুলি ফাঁকা থাকলে তা বন্ধ করুন৷ অন্যান্য বিষয়বস্তু ট্যাব ক্ষেত্রের জন্য, দেখুন URL এবং বেছে নিন ক্ষেত্র, এবং চেক মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।