Latest Posts
জিমেইলের কিছু অজানা ফিচার – যা আপনি জানেন নাঅপারেটিং সিস্টেম কি – What is Operating System in Bengaliসার্ভার কি – What is Server in Bengaliবিকাশের মাধ্যমে যেকোনো মোবাইল নাম্বারে রিচার্জ করে এখনই ৩০% ক্যাশব্যাক নিয়ে নিনHow to set oEmbed Max Width in WordPress (2 easy ways)কিভাবে ওয়ার্ডপ্রেসে oEmbed Max Width সেট করবেন (২টি সহজ পদ্ধতি)কিভাবে ওয়ার্ডপ্রেসে Author’s Comment Highlight করবেনHow To Install A WordPress Plugin – For Beginnersওয়ার্ডপ্রেসে Limit Login Attemps সিস্টেম কেনো এবং কিভাবে করবেনWhat is: Computer Processor?কম্পিউটার প্রসেসর কি – What is Computer Processor in Bengaliকীভাবে ফ্রি ফায়ার ফেসবুক অ্যাকাউন্টকে জিমেইল অ্যাকাউন্টে পরিবর্তন করবেনকিভাবে ওয়ার্ডপ্রেসে SEO-Friendly Recipe Schema যুক্ত করবেন০৫ টি সেরা ওয়ার্ডপ্রেস নিউজপেপার থিম (2021)এইচটিএমএল কি – What is HTML in Bengaliবাইনারি সংখ্যা পদ্ধতি কি? (দ্বিমিক সংখ্যা পদ্ধতি)কীভাবে ওয়ার্ডপ্রেস ওয়েবসাইটের Critical Error সমস্যার সমাধান করবেন (2 Methods)কীভাবে জানবেন আপনার কম্পিউটার কতক্ষণ ধরে অন আছে?নেটওয়ার্ক কি? (What is Network in Bengali)তৈলাক্ত ত্বকের সমাধান রান্নাঘরেই!ঘরোয়া উপায়ে এক সপ্তাহে ফর্সা ত্বকটাক মাথায় চুল গজানোর নতুন ওষুধ আবিষ্কারAPI কী? What is an API? (Application Programming Interface)আপনার সাইটে Contact Form এর পরিবর্তে Google Form ব্যবহার করুনআমাদের সাইটে কীভাবে লেখক অ্যাকাউন্ট খুলবেন?কুইকোপিয়া.কম-এ আর্টিকেল লিখে আয় করুনকুইকোপিয়া সাইট তাদের লেখকদের কীভাবে পারিশ্রমিক দিয়ে থাকে? সাথে ১০ টি প্রশ্নের উত্তরফুডপ্যান্ডায় বিকাশ দিয়ে পেমেন্ট করে ৩০০ টাকা ডিসকাউন্ট পান (অফারটি সীমিত)কিভাবে ওয়ার্ডপ্রেস Search Results থেকে Page বাদ দেওয়া বা লুকানো যায়কিভাবে আপনার ওয়ার্ডপ্রেস থিম এ সহজেই আইকন ফন্ট (Icon Font) যুক্ত করবেনকুইকোপিয়া সাইটে কীভাবে নতুন Feature Request এর জন্য অনুরোধ করবেনকিভাবে ওয়ার্ডপ্রেস পোস্টের জন্য Minimum Word Count সেট করবেন (২ টি পদ্ধতিতে)কিভাবে ওয়ার্ডপ্রেসে Pending Review এর জন্য ইমেইল নোটিফিকেশন পাবেনWhat is: CSS? সিএসএস কী?কিভাবে UpDraftPlus দিয়ে আপনার ওয়ার্ডপ্রেস সাইট ব্যাকআপ ও রিস্টোর করবেনকিভাবে আপনার ওয়ার্ডপ্রেস সাইটে সহজেই Custom CSS যোগ করবেনকিভাবে ওয়ার্ডপ্রেসে ব্রোকেন লিংক খুঁজে বের করবেন এবং ঠিক করবেন (সহজ পদ্ধতি)আম্বার আইটি অ্যাপে বিকাশের মাধ্যমে রিচার্জ করে ২০% ক্যাশব্যাক নিয়ে নিনকিভাবে একটি ওয়ার্ডপ্রেস প্লাগইন ইন্সটল করবেন – নতুনদের জন্যমাইক্রোসফট ওয়ার্ডঃ ফন্ট পরিবর্তন, কাস্টম ফন্ট ইনস্টল ও সিম্বল কীভাবে যোগ করতে হয়মাইক্রোসফট ওয়ার্ডঃ ওয়ার্ড ডকুমেন্টে Header, Footer & Custom Watermark বসাবেন।কীভাবে মাইক্রোসফট ওয়ার্ড সফটওয়্যার ডাউনলোড করবেন?কীভাবে পেপার সাইজ নির্ধারণ ও প্রিন্ট প্রিভিউ করবেনMicrosoft Word এ Save করা ফাইল ওপেন ও যেভাবে ফাইল লক করবেন।ব্লক কী এবং কার্সর মুভমেন্ট কীভাবে করতে হয়?এমএস ওয়ার্ডের পরিচিতি – মাইক্রোসফট অফিস ওয়ার্ড ২০১০মাইক্রোসফট অফিস ওয়ার্ড ২০১০ – বেসিক ধারণাভ্যাকসিনের জন্য রেজিস্ট্রেশন করুন – Vaccine Registration
WordPressWordPress PluginWordPress ThemesWordPress Tutorial

