ফন্ট অসাম হল একটি ব্যাপক ব্যবহৃত আইকন সেট যা আপনাকে স্কেলযোগ্য ভেক্টর চিত্র দেয় যা CSS দিয়ে কাস্টমাইজ করা যায়। ফ্রি সেটে ১,৬০০ এরও বেশি আইকন রয়েছে, তাই আপনার প্রয়োজনীয় আইকন খুঁজে পাওয়া উচিত।
এডভান্সড ফিচার ফন্ট অসাম ব্যবহার করা একটি উন্নত ফিচার এবং এটি আপনার সাইটে একটি স্ক্রিপ্ট ট্যাগ যোগ করতে এবং আইকন যোগ করতে কিছু সহজ কোড সম্পাদনা করার জন্য সক্ষম হতে হবে।
ফন্ট অসাম কিট কোড আপনার সাইটে যুক্ত করা আপনার নিজের ফন্ট অসাম কিট তৈরি করতে হবে। নিচে নির্দেশনা দেখুন।
ফন্ট অসাম ব্যবহার করতে হলে, আপনাকে আপনার সাইটে কোড যোগ করতে হবে। এটি <head> সেকশনে যোগ করতে হবে। সাধারণত এর জন্য সাইটের প্রশাসক হতে হবে।
ডিভি থিম যদি আপনি ডিভি থিম ব্যবহার করেন, তবে থিমে কিট কোড যোগ করার সুবিধা অন্তর্ভুক্ত রয়েছে।
- ডিভি > থিম অপশন যান
- ডিভি থিম অপশনে ইন্টিগ্রেশন ট্যাবে ক্লিক করুন
- ব্লগের <head> অংশে কোডটি পেস্ট করুন।
- সেভ চেঞ্জেস ক্লিক করুন।
এখন আপনি আপনার সাইটে ফন্ট অসাম আইকন ব্যবহার করতে পারবেন।
নন-ডিভি থিম যদি আপনি ডিভি থিম ব্যবহার না করেন, তাহলে চিন্তার কোন কারণ নেই, আপনি এখনও কোডটি <head> সেকশনে যোগ করতে পারেন। প্রথমে আপনাকে অ্যাডভান্সড সেটিংস প্লাগইন সক্ষম করতে হবে।
- প্লাগইনস > অল যান
- অ্যাডভান্সড সেটিংস খুঁজে বের করে অ্যাক্টিভেট বাটনে ক্লিক করুন।
- অ্যাডভান্সড সেটিংস প্লাগইন সক্ষম হলে, সেটিংসে যান > অ্যাডভান্সড সেটিংস
- অ্যাডিশনাল কোডে গিয়ে আপনার কিট কোডটি হেডার ট্যাগ (লো প্রায়োরিটি) ফিল্ডে পেস্ট করুন।
- সেভ চেঞ্জেস ক্লিক করুন।
কিভাবে আপনার সাইটে ফন্ট অসাম আইকন যুক্ত করবেন প্রথম পদক্ষেপ হল পারফেক্ট আইকন খুঁজে পাওয়া। ফন্ট অসামের ওয়েবসাইটে যান এবং তাদের ফ্রি এবং প্রো আইকনগুলো দেখতে আইকন মেনুতে ক্লিক করুন।
সঠিক আইকন খোঁজা
- সার্চ ফিল্ডে একটি সার্চ টার্ম টাইপ করুন। আপনি ফ্রি আইকনগুলোর জন্য ফিল্টার ব্যবহার করতে পারেন যাতে আপনি শুধুমাত্র পেইড লাইসেন্স ছাড়া আইকনগুলো দেখতে পান।
- উদাহরণস্বরূপ, যদি আপনি একটি অ্যালার্ট আইকন খুঁজছেন, "অ্যালার্ট" টাইপ করুন। আপনি সেই বর্ণনায় উপযুক্ত একটি আইকন সেট দেখতে পাবেন। আপনার প্রয়োজনের জন্য সবচেয়ে ভাল আইকনটি খুঁজে বের করুন।
- বিকল্পভাবে, আপনি ১,৬০০ এর বেশি ফ্রি আইকন স্ক্রোল করে দেখতে পারেন।
- যখন আপনি একটি আইকন খুঁজে পাবেন, ক্লিক করে তার বিস্তারিত দেখুন এবং সাইটে আইকনটি ব্যবহার করার জন্য HTML কোডটি কপি করুন।
- HTML কোডটি <i class= দিয়ে শুরু হবে।
আইকন কোড ব্যবহার করা এখন আপনি পারফেক্ট আইকনটি খুঁজে পেয়েছেন, এটি আপনার সাইটে যোগ করার সময়।
ব্লক এডিটর যদি আপনি ব্লক এডিটর ব্যবহার করেন, তবে আমরা কাস্টম HTML ব্লক ব্যবহারের পরামর্শ দিই। কিছু ব্লক HTML হিসেবে সম্পাদনা করা সম্ভব হলেও, সবসময় এটি মসৃণভাবে কাজ করে না। HTML ব্লক ব্যবহার করা সবথেকে ভাল।
- একটি নতুন কাস্টম HTML ব্লক যোগ করুন
- আইকন প্রদর্শন করার জন্য ফন্ট অসাম কোড যোগ করুন এবং যে কোনও অতিরিক্ত সামগ্রী যুক্ত করুন। আপনাকে কিছু বেসিক HTML যেমন প্যারাগ্রাফ ট্যাগ, হেডার ট্যাগ ইত্যাদি যোগ করতে হবে।
- আইকনটি আপনার লেখার আকারের সমান হবে। আপনি যদি আকার পরিবর্তন করতে চান, তবে CSS ক্লাস ব্যবহার করে এটিকে বড় বা ছোট করতে পারেন। ফন্ট অসামের একটি চমৎকার পাতা রয়েছে যা এই ক্লাসগুলি ব্যবহার করার এবং কোড কোথায় রাখতে হবে তা ব্যাখ্যা করে।
- আপনি এডিটিংয়ের সময় আইকনটি ব্লকে দেখতে পাবেন না, তবে আপনি পেজ প্রিভিউ করে আইকনটি প্রদর্শিত হবে। যদি আইকনটি না দেখা যায়, নিশ্চিত করুন যে আপনি আপনার ওয়েবসাইটে ফন্ট অসাম কিট যোগ করেছেন। আইকনগুলো সরাসরি ফন্ট অসামের ওয়েবসাইট থেকে টানা হয়।
এএক্সএমপ্ল HTML কোড
এটি উপরের কোডের আউটপুট।
ডিভিতে ফন্ট অসাম ব্যবহার যদি আপনি ডিভি থিম এবং/অথবা পেজ বিল্ডার ব্যবহার করেন, তবে আপনি ফন্ট অসাম আইকনও ব্যবহার করতে পারেন। কিছু ক্ষেত্রে এটি সহজ কারণ আপনি এডিটিংয়ের সময় আইকনটি প্রদর্শিত দেখতে পাবেন। পরিবর্তন দেখার জন্য আপনাকে প্রিভিউ করতে হবে না।
ডিভিতে, আপনি যে কোনও মডিউলে ফন্ট অসাম আইকন ব্যবহার করতে পারেন যা আপনাকে টেক্সট ট্যাব (যা HTML) এ সম্পাদনা করতে দেয়।
- আপনি যে ব্লকে আইকন যুক্ত করতে চান তা সম্পাদনা করুন, উদাহরণস্বরূপ একটি টেক্সট মডিউল।
- সামগ্রী সম্পাদনার সময় টেক্সট ট্যাবে ক্লিক করুন যাতে ভিত্তিমূলক HTML প্রদর্শিত হয়।
- আপনি আগে কপি করা ফন্ট অসাম আইকন HTML যোগ করুন।
- প্রয়োজনীয় স্থানে পেস্ট করুন এবং আকার পরিবর্তন করতে CSS ক্লাস যোগ করুন।
- মডিউলটি সংরক্ষণ করুন।
- ডিভিতে, আপনি এডিট মোডে আইকন দেখতে পাবেন কারণ আপনি পেজটি রিয়েল টাইমে দেখছেন।
আপনার নিজস্ব ফন্ট অসাম কিট কোড পাওয়া ফন্ট অসাম ব্যবহার করতে, আপনাকে তাদের ফ্রি কিটে অ্যাক্সেস পেতে একটি ফন্ট অসাম অ্যাকাউন্ট তৈরি করতে হবে। ফন্ট অসামের পেইড অ্যাকাউন্টও রয়েছে, যা আরও বেশি আইকন যোগ করে। ফেব্রুয়ারি ২০২২ অনুযায়ী, প্রো অ্যাকাউন্টে ১৪,৮৬৫ আইকন সহ অন্যান্য বৈশিষ্ট্য রয়েছে। ফ্রি অ্যাকাউন্ট সম্ভবত যথেষ্ট হবে, তবে জানা ভাল যে আরও বিকল্প রয়েছে।
- ফন্ট অসামের স্টার্ট পৃষ্ঠায় যান।
- আপনার ইমেইল ঠিকানা যোগ করুন এবং “সেন্ড কিট কোড” বোতামে ক্লিক করুন।
- নিশ্চিতকরণের জন্য আপনার ইমেইল চেক করুন এবং আপনার পাসওয়ার্ড ও অ্যাকাউন্টের বিস্তারিত সেট আপ করুন।
- একবার আপনার অ্যাকাউন্ট সেট আপ হলে আপনাকে একটি কিট কোড দেওয়া হবে। আপনি এই কোডটি আপনার সাইটে ফন্ট অসাম যোগ করার জন্য ব্যবহার করবেন।
- উপরের নির্দেশাবলী অনুসরণ করে আপনার নিজের কিট <head> সেকশনে যোগ করুন।
এটি কিছুটা জটিল মনে হতে পারে যতক্ষণ না আপনি এটি কয়েকবার করেন। এখন আপনার কাছে ১,৬০০ এরও বেশি স্কেলযোগ্য আইকন ব্যবহার করার সুযোগ রয়েছে যা আপনার সাইটে আকর্ষণ এবং ব্যবহারযোগ্যতা যোগ করবে। এটি চেষ্টা করে দেখুন!
#ফন্টঅসাম
#ওয়েবডেভেলপমেন্ট
#আইকন
#সিএসএস
#রেস্পনসিভডিজাইন
#এইচটিএমএল
#ওয়েবডিজাইন
#ডিভিথিম
#ইউজারইন্টারফেস
#স্কেলেবলআইকন
ফন্ট অসাম, স্কেলেবল ভেক্টর আইকন, ওয়েব ডেভেলপমেন্ট, সিএসএস কাস্টমাইজেশন, এইচটিএমএল কোড, ডিভি থিম ইন্টিগ্রেশন, উন্নত ফিচার, আইকন সেট, ফ্রি আইকন, ইউজার-ফ্রেন্ডলি ডিজাইন, আইকন ব্যবহার, ওয়েব ডিজাইন টিপস, রেস্পনসিভ আইকন, ওয়েবসাইট অপটিমাইজেশন, আইকন অনুসন্ধান
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন