এলিমেন্টরে কাস্টম আইকন কিভাবে যোগ করবেন: 3টি উপায়

কী টেকঅ্যাওয়ে

• এলিমেন্টরের আইকন লাইব্রেরি পপআপ নিয়মিত, সলিড এবং ব্র্যান্ড সেটে ডিফল্টরূপে শুধুমাত্র ফন্ট অসাধারণ দেখায় এবং একটি আইকন ক্ষেত্র সহ প্রতিটি উইজেট একই পপআপ খোলে।
• Elementor-এ কাস্টম আইকন যোগ করার দ্রুততম উপায় হল আইকন ক্ষেত্রের SVG বোতাম আপলোড করা; ফাইলটি প্রত্যাখ্যান করা হলে, Elementor > সেটিংস > Advanced এর অধীনে আনফিল্টার করা ফাইল আপলোড সক্ষম করুন চালু করুন।
• Elementor Pro এর কাস্টম আইকন স্ক্রীন একটি Fontello, IcoMoon বা Fontastic ।zip ফাইল থেকে একটি সম্পূর্ণ আইকন ফন্ট আমদানি করে এবং আইকন লাইব্রেরি পপআপে মাই লাইব্রেরির অধীনে তালিকাভুক্ত করে।
• Elementor Pro এছাড়াও Font Awesome Pro কে সংযুক্ত করে: Elementor > সেটিংস > ইন্টিগ্রেশনের অধীনে আপনার কিট আইডি পেস্ট করুন এবং পিকারে প্রো শৈলী যোগ করতে ভ্যালিডেট কিট আইডিতে ক্লিক করুন।
• মাস্টার অ্যাডনস আইকন লাইব্রেরি এক্সটেনশন একই পপআপে 5,344 আইকন সহ 8টি আইকন প্যাক যুক্ত করে এবং সেই সেটে ফেদার আইকন, রিমিক্স আইকন এবং টিনিকনগুলির জন্য মাস্টার অ্যাডনস প্রো প্রয়োজন৷।

আপনি Elementor-এ তিনটি উপায়ে কাস্টম আইকন যোগ করতে পারেন: যেকোনো আইকন ক্ষেত্রে একটি SVG আপলোড করুন, Elementor Pro দিয়ে আপনার নিজস্ব আইকন ফন্ট আমদানি করুন, অথবা Master Addons থেকে অতিরিক্ত আইকন প্যাকগুলি চালু করুন৷ তিনটিই একই আইকন লাইব্রেরি পপআপে শেষ হয়, যেটি শুধুমাত্র ফন্ট অসাধারণ অফার করে যতক্ষণ না আপনি এতে কিছু যোগ করেন।

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

Elementor এ কাস্টম আইকন যোগ করার তিনটি উপায়

যে পদ্ধতিটি ফিট করে তা নির্ভর করে আপনার কতগুলি আইকন প্রয়োজন এবং আপনার কাছে সেগুলি ইতিমধ্যে ফাইল হিসাবে আছে কিনা।

• এক বা দুটি আইকনের জন্য, যেমন একটি লোগো চিহ্ন, সরাসরি আইকন ক্ষেত্রে SVG আপলোড করুন (পদ্ধতি 1)।
• আপনার নিজস্ব ব্র্যান্ড সেটের জন্য, এলিমেন্টর প্রো-এর কাস্টম আইকন (পদ্ধতি 2) সহ একটি আইকন ফন্ট হিসাবে এটি আমদানি করুন।
• আপলোড করার মতো কিছুই ছাড়াই তৈরি আইকনগুলির একটি বড় পছন্দের জন্য, মাস্টার অ্যাডঅনগুলিতে আইকন প্যাকগুলি চালু করুন (পদ্ধতি 3)৷।

আপনি একটি পৃষ্ঠায় তিনটি মিশ্রিত করতে পারেন। একটি আপলোড করা SVG, একটি কাস্টম আইকন সেট, ফন্ট অসাধারণ এবং একটি মাস্টার অ্যাডঅন প্যাক সব একই পৃষ্ঠায় বসতে পারে, কারণ প্রতিটি একই আইকন ক্ষেত্রের জন্য অন্য উৎস।

পদ্ধতি 1: এলিমেন্টরের অন্তর্নির্মিত আইকন লাইব্রেরি এবং SVG আপলোড

আইকন ক্ষেত্র সহ প্রতিটি এলিমেন্টর উইজেট একই আইকন লাইব্রেরি পপআপ খোলে, তা আইকন, আইকন বক্স, আইকন তালিকা, বোতাম বা সামাজিক আইকনই হোক না কেন। পপআপ যে বাক্সের বাইরে ফন্ট অসাধারণকে তিনটি সেটে তালিকাভুক্ত করে: নিয়মিত, সলিড এবং ব্র্যান্ড।