কিভাবে আপনার ওয়ার্ডপ্রেস থিম এ সহজেই আইকন ফন্ট (Icon Font) যুক্ত করবেন

()

আপনি কি আপনার ওয়ার্ডপ্রেস সাইটে আইকন ফন্ট যুক্ত করতে চান? সম্প্রতি আমাদের একজন পাঠক Contact Us এর মাধ্যমে আমাদের সাথে যোগাযোগ করেছেন এবং জিজ্ঞাসা করেছেন যে তাদের ওয়ার্ডপ্রেস থিমে আইকন ফন্ট যুক্ত করার সবচেয়ে সহজ উপায় কী?

আইকন ফন্টগুলি আপনাকে আপনার ওয়েবসাইটকে ধীর না করে ভেক্টর (Resizable) আইকন যুক্ত করতে দেয়।
এগুলো ওয়েব ফন্টের মতো লোড করা হয় এবং CSS ব্যবহার করে স্টাইল করা যায়।

এই টিউটোরিয়ালে, আমরা আপনাকে ধাপে ধাপে দেখাবো কিভাবে আপনার ওয়ার্ডপ্রেস থিম এ সহজে আইকন ফন্ট যোগ করতে হয়।

আইকন ফন্ট (Icon Font) কি এবং কেন আপনার ওয়ার্ডপ্রেস সাইটে ব্যবহার করা উচিত?

font icons

আইকন ফন্টগুলিতে অক্ষর এবং সংখ্যার পরিবর্তে প্রতীক বা চিত্রগ্রাম (Pictograms) থাকে। এই চিত্রগ্রাম (Pictograms) গুলো সহজেই ওয়েবসাইটের কন্টেন্টসগুলোতে যুক্ত করা যায় এবং CSS ব্যবহার করে আকার পরিবর্তন করা যায়। চিত্র ভিত্তিক আইকনগুলির তুলনায়, ফন্ট আইকনগুলি অনেক দ্রুত যা আপনার ওয়ার্ডপ্রেস ওয়েবসাইটের গতিতে সহায়তা করে।

আইকন ফন্টগুলি সাধারণত ব্যবহৃত হয় কমন আইকন প্রদর্শন করতে। উদাহরণস্বরূপ, আপনি এগুলো আপনার শপিং কার্ট, ডাউনলোড বাটন, ফিচার বক্স, গিভওয়ে কন্টেস্ট এবং এমনকি ওয়ার্ডপ্রেস নেভিগেশন মেনুতে (Navigation menu) ব্যবহার করতে পারেন।

