আইকন অ্যাপ্লিকেশনে ব্যবহারকারীর অ্যাকশন ইলাস্ট্রেট করার জন্য খুব কার্যকর। জনপ্রিয় আইকন লাইব্রেরিগুলো:
- Font Awesome - https://fontawesome.com/
- Flaticon - https://www.flaticon.com/
- Material Design Icons - https://material.io/resources/icons/
Font Awesome CDN ব্যবহার
HTML-এ <head>-এ CDN লিংক যোগ করুন:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
এটি একটি মিনিফাইড CSS ফাইল যা Font Awesome-এর ফ্রি লাইব্রেরি রেফারেন্স করে।
HTML-এ আইকন যোগ করা
<div class="icon-container"> <i class="fab fa-twitter"></i> <span class="fas fa-camera"></span> <span class="fas fa-heart"></span> </div>
<i> বা <span> - যেকোনো ইনলাইন এলিমেন্ট ব্যবহার করা যায়। ক্লাস অ্যাট্রিবিউটে আইকনের নাম থাকে।
আইকন ক্লাস স্ট্রাকচার
- Style Prefix: fab (brands), fas (solid), far (regular), fal (light) - কিছু প্রো একাউন্টে
- Icon Name: fa-<name> ফরম্যাটে (যেমন: fa-twitter, fa-heart)
CSS দিয়ে স্টাইলিং
.icon-container { font-size: 24px; }
.fab { font-size: 3rem; color: #1DA1F1; }
.fa-heart { font-size: 4rem; color: crimson; }
আইকনগুলো ইনলাইন এলিমেন্ট হিসেবে আচরণ করে, তাই ফন্ট-সাইজ, কালার, ইত্যাদি CSS দিয়ে কন্ট্রোল করা যায়।
উপসংহার
CDN লিংক যোগ করে Font Awesome-এর ফ্রি আইকন লাইব্রেরি এক্সেস করা যায়। ক্লাস নাম দিয়ে আইকন বেছে নিন এবং CSS দিয়ে স্টাইল করুন। অন্যান্য লাইব্রেরির জন্যও একই প্রক্রিয়া।
