Font Awesome এবং Bootstrap Icons হল দুটি জনপ্রিয় আইকন লাইব্রেরি যা ওয়েব ডিজাইনে ইমেজ এবং আইকনগুলির জন্য ব্যবহার করা হয়। Font Awesome একটি বহুল ব্যবহৃত আইকন প্যাক যা বিভিন্ন ধরনের আইকন প্রদান করে, এবং Bootstrap Icons হল বুটস্ট্রাপের নিজস্ব আইকন লাইব্রেরি। এই দুটি লাইব্রেরি ব্যবহার করে আপনার ওয়েব পেজে সুন্দর এবং প্রফেশনাল লুক আনা সম্ভব।
বুটস্ট্রাপ ৫ এর সাথে Font Awesome এবং Bootstrap Icons ইন্টিগ্রেশন করলে আপনি আরও আকর্ষণীয় এবং ইন্টারেক্টিভ আইকন ব্যবহার করতে পারবেন।
Font Awesome ইন্টিগ্রেশন
Font Awesome আইকন লাইব্রেরি ইন্টিগ্রেট করতে আপনাকে প্রথমে Font Awesome এর সিডিএন লিঙ্ক যুক্ত করতে হবে এবং তারপর প্রয়োজনীয় আইকনটি HTML এ ব্যবহার করতে হবে।
Font Awesome ইন্টিগ্রেশন উদাহরণ:
- Font Awesome সিডিএন লিঙ্ক যুক্ত করা:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
- Font Awesome আইকন ব্যবহার করা:
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-phone-alt"></i>
এই উদাহরণে, fa-home, fa-user, এবং fa-phone-alt হল Font Awesome এর আইকন ক্লাস, যেগুলি হোম, ইউজার এবং ফোন আইকন প্রদর্শন করবে।
Bootstrap Icons ইন্টিগ্রেশন
Bootstrap Icons হল বুটস্ট্রাপের নিজস্ব আইকন লাইব্রেরি, যা বুটস্ট্রাপ ৫ এর সাথে একত্রে ব্যবহারের জন্য তৈরি করা হয়েছে। এই লাইব্রেরিটি সহজেই বুটস্ট্রাপ ৫ এর অন্যান্য উপাদানের সাথে ইন্টিগ্রেট করা যায়।
Bootstrap Icons ইন্টিগ্রেশন উদাহরণ:
- Bootstrap Icons সিডিএন লিঙ্ক যুক্ত করা:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
- Bootstrap Icons ব্যবহার করা:
<i class="bi bi-house-door"></i>
<i class="bi bi-person"></i>
<i class="bi bi-telephone"></i>
এই উদাহরণে, bi-house-door, bi-person, এবং bi-telephone হল Bootstrap Icons এর আইকন ক্লাস, যেগুলি হাউস, ইউজার, এবং ফোন আইকন প্রদর্শন করবে।
Font Awesome এবং Bootstrap Icons একত্রে ব্যবহার করা
Font Awesome এবং Bootstrap Icons একসাথে ব্যবহার করা সম্ভব। আপনি যেকোনো আইকন লাইব্রেরি থেকে আইকনগুলি HTML-এ যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে উভয় লাইব্রেরির আইকন ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesome এবং Bootstrap Icons ইন্টিগ্রেশন</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Font Awesome আইকন -->
<h3><i class="fas fa-home"></i> Home</h3>
<h3><i class="fas fa-user"></i> User</h3>
<!-- Bootstrap Icons -->
<h3><i class="bi bi-house-door"></i> Home</h3>
<h3><i class="bi bi-person"></i> User</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- Font Awesome সিডিএন:
- Font Awesome লাইব্রেরি সিডিএন (Content Delivery Network) থেকে লোড করা হয়েছে।
- তারপর
fasক্লাসের মাধ্যমে আইকন ট্যাগের মধ্যে ব্যবহৃত আইকন ক্লাসfa-home,fa-userইত্যাদি যোগ করা হয়েছে।
- Bootstrap Icons সিডিএন:
- Bootstrap Icons সিডিএন থেকে লোড করা হয়েছে এবং
biক্লাসের মাধ্যমে আইকনগুলি প্রদর্শন করা হয়েছে, যেমনbi-house-door,bi-personইত্যাদি।
- Bootstrap Icons সিডিএন থেকে লোড করা হয়েছে এবং
Font Awesome এবং Bootstrap Icons এর সুবিধা:
- Font Awesome:
- অধিক পরিমাণ আইকন এবং স্টাইলিং অপশন প্রদান করে।
- ইনলাইন স্কেলযোগ্য আইকনগুলি সহজে কাস্টমাইজ করা যায়।
- Bootstrap Icons:
- বুটস্ট্রাপ ৫-এর সাথে সম্পূর্ণভাবে একীভূত, তাই বুটস্ট্রাপ ব্যবহারকারী সহজেই তাদের প্রজেক্টে আইকন ব্যবহার করতে পারেন।
- সহজ এবং পরিষ্কার ডিজাইন।
এইভাবে, আপনি Font Awesome এবং Bootstrap Icons একত্রে বা একে অপরের বিকল্প হিসেবে ব্যবহার করে আপনার ওয়েব পেজে আইকনগুলোকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করে তুলতে পারবেন।
Read more