বেশ কয়েকটি ফ্রি এবং ওপেন-সোর্স আইকন ফন্ট পাওয়া যায় যেখানে শত শত সুন্দর আইকন রয়েছে।

আসলে, প্রতিটি ওয়ার্ডপ্রেস ইনস্টল করার পর ফ্রি Dashicon আইকন ফন্ট সেট সহ আসে। এই আইকনগুলি ওয়ার্ডপ্রেস অ্যাডমিন মেনু এবং ওয়ার্ডপ্রেস অ্যাডমিন এরিয়া অভ্যন্তরে অন্যান্য ক্ষেত্রে ব্যবহৃত হয়।

কিছু অন্যান্য জনপ্রিয় আইকন ফন্ট হলঃ

এই টিউটোরিয়ালে আপনাদের শিখাতে, আমরা ওয়ার্ডপ্রেসে আইকন ফন্ট যুক্ত করার তিনটি উপায় কভার করতে যাচ্ছি। আপনি আপনার জন্য সবচেয়ে ভালো কাজ করে এমন উপায়টি বেছে নিতে পারেন।

পদ্ধতি ০১ঃ প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেসে আইকন ফন্ট যুক্ত করা।

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

প্রথমে আপনাকে যা করতে হবে তা হল ওয়ার্ডপ্রেসের জন্য Fonts Awesome প্লাগইন Install এবং Activate করা। আরো বিস্তারিত জানার জন্য, কিভাবে একটি ওয়ার্ডপ্রেস প্লাগইন ইনস্টল করতে হয় তার ধাপে ধাপে নির্দেশিকা দেখুন।

Activate করার পরে, প্লাগইনটি আপনার থিমের জন্য Fonts Awesome এর আইকন সাপোর্ট করবে। আপনি এখন যে কোন ওয়ার্ডপ্রেস পোস্ট বা পেজ এডিট করতে পারেন এবং আইকন শর্টকোড (নিচে উল্লেখিত কোড) ব্যবহার করতে পারেনঃ

[icon name=”rocket”]

আপনি এই শর্টকোডটি অন্য টেক্সটসহ বা নিজেই একটি ডেডিকেটেড শর্টকোড ব্লকে ব্যবহার করতে পারেন।

একবার শর্টকোডটি যুক্ত করা হলে, আপনি আপনার পোস্ট বা পেইজের পূর্বরূপ দেখতে পারেন যে একটি লাইভ সাইটে আইকনটি দেখতে কেমন হবে। আমাদের টেস্ট সাইটে এটি দেখতে কেমন ছিল তা এখানে দেখানো হলোঃ

Demo image | wpbeginner
Demo image | wpbeginner

আপনি নিজেই একটি Paragraph ব্লকের ভিতরে ফন্ট আইকন শর্টকোড যুক্ত করতে পারবেন যেখানে আপনি আইকনের আকার বাড়াতে ব্লক সেটিংস ব্যবহার করতে পারেন।

Resize | wpbeginner
Resize | wpbeginner

আপনি টেক্সটের আকার বাড়ানোর সাথে সাথে এটি টেক্সট এডিটরের ভিতরে অদ্ভুত লাগতে পারে। কারণ শর্টকোডটি স্বয়ংক্রিয়ভাবে ব্লক এডিটরের ভিতরে একটি আইকন ফন্টে পরিবর্তিত হয় না।

আসল আইকনের আকার কেমন হবে তা দেখতে আপনার পোস্ট বা পেইজের প্রিভিউ বাটনে ক্লিক করতে হবে। যেমনঃ

Icon preview | wpbeginner

পদ্ধতি ০২ঃ কোড সহ ম্যানুয়ালি ওয়ার্ডপ্রেসে আইকন ফন্ট যুক্ত করা।