1. আপনার পৃষ্ঠায় একটি আইকন উইজেট বা আইকন সহ যেকোনো উইজেট যোগ করুন।
2. বিষয়বস্তু ট্যাবে, আইকন প্রিভিউতে হোভার করুন। দুটি বোতাম প্রদর্শিত হবে: আইকন লাইব্রেরি এবং SVG আপলোড করুন।
3. একটি ফন্ট অসাধারণ আইকন বাছাই করতে আইকন লাইব্রেরিতে ক্লিক করুন, অথবা আপনার নিজের ফাইল ব্যবহার করতে SVG আপলোড করুন৷।

আপলোড SVG হল একটি একক কাস্টম আইকন যোগ করার দ্রুততম উপায়, যেমন একটি ক্লায়েন্টের লোগো চিহ্ন৷ ওয়ার্ডপ্রেস ডিফল্টরূপে SVG আপলোডগুলিকে ব্লক করে, তাই যদি Elementor ফাইলটি প্রত্যাখ্যান করে, তাহলে Elementor > সেটিংস > Advanced এর অধীনে আনফিল্টার করা ফাইল আপলোড সক্ষম করুন চালু করুন৷ শুধুমাত্র তা করুন যদি আপনি প্রত্যেককে বিশ্বাস করেন যারা সাইটে ফাইল আপলোড করতে পারে, যেহেতু একটি SVG কোড বহন করতে পারে।

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

পদ্ধতি 2: Elementor Pro কাস্টম আইকন সহ একটি আইকন সেট আপলোড করুন

Elementor Pro একটি পৃথক ট্যাব হিসাবে পিকারে আপনার নিজস্ব আইকন ফন্ট লোড করতে পারে। এটি থেকে রপ্তানি করা ।zip ফাইল গ্রহণ করে ফন্টেলো, IcoMoon বা Fontastic, যাতে আপনি আপনার ব্র্যান্ডের SVG থেকে একটি সেট তৈরি করতে পারেন এবং এটি এক জায়গায় রাখতে পারেন।

1. Fontello, IcoMoon বা Fontastic-এ আপনার সেট তৈরি করুন এবং এটি একটি ।zip ফাইল হিসেবে ডাউনলোড করুন।
2. ওয়ার্ডপ্রেসে, এলিমেন্টরের কাস্টম আইকন স্ক্রীন খুলুন। Elementor 4 এ Elementor হোম স্ক্রিনে এটির একটি শর্টকাট আছে।
3. নতুন আইকন সেট যোগ করুন ক্লিক করুন, ।zip ফাইলটি ড্রপ করুন, সেটটির নাম দিন এবং এটি প্রকাশ করুন।
4. সম্পাদকে যেকোনো আইকন ক্ষেত্র খুলুন। আপনার সেটটি আইকন লাইব্রেরি পপআপে আমার লাইব্রেরির অধীনে প্রদর্শিত হবে।

এলিমেন্টরের নিজস্ব কাস্টম আইকন গাইড প্রতিটি পরিষেবার জন্য রপ্তানি পদক্ষেপগুলি তালিকাভুক্ত করে, প্রতিটি সেটের প্রয়োজনীয় অনন্য CSS উপসর্গ সহ। এই রুটের ক্যাচটি হল রক্ষণাবেক্ষণ: আপনি প্রথমে সেটটি তৈরি করুন বা কিনুন এবং প্রতিবার এটি পরিবর্তন করার সময় এটি আবার আপলোড করুন।

কানেক্ট ফন্ট অসাধারণ প্রো

Elementor Pro একটি Font Awesome Pro সাবস্ক্রিপশনও সংযুক্ত করে। Elementor > সেটিংস > ইন্টিগ্রেশনে যান, আপনার ফন্ট Awesome Pro Kit ID পেস্ট করুন এবং Validate Kit ID-তে ক্লিক করুন। প্রো পরিবারগুলি তারপরে স্ট্যান্ডার্ড ফন্ট দুর্দান্ত সেটগুলির পাশে পিকারে প্রদর্শিত হয়।

পদ্ধতি 3: মাস্টার অ্যাডঅনগুলির সাথে 8টি আইকন প্যাক যুক্ত করুন

দ্য মাস্টার অ্যাডঅন আইকন লাইব্রেরি এক্সটেনশন আইকন লাইব্রেরি পপআপে আটটি সম্পূর্ণ আইকন প্যাক, মোট 5,344টি আইকন যোগ করে। কিছুই আপলোড করা হয় না: আপনি একটি প্যাক চালু করুন, এবং এর আইকনগুলি সাইটের প্রতিটি আইকন ক্ষেত্রে প্রদর্শিত হয়৷।

