Materialize CSS একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Material Design এর নীতির ওপর ভিত্তি করে তৈরি। এটি সহজেই icons ব্যবহারের সুবিধা প্রদান করে। তবে কখনো কখনো আপনি custom icons বা নিজস্ব আইকন ব্যবহার করতে চান। এই টিউটোরিয়ালে আমরা দেখব Materialize CSS এর সাথে custom icons কিভাবে যুক্ত করা যায়।
Custom Icons ব্যবহার করার পদ্ধতি
Materialize CSS এর নিজস্ব Material Icons প্রদান করে, তবে আপনি custom icons ব্যবহার করতে চাইলে কিছু সহজ পদ্ধতি রয়েছে। এখানে আমরা Font Awesome, SVG icons, অথবা Custom Icon Fonts ব্যবহার করার পদ্ধতি আলোচনা করব।
১. Font Awesome Icons যুক্ত করা
Font Awesome হল একটি জনপ্রিয় আইকন লাইব্রেরি যা হাজার হাজার বিভিন্ন ধরনের আইকন সরবরাহ করে। Materialize CSS এর সাথে Font Awesome যুক্ত করার জন্য আপনাকে প্রথমে এর সিএসএস লিংক অন্তর্ভুক্ত করতে হবে।
১.১ Font Awesome যুক্ত করা
- প্রথমে, Font Awesome সিএসএস লিংক আপনার HTML এর
<head>ট্যাগের মধ্যে যুক্ত করুন।
<head>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Font Awesome CSS Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
- এখন আপনি যে কোনো Font Awesome আইকন ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<!-- Font Awesome Icon Example -->
<i class="fas fa-home"></i> Home
<i class="fas fa-envelope"></i> Contact
এখানে:
- fas fa-home: এটি Home আইকনকে প্রদর্শন করবে।
- fas fa-envelope: এটি Envelope আইকন প্রদর্শন করবে।
১.২ Font Awesome এবং Materialize CSS এর সাথে কাস্টম স্টাইল
Font Awesome আইকনকে Materialize CSS এর স্টাইলের সাথে মিশিয়ে ব্যবহার করা যেতে পারে। উদাহরণ:
<a href="#" class="btn waves-effect waves-light"><i class="fas fa-arrow-right"></i> Next</a>
এখানে:
- waves-effect এবং waves-light ক্লাসগুলো Materialize CSS এর ওয়েভ এফেক্ট এবং স্টাইল অ্যাপ্লাই করবে।
- fas fa-arrow-right: Font Awesome এর Right Arrow আইকন।
২. SVG Icons ব্যবহার করা
SVG Icons (Scalable Vector Graphics) হল একটি জনপ্রিয় ফরম্যাট যা সহজে কাস্টমাইজ করা যায় এবং এটি ভেক্টর গ্রাফিক্সের মাধ্যমে প্রতিটি স্কেলে স্পষ্ট থাকে।
২.১ SVG Icon যুক্ত করা
আপনি সরাসরি HTML এ SVG কোড ব্যবহার করে কাস্টম আইকন যুক্ত করতে পারেন। উদাহরণ:
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 7l1.5 1.5L12 4l8.5 4.5L22 7z"/>
</svg>
এখানে:
- এটি একটি SVG আকারের আইকন, যা সহজেই আকার এবং রঙ পরিবর্তন করা যেতে পারে।
- viewBox এবং path অ্যাট্রিবিউট আইকনের আকার এবং চিত্রের ডিজাইন নিয়ন্ত্রণ করে।
২.২ SVG Icons কাস্টমাইজ করা
আপনি SVG আইকনের রঙ, আকার, স্ট্রোক, ফিল ইত্যাদি CSS দিয়ে কাস্টমাইজ করতে পারেন। উদাহরণ:
svg {
fill: #ff5722; /* Orange color */
width: 100px; /* Custom width */
height: 100px; /* Custom height */
}
এখানে:
- fill: এটি আইকনের রঙ পরিবর্তন করে।
- width এবং height: এগুলি আইকনের আকার নির্ধারণ করে।
৩. Custom Icon Font
আপনি যদি নিজের কাস্টম আইকন ফন্ট তৈরি করতে চান, তবে IcoMoon বা Fontello এর মতো টুল ব্যবহার করে custom icon font তৈরি করতে পারেন। এই টুলগুলি আপনাকে আপনার পছন্দের আইকনগুলোর একটি ফন্ট তৈরি করতে সহায়তা করবে।
৩.১ Custom Icon Font ব্যবহার করা
- IcoMoon বা Fontello থেকে আইকন ফন্ট তৈরি করুন এবং সিএসএস ফাইল ডাউনলোড করুন।
- তারপর আপনার HTML এ এই ফন্ট ফাইল যোগ করুন:
<head>
<link rel="stylesheet" href="path/to/your/custom/icons.css">
</head>
- এখন আপনি custom icons ব্যবহার করতে পারবেন:
<i class="custom-icon-home"></i> Home
<i class="custom-icon-envelope"></i> Contact
এখানে:
- custom-icon-home এবং custom-icon-envelope হল আপনার কাস্টম আইকনের ক্লাস নাম।
উপসংহার
Materialize CSS এর সাথে custom icons যুক্ত করার জন্য আপনি Font Awesome, SVG icons, অথবা Custom Icon Fonts ব্যবহার করতে পারেন। প্রতিটি পদ্ধতির নিজস্ব সুবিধা এবং কাস্টমাইজেশন অপশন রয়েছে, যেমন SVG icons গুলি ভেক্টর বেসড এবং স্কেলেবল, যখন Font Awesome ও IcoMoon এর মাধ্যমে আপনি একাধিক আইকন ব্যবহার করতে পারেন। Materialize CSS এর সাথে এই কাস্টম আইকনগুলি সহজেই স্টাইল এবং কাস্টমাইজ করা যায়, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে।
Read more