যেমনটি আমরা আগে উল্লেখ করেছি যে আইকন ফন্টগুলি কেবল ফন্ট এবং আপনার সাইটে যেকোনো আইকন ফন্ট যুক্ত করা যেতে পারে যেমন আপনি যে কোনও কাস্টম ফন্ট যুক্ত করতে পারেন।

Font Awesome আইকন ফন্ট ওয়েব জুড়ে CDN সার্ভার থেকে পাওয়া যায় এবং সরাসরি আপনার ওয়ার্ডপ্রেস থিম থেকে লিঙ্ক করা যায়।

আপনি আপনার ওয়ার্ডপ্রেস থিমের একটি ফোল্ডারে সম্পূর্ণ ফন্ট ডিরেক্টরি আপলোড করতে পারেন এবং তারপর আপনার স্টাইলশীটে সেই ফন্টগুলি ব্যবহার করতে পারেন।

যেহেতু আমরা এই টিউটোরিয়ালের জন্য Font Awesome ব্যবহার করছি, এই পদ্ধতি ০২ তে আরো দুটো পদ্ধতি ব্যবহার করে, আমরা আপনাকে দেখাবো কিভাবে আপনি উভয় পদ্ধতি ব্যবহার করে এটি যোগ করতে পারেন।

পদ্ধতি ০১ঃ

এই ম্যানুয়াল পদ্ধতিটি বেশ সহজ।

প্রথমে, আপনাকে CDN Font Awesome ওয়েবসাইট ভিজিট করতে হবে এবং Embed Code পেতে আপনার ইমেল ঠিকানা লিখতে হবে।

Embed code
Embed code

এখন আপনার এম্বেড কোড সহ Font Awesome থেকে একটি ইমেল যাবে তাই আপনার ইনবক্সটি চেক করুন। এই এম্বেড কোডটি কপি করুন এবং আপনার ওয়ার্ডপ্রেস থিমের header.php ফাইলে ট্যাগের ঠিক আগে পেস্ট করুন।

আপনার এম্বেড কোডটি হবে একটি একক লাইন যা সরাসরি তাদের CDN সার্ভার থেকে Font Awesome লাইব্রেরি নিয়ে আসবে। এটি দেখতে ঠিক এরকম হবেঃ

<script src="https://use.fontawesome.com/3418eb3e05.js"></script>

দ্রষ্টব্যঃ এই পদ্ধতিটি সবচেয়ে সহজ, তবে এটি অন্যান্য প্লাগইনগুলির সাথে দ্বন্দ্ব সৃষ্টি করতে পারে।

বিল্ট-ইন এনকুইং মেকানিজম ব্যবহার করে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট সঠিকভাবে লোড করা একটি ভালো পন্থা হবে।

আপনার থিমের হেডার টেমপ্লেট থেকে স্টাইলশীটে লিঙ্ক করার পরিবর্তে, আপনি আপনার থিমের functions.php ফাইলে অথবা সাইট-নির্দিষ্ট প্লাগইন-এ নিম্নলিখিত কোড যোগ করতে পারেন।