সেটআপ তিনটি ধাপ নেয়:

1. মাস্টার অ্যাডঅন > সেটিংস > এক্সটেনশনে যান, আইকন লাইব্রেরি ফিল্টারে ক্লিক করুন, আপনার পছন্দের প্যাকগুলি চালু করুন এবং পরিবর্তনগুলি সংরক্ষণ করুন ক্লিক করুন৷।

2. Elementor-এ যেকোনো আইকন ক্ষেত্র খুলুন এবং আইকন লাইব্রেরিতে ক্লিক করুন। নতুন প্যাকগুলি আমার লাইব্রেরির নীচে বসে, প্রতিটিতে একটি ছোট “ ব্যাজ রয়েছে৷।
3. এটি ব্রাউজ করতে একটি প্যাক ক্লিক করুন, অথবা একবারে প্রতিটি প্যাক অনুসন্ধান করতে নাম অনুসারে ফিল্টার টাইপ করুন। একটি আইকন নির্বাচন করুন এবং সন্নিবেশ ক্লিক করুন।

এলিমেন্টরের নিজস্ব আইকন ফন্ট (eicons) ডিফল্ট পিকারে নেই। মাস্টার অ্যাডনস একটি ট্যাব হিসাবে সমস্ত 398 ইকন যোগ করে, যা আপনি যখন এলিমেন্টর ইন্টারফেসের সাথে মেলে এমন আইকন চান তখন সাহায্য করে। ফেদার আইকন, রিমিক্স আইকন এবং Teenyicons এর সাথে আসে মাস্টার অ্যাডনস প্রো.

খোলা এবং বন্ধ অবস্থার জন্য রিমিক্স আইকন ব্যবহার করুন

বেশিরভাগ রিমিক্স আইকন আকার একটি লাইন সংস্করণ এবং একটি পূরণ সংস্করণে আসে। এটি দুটি আইকন অবস্থা সহ উইজেটগুলির জন্য একটি ভাল মিল করে তোলে: মধ্যে উন্নত অ্যাকর্ডিয়ন উইজেট, অথবা Elementor এর নিজস্ব Accordion এবং Toggle, আউটলাইনটিকে বন্ধ আইকন হিসাবে এবং ভরা আকৃতিটিকে খোলা আইকন হিসাবে সেট করুন।

সেটআপের বিশদ বিবরণ, প্রতিটি প্যাকের জন্য CSS ক্লাস উপসর্গ এবং সাধারণ সমস্যার সমাধান রয়েছে আইকন লাইব্রেরি সেটিংস ডক্স.

আপনি কোন পদ্ধতি ব্যবহার করা উচিত?

সঠিক পদ্ধতি আপনার ইতিমধ্যে কি আছে তার উপর নির্ভর করে।

শেষ সারিটি এমন লোকদের জন্য যারা তাদের নিজস্ব উইজেট তৈরি করে। দ্য উইজেট বিল্ডারে আইকন নিয়ন্ত্রণ একই পপআপ খোলে, তাই কাস্টম উইজেটগুলি আপনার চালু করা প্রতিটি প্যাক ব্যবহার করতে পারে৷।

এলিমেন্টরে আইকন স্টাইল কিভাবে করবেন

এই সমস্ত উত্স থেকে আইকন উইজেটের স্বাভাবিক শৈলী নিয়ন্ত্রণ ব্যবহার করে। স্টাইল ট্যাব খুলুন, আইকন বিভাগটি প্রসারিত করুন এবং প্রাথমিক রঙ, আকার এবং ঘূর্ণন সেট করুন। যখন একজন দর্শক আইকনে নির্দেশ করে তখন রঙ পরিবর্তন করতে হোভার ট্যাবে স্যুইচ করুন।

ফন্ট আইকন আপনি সেট করা যাই হোক না কেন রঙ নিতে। এটি ফন্ট অসাধারণ, কাস্টম আইকন সেট এবং মাস্টার অ্যাডঅন প্যাকগুলিকে কভার করে। একটি আপলোড করা SVG শুধুমাত্র রঙ পরিবর্তন করে যদি এর পাথগুলি তাদের নিজস্ব একটি নির্দিষ্ট ফিল বহন না করে, তাই আপনি এটি আপলোড করার আগে ফাইল থেকে হার্ড-কোডেড ফিল মানগুলি ছিনিয়ে নিন।

একই নিয়ন্ত্রণ অন্যান্য আইকন উইজেটগুলিতেও দেখা যায়। দ্য তথ্য বক্স উইজেট একটি শিরোনাম এবং পাঠ্যের সাথে একটি আইকন যুক্ত করুন এবং আমাদের গাইড এলিমেন্টরে অ্যানিমেটেড বোতাম একটি বোতামের ভিতরে একটি আইকন কীভাবে স্থাপন করবেন এবং এটির নিজস্ব হোভার রঙ দেবেন তা দেখায়।

