Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Material Design এর নীতির ওপর ভিত্তি করে তৈরি। এর একটি শক্তিশালী বৈশিষ্ট্য হল এর বিল্ট-ইন Icons যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে আইকন যোগ করতে সহায়তা করে। Materialize CSS এর আইকনগুলো Material Icons নামে পরিচিত, যা Google এর দ্বারা তৈরি এবং ওয়েব ডিজাইনে ব্যবহার করার জন্য খুবই সহজ এবং জনপ্রিয়। এখানে আমরা দেখব কীভাবে Materialize CSS এর বিল্ট-ইন Material Icons ব্যবহার করা যায় এবং কাস্টমাইজেশন করা যায়।
Materialize এর বিল্ট-ইন Icons
Materialize CSS এর আইকনগুলোর একটি বড় সংগ্রহ আছে, যেগুলি খুব সহজেই আপনার ওয়েবসাইটে ব্যবহার করা যায়। এগুলো হল SVG ফাইলের মতো এবং সহজেই HTML তে এমবেড করা যায়।
১. Material Icons কে লিংক করা
Material Icons ব্যবহারের জন্য প্রথমে আপনাকে Google Fonts এর মাধ্যমে আইকনগুলো লোড করতে হবে।
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
এটি আপনার ট্যাগে যুক্ত করতে হবে, যাতে Material Icons এর সমস্ত আইকন ব্যবহারযোগ্য হয়।
২. আইকন ব্যবহার করা
একবার আপনি আইকন ফন্ট লোড করে ফেললে, এখন আইকন ব্যবহার করা খুবই সহজ। Material Icons ব্যবহার করতে ট্যাগের মধ্যে আইকনের নাম উল্লেখ করতে হবে।
<i class="material-icons">home</i>
এখানে:
- material-icons ক্লাসটি আইকনকে সঠিকভাবে রেন্ডার করার জন্য ব্যবহৃত হয়।
- home: এটি আইকনের নাম। আপনি যেকোনো আইকনের নাম ব্যবহার করতে পারেন, যেমন search, edit, settings ইত্যাদি।
৩. আইকন এর আকার পরিবর্তন করা
আইকনের আকার পরিবর্তন করতে material-icons ক্লাসের সাথে small, medium, large ক্লাসও ব্যবহার করতে পারেন।
<i class="material-icons small">home</i>
<i class="material-icons medium">search</i>
<i class="material-icons large">settings</i>
এখানে:
- small: ছোট আকারের আইকন।
- medium: সাধারণ আকারের আইকন।
- large: বড় আকারের আইকন।
৪. আইকনের রঙ পরিবর্তন করা
আপনি সহজেই CSS দিয়ে আইকনের রঙ পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:
<i class="material-icons" style="color: red;">home</i>
<i class="material-icons" style="color: blue;">search</i>
এখানে:
- style="color: red;": আইকনের রঙ red (লাল) করা হয়েছে।
৫. আইকন বাটন হিসেবে ব্যবহার করা
Materialize CSS এর আইকনগুলোকে বাটন হিসেবে ব্যবহার করতে পারেন, যা ইন্টারঅ্যাকটিভ করে তুলবে। উদাহরণ:
<a class="btn-floating waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
এখানে:
- btn-floating: এটি একটি ছোট ভাসমান বাটন তৈরি করে।
- waves-effect waves-light: এটি ওয়েভ এফেক্ট তৈরি করে, যা ইন্টারঅ্যাকশনের সময় প্রদর্শিত হবে।
৬. আইকন এবং টেক্সট একসাথে ব্যবহার করা
আপনি চাইলে আইকন এবং টেক্সট একসাথে ব্যবহার করতে পারেন। উদাহরণ:
<a href="#" class="waves-effect waves-light btn">
<i class="material-icons left">cloud</i>Upload
</a>
এখানে:
- left ক্লাসটি আইকনটিকে বাম পাশে সন্নিবেশিত করে।
- right ক্লাসটি আইকনটিকে ডান পাশে সন্নিবেশিত করে।
এটা বোঝায় যে, এই বাটনের টেক্সট এবং আইকন একসাথে প্রদর্শিত হবে, তবে আইকনটির অবস্থান বাম বা ডান দিকে নির্ভর করবে।
Materialize এর কিছু জনপ্রিয় আইকন
Materialize CSS এর Material Icons সংগ্রহে অনেক জনপ্রিয় এবং সাধারণভাবে ব্যবহৃত আইকন রয়েছে। এখানে কিছু উদাহরণ দেওয়া হলো:
- home: হোম আইকন
- search: সার্চ আইকন
- settings: সেটিংস আইকন
- add: অ্যাড বা প্লাস আইকন
- edit: এডিট আইকন
- delete: ডিলিট বা মুছে ফেলার আইকন
- email: ইমেইল আইকন
- phone: ফোন আইকন
- info: ইনফো বা তথ্য আইকন
- face: ফেস বা মুখের আইকন
এগুলি বিভিন্ন ধরনের অ্যাপ্লিকেশন বা ওয়েবসাইটে খুবই কার্যকরী আইকন হিসেবে ব্যবহার করা যায়।
উপসংহার
Materialize CSS এর Material Icons ব্যবহার করা খুবই সহজ এবং এটি ওয়েব ডিজাইনে সুরুচিপূর্ণ এবং কার্যকরী আইকন প্রদান করে। আপনি ট্যাগের মাধ্যমে আইকনগুলি সহজেই আপনার ওয়েবসাইটে এমবেড করতে পারেন। এছাড়া, আপনি আইকনের আকার, রঙ, এবং অবস্থান কাস্টমাইজ করতে পারেন যাতে তা আপনার ডিজাইন অনুসারে উপযুক্ত হয়। Material Icons একটি সুন্দর এবং আধুনিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে এবং এটি Materialize CSS ব্যবহারকারীদের জন্য একটি অত্যন্ত শক্তিশালী টুল।