function wpb_load_fa() {
 
wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
পদ্ধতি ০২ঃ

দ্বিতীয় পদ্ধতিটি ওতোটা সহজ নয়, তবে এটি আপনাকে আপনার নিজস্ব ওয়েবসাইটে ফন্ট অসাধারণ আইকন ফন্টগুলি হোস্ট করার অনুমতি দেবে।

প্রথমে, আপনার কম্পিউটারে ফন্ট প্যাকেজ ডাউনলোড করতে আপনাকে Font Awesome ওয়েবসাইটটি ভিজিট করতে হবে।

download fonts
download fonts

এখন শুধু আইকন ফন্ট ডাউনলোড করুন এবং প্যাকেজটি WinRar Software দিয়ে আনজিপ  করুন।

এখন, আপনাকে একটি FTP ক্লায়েন্ট ব্যবহার করে আপনার ওয়ার্ডপ্রেস হোস্টিং এর সাথে সংযোগ করতে হবে এবং আপনার ওয়ার্ডপ্রেস থিমের ডিরেক্টরিতে যেতে হবে।

আপনাকে সেখানে একটি নতুন ফোল্ডার তৈরি করতে হবে এবং এর নাম দিতে হবে ‘fonts। পরবর্তী, আপনাকে আপনার ওয়েব হোস্টিং সার্ভারে ফন্ট ডিরেক্টরিতে আইকন ফন্ট ফোল্ডারের বিষয়বস্তু আপলোড করতে হবে।

themes directory
themes directory

এখন আপনি আপনার ওয়ার্ডপ্রেস থিমের আইকন ফন্ট লোড করার জন্য প্রস্তুত। কেবল আপনার থিমের functions.php ফাইলে অথবা সাইট-নির্দিষ্ট প্লাগইন-এ এই কোডটি যোগ করুন।

function wpb_load_fa() {
 
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

অভিনন্দন! আপনি সফলভাবে আপনার ওয়ার্ডপ্রেস থিমে Font Awesome লোড করেছেন।

এখন সেই অংশটি আসে যেখানে আপনি আপনার ওয়ার্ডপ্রেস থিম, পোস্ট বা পেইজগুলোতে আইকন ফন্ট যুক্ত করবেন।

পদ্ধতি ০৩ঃ ওয়ার্ডপ্রেসে ম্যানুয়ালি আইকন ফন্ট প্রদর্শন করা।

এভেইলএবল সকল আইকনগুলোর সম্পূর্ণ তালিকা দেখতে Font Awesome ওয়েবসাইটে যান। আপনি যে আইকনটি ব্যবহার করতে চান তাতে ক্লিক করুন। এরপর আপনি আইকনটির নাম দেখতে পাবেন।

fonts gallery
fonts gallery

আইকনের নাম কপি করুন এবং ওয়ার্ডপ্রেসে এটি ব্যবহার করুন। আইকনের নাম দেখতে হবে ঠিক এইরকমঃ

<i class="fab fa-wordpress"></i>

আপনি আপনার থিমের স্টাইলশীটে এই আইকনটি স্টাইল করতে পারেন। দেখতে হবে ঠিক এইরকমঃ

.fab fa-wordpress { 
font-size:50px; 
color:#FF6600; 
}

আপনি বিভিন্ন আইকন একসাথে একত্রিত করতে পারেন এবং তাদের একবারে স্টাইল করতে পারেন। উদাহরণস্বরূপ, ধরুন আপনি তাদের পাশে আইকনগুলির সাথে লিঙ্কগুলির একটি তালিকা প্রদর্শন করতে চান। আপনি একটি নির্দিষ্ট শ্রেণীর সাথে এলিমেন্টের অধীনে তাদের Wrap করতে পারেন।

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

এখন আপনি তাদের আপনার থিমের স্টাইলশীটে এইভাবে স্টাইল করতে পারেন। দেখতে হবে এইরকমঃ

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
} 

আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার ওয়ার্ডপ্রেস থিম এ সহজে আইকন ফন্ট যুক্ত করা শিখতে সাহায্য করেছে।

এই আর্টিকেলটি আপনার কেমন লেগেছে?

রেটিং দিতে স্টার-এ ক্লিক করুন!

এভারেজ রেটিং / 5. সর্বমোট ভোটঃ

এখন পর্যন্ত কোনো ভোট নেই! প্রথম ভোট দিতে এখনই রেটিং দিন।

What’s your Reaction?
+1
6
+1
2
+1
3
+1
0
+1
0
+1
0
+1
0

সুমা দাশ শিশির

লিখতে ভালোবাসি, তাই লিখে যাই 🙂
Back to top button
x
DMCA.com Protection Status

Adblock Detected

Please consider supporting us by disabling your ad blocker