এলিমেন্টর আইকন সমস্যা সমাধান

বেশিরভাগ আইকন সমস্যা একটি ফন্ট ফাইলে নেমে আসে যা লোড হচ্ছে না বা একটি সেটিং যা সংরক্ষণ করা হয়নি।

আইকনগুলি খালি স্কোয়ার হিসাবে দেখায়

আইকন ফন্ট লোড হচ্ছে না। Elementor > Tools > General (ফাইল ও ডেটা সাফ করুন) এর অধীনে Elementor এর ক্যাশে সাফ করুন, তারপর আপনার ক্যাশিং প্লাগইন এবং CDN সাফ করুন। যদি আপনার ফন্টগুলি অন্য ডোমেনে একটি CDN থেকে লোড হয়, তাহলে পরীক্ষা করুন যে এটি ফন্ট ফাইলগুলির জন্য ক্রস-অরিজিন অনুরোধের অনুমতি দেয়৷।

Elementor আমার SVG গ্রহণ করবে না

এলিমেন্টর > সেটিংস > অ্যাডভান্সডের অধীনে আনফিল্টার করা ফাইল আপলোড সক্ষম করুন চালু করুন, তারপর আবার আপলোড করার চেষ্টা করুন। যদি এটি এখনও ব্যর্থ হয়, একটি পাঠ্য সম্পাদকে SVG খুলুন এবং পরীক্ষা করুন যে এটি একটি বাস্তব SVG ফাইল এবং একটি ।svg এক্সটেনশন সহ একটি PNG নয়৷।

পিকার থেকে একটি মাস্টার অ্যাডঅন প্যাক অনুপস্থিত

মাস্টার অ্যাডনস > সেটিংস > এক্সটেনশন > আইকন লাইব্রেরির অধীনে প্যাকের সুইচটি চালু আছে কিনা তা পরীক্ষা করুন এবং আপনি পরিবর্তনগুলি সংরক্ষণ করুন ক্লিক করেছেন, তারপর সম্পাদকটি পুনরায় লোড করুন৷ ফেদার আইকন, রিমিক্স আইকন এবং Teenyicons-এরও একটি সক্রিয় লাইসেন্স সহ Master Addons Pro প্রয়োজন।

আইকন ফন্ট পৃষ্ঠা ধীর করে দেয়

প্রতিটি আইকন ফন্ট ব্রাউজার ডাউনলোড করার জন্য আরও একটি ফাইল। একটি সামঞ্জস্যপূর্ণ চেহারা জন্য এক বা দুটি প্যাক আটকে, এবং আমাদের গাইড পড়ুন এলিমেন্টর ওয়েবসাইটগুলিকে দ্রুততর করা, যা ফন্ট ফাইলের পরিবর্তে SVG হিসাবে আইকন রেন্ডার করার জন্য Elementor এর ইনলাইন ফন্ট আইকন বিকল্পকে কভার করে।

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

চূড়ান্ত চিন্তা

Elementor-এ কাস্টম আইকন যোগ করা আপনার আইকনগুলি যেখানে শুরু হয় সেখানে নেমে আসে। একটি একক SVG সরাসরি আইকন ক্ষেত্রে যায়। একটি ব্র্যান্ড আইকন ফন্ট Elementor Pro এর কাস্টম আইকনগুলির মাধ্যমে প্রবেশ করে, আপনার যদি একটি কিট থাকে তবে Font Awesome Pro এর পাশে। এবং আপনি যদি আপলোড করার পরিবর্তে বেছে নেন, আটটি মাস্টার অ্যাডঅন প্যাক একই পপআপে আরও 5,344 আইকন রাখে।

আপনি কিছু চালু করার আগে নমুনা এবং আইকন গণনা সহ প্রতিটি প্যাক দেখতে, ব্রাউজ করুন এলিমেন্টর আইকন লাইব্রেরি পৃষ্ঠা।

সম্পর্কিত পড়া

• আইকন লাইব্রেরি সেটিংস: সুইচ, CSS উপসর্গ এবং সমস্ত আটটি প্যাকের জন্য সমস্যা সমাধান
• উইজেট বিল্ডারে আইকন নিয়ন্ত্রণ: আপনার নিজস্ব কাস্টম উইজেটগুলিতে প্যাকগুলি ব্যবহার করুন৷
• একটি পরিচিতি ফর্ম 7 জমা বোতামে কীভাবে একটি ফন্ট দুর্দান্ত আইকন যুক্ত করবেন
• সমস্ত মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন