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

Posted on

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

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

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

Thumbnail

 

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

Icon font demo

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

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

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

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

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

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

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

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

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

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

[icon name=”rocket”]

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

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

Demo image | wpbeginner

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

Resize | wpbeginner

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

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

Resize | wpbeginner

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

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

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

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

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

পদ্ধতি ০১ঃ

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

প্রথমে, আপনাকে CDN Font Awesome ওয়েবসাইট ভিজিট করতে হবে এবং 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

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

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

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

download fonts

এখন আপনি আপনার ওয়ার্ডপ্রেস থিমের আইকন ফন্ট লোড করার জন্য প্রস্তুত। কেবল আপনার থিমের 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

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

<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
}

ট্রিকবিডিতে কোড এম্বেড করা যায়না বলে কোড এভাবে দিতে হয়েছে। কোড কপি করতে কোনো সমস্যা হলে বা কোডে কোনোপ্রকার ভুল থাকলে নিচের পোষ্ট থেকে কপি করতে পারবেনঃ

 

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

The post কিভাবে আপনার ওয়ার্ডপ্রেস থিম এ সহজেই আইকন ফন্ট (Icon Font) যুক্ত করবেন appeared first on Trickbd.com.

Source:

Leave a Reply

Your email address will not be published. Required fields are marked *