Materialize CSS ফ্রেমওয়ার্কে Icons এবং FontAwesome ব্যবহারের মাধ্যমে আপনি আপনার ওয়েবসাইটে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ উপাদান যুক্ত করতে পারেন। Materialize Icons এবং FontAwesome দুটিই জনপ্রিয় আইকন প্যাকেজ যা ব্যবহার করে আপনি আপনার ডিজাইনকে আরও উন্নত এবং সহজে বোধগম্য করতে পারেন।
এখানে Materialize CSS এর Material Icons এবং FontAwesome এর ইন্টিগ্রেশন পদ্ধতি নিয়ে আলোচনা করা হলো।
Materialize Icons
Materialize Icons হলো Google-এর Material Design এর অংশ, যা খুবই সহজ এবং পরিষ্কার স্টাইলের আইকনগুলোর একটি সংগ্রহ। Materialize CSS ফ্রেমওয়ার্কে Material Icons সহজেই ইন্টিগ্রেট করা যায়।
Materialize Icons ব্যবহার করা
প্রথমে আপনাকে Materialize Icons এর জন্য Google Fonts এর লিংক আপনার HTML ফাইলে যোগ করতে হবে:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
এখন আপনি যে কোনো আইকন Material Icons ব্যবহার করতে পারেন:
Materialize Icons উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Icons Example</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Material Icon Example -->
<i class="material-icons">home</i> <!-- Home Icon -->
<i class="material-icons">settings</i> <!-- Settings Icon -->
<i class="material-icons">email</i> <!-- Email Icon -->
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
<i class="material-icons">home</i>: এটি একটি home আইকন প্রদর্শন করবে। আপনিhome,settings,emailইত্যাদি যেকোনো আইকন নাম ব্যবহার করতে পারেন।
Materialize Icons এর কাস্টমাইজেশন
Materialize Icons খুব সহজেই কাস্টমাইজ করা যায়:
- আইকনের আকার: CSS দিয়ে আইকনের আকার কাস্টমাইজ করা যায়। উদাহরণ:
.material-icons {
font-size: 48px; /* আইকনের আকার বড় করার জন্য */
}
- আইকনের রঙ: CSS দিয়ে আইকনের রঙ কাস্টমাইজ করা যায়:
.material-icons {
color: red; /* আইকন রঙ পরিবর্তন */
}
FontAwesome Integration
FontAwesome হলো আরেকটি জনপ্রিয় আইকন লাইব্রেরি যা অনেক বিভিন্ন আইকন প্রদান করে এবং এটি একটি সহজ এবং জনপ্রিয় উপায় যা ওয়েবসাইটে আইকন যোগ করতে ব্যবহৃত হয়।
FontAwesome ইন্টিগ্রেশন
আপনি FontAwesome ব্যবহার করতে চাইলে, প্রথমে এটি আপনার HTML ফাইলে লিঙ্ক করতে হবে:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
এখন আপনি FontAwesome আইকনগুলি আপনার HTML কোডে ব্যবহার করতে পারবেন।
FontAwesome উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- FontAwesome Example -->
<i class="fas fa-home"></i> <!-- Home Icon -->
<i class="fas fa-cogs"></i> <!-- Settings Icon -->
<i class="fas fa-envelope"></i> <!-- Email Icon -->
</body>
</html>
এখানে:
<i class="fas fa-home"></i>: এটি FontAwesome এর home আইকন প্রদর্শন করবে। আপনিfa-home,fa-cogs,fa-envelopeইত্যাদি যেকোনো আইকন নাম ব্যবহার করতে পারেন।
FontAwesome Icons এর কাস্টমাইজেশন
FontAwesome আইকনগুলি CSS দিয়ে কাস্টমাইজ করা যেতে পারে:
- আইকনের আকার পরিবর্তন করা:
.fas {
font-size: 48px; /* আইকনের আকার বড় করা */
}
- আইকনের রঙ পরিবর্তন করা:
.fas {
color: blue; /* আইকন রঙ পরিবর্তন */
}
Materialize Icons এবং FontAwesome একসাথে ব্যবহার করা
আপনি সহজেই Materialize Icons এবং FontAwesome একসাথে আপনার ওয়েবসাইটে ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে দুটো লাইব্রেরি একসাথে ব্যবহৃত হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize and FontAwesome Example</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Materialize Icon -->
<i class="material-icons">home</i> <!-- Materialize home icon -->
<!-- FontAwesome Icon -->
<i class="fas fa-home"></i> <!-- FontAwesome home icon -->
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- Materialize এবং FontAwesome একসাথে ব্যবহৃত হয়েছে যাতে আপনি আপনার ওয়েবসাইটে দুটি লাইব্রেরি থেকে আইকন ব্যবহার করতে পারেন।
উপসংহার
Materialize Icons এবং FontAwesome দুটোই অত্যন্ত জনপ্রিয় এবং কার্যকরী আইকন লাইব্রেরি, যা ওয়েবসাইট ডিজাইনে দ্রুত এবং সুন্দর আইকন প্রয়োগ করার জন্য ব্যবহৃত হয়। Materialize Icons Google এর Material Design এর অংশ এবং এটি সিম্পল এবং মিনিমাল আইকন প্রদান করে, যেখানে FontAwesome আরও বিস্তৃত এবং বিস্তারিত আইকন লাইব্রেরি সরবরাহ করে।
আপনি আপনার প্রোজেক্টে দুইটি লাইব্রেরি একসাথে ব্যবহার করতে পারেন, এবং সেগুলির আকার, রঙ ইত্যাদি কাস্টমাইজ করে আপনার ডিজাইনকে আরও আকর্ষণীয় করতে পারেন।
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 ব্যবহারকারীদের জন্য একটি অত্যন্ত শক্তিশালী টুল।
Materialize CSS একটি আধুনিক এবং শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Google Material Design এর নীতির উপর ভিত্তি করে তৈরি। তবে, যদি আপনি Materialize CSS এর সাথে FontAwesome আইকন ব্যবহার করতে চান, তাহলে আপনাকে এটি আলাদাভাবে ইন্টিগ্রেট করতে হবে। FontAwesome একটি জনপ্রিয় আইকন লাইব্রেরি যা ওয়েব ডিজাইনে অনেক ধরনের আইকন প্রদান করে এবং এই আইকনগুলো ইন্টারফেসের একটি গুরুত্বপূর্ণ অংশ হয়ে দাঁড়ায়।
এখানে আমরা দেখব কীভাবে Materialize CSS এর সাথে FontAwesome ইন্টিগ্রেট করা যায় এবং কীভাবে সেগুলো ব্যবহার করা যায়।
FontAwesome কী?
FontAwesome হল একটি ওপেন সোর্স আইকন ফন্ট লাইব্রেরি যা ওয়েব ডিজাইনে নানা ধরনের আইকন প্রদান করে, যেমন সোশ্যাল মিডিয়া আইকন, ইউজার ইন্টারফেস আইকন, অ্যাকশন আইকন ইত্যাদি। এটি SVG, web fonts, এবং CSS ফর্ম্যাটে আইকন প্রদান করে, যা ওয়েবসাইট ডিজাইনকে আরও আধুনিক এবং ব্যবহারকারী-বান্ধব করে তোলে।
FontAwesome ইন্টিগ্রেশন করা
Materialize CSS এর সাথে FontAwesome ব্যবহার করতে হলে প্রথমে আপনাকে FontAwesome এর সিএসএস ফাইলটি আপনার HTML ডকুমেন্টে অন্তর্ভুক্ত করতে হবে।
১. FontAwesome CDN লিঙ্ক ব্যবহার করা
সবচেয়ে সহজ পদ্ধতি হল CDN (Content Delivery Network) ব্যবহার করে FontAwesome সিএসএস ফাইল লোড করা। নিচে এর উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize with FontAwesome</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- FontAwesome CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- FontAwesome Example -->
<div class="container">
<h2>FontAwesome with Materialize</h2>
<a href="#" class="btn"><i class="fas fa-home"></i> Home</a>
<a href="#" class="btn"><i class="fas fa-envelope"></i> Message</a>
<a href="#" class="btn"><i class="fas fa-camera"></i> Camera</a>
</div>
<!-- Materialize JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
- FontAwesome CSS Link: FontAwesome এর সিএসএস ফাইলটি CDN থেকে লোড করা হয়েছে, যা FontAwesome আইকনগুলোকে ওয়েবপেজে প্রদর্শন করতে সক্ষম করে।
<i class="fas fa-home"></i>: এটি একটি FontAwesome আইকনকে HTML এর মধ্যে ব্যবহার করার পদ্ধতি। এখানে fa-home একটি FontAwesome আইকন এবং fas ক্লাসটি আইকন টির জন্য স্টাইল নির্ধারণ করে।
এখন, আপনি Materialize CSS এবং FontAwesome আইকন একসাথে ব্যবহার করতে পারবেন।
FontAwesome এর আইকন ব্যবহার করা
আপনি Materialize CSS এর বাটন, কার্ড, বা অন্যান্য উপাদানগুলিতে FontAwesome আইকন যোগ করতে পারেন। নিচে কিছু উদাহরণ দেওয়া হলো।
২. FontAwesome আইকন সহ Materialize বাটন
<a href="#" class="btn waves-effect waves-light"><i class="fas fa-thumbs-up"></i> Like</a>
<a href="#" class="btn waves-effect waves-light"><i class="fas fa-search"></i> Search</a>
এখানে:
- fa-thumbs-up এবং fa-search হল FontAwesome আইকন।
- waves-effect এবং waves-light ক্লাসগুলি Materialize CSS এর ওয়েভ ইফেক্ট এবং স্টাইলিং যোগ করতে ব্যবহৃত হয়।
৩. FontAwesome আইকন সহ Materialize কার্ড
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/500">
<span class="card-title"><i class="fas fa-camera-retro"></i> Camera</span>
</div>
<div class="card-content">
<p>This is a card with FontAwesome icon.</p>
</div>
</div>
এখানে:
- fa-camera-retro একটি ক্যামেরা আইকন, যা FontAwesome থেকে নেয়া হয়েছে এবং card-title এর মধ্যে ব্যবহৃত হয়েছে।
৪. FontAwesome আইকন সহ মেনু আইটেম
<ul class="collection">
<li class="collection-item"><i class="fas fa-home"></i> Home</li>
<li class="collection-item"><i class="fas fa-envelope"></i> Message</li>
<li class="collection-item"><i class="fas fa-cogs"></i> Settings</li>
</ul>
এখানে:
- fa-home, fa-envelope, fa-cogs হল বিভিন্ন FontAwesome আইকন যা Materialize এর collection-item এর মধ্যে ব্যবহার করা হয়েছে।
FontAwesome কাস্টমাইজেশন
আপনি FontAwesome এর আইকনগুলোর আকার, রঙ এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
১. আইকনের আকার পরিবর্তন
<i class="fas fa-home fa-3x"></i> <!-- Large icon -->
<i class="fas fa-camera fa-sm"></i> <!-- Small icon -->
এখানে:
- fa-3x: এটি আইকনের আকার তিনগুণ বড় করবে।
- fa-sm: এটি আইকনের আকার ছোট করবে।
২. আইকনের রঙ পরিবর্তন
<i class="fas fa-home" style="color: red;"></i>
<i class="fas fa-camera" style="color: green;"></i>
এখানে:
- style="color: red;" CSS এর মাধ্যমে আইকনের রঙ রেড (লাল) করা হয়েছে।
উপসংহার
FontAwesome আইকন লাইব্রেরি এবং Materialize CSS একসাথে ব্যবহার করা খুবই সহজ এবং এটি আপনার ওয়েবসাইটের ডিজাইনকে আরও আকর্ষণীয় করে তোলে। আপনি FontAwesome এর আইকনগুলো Materialize CSS এর বাটন, কার্ড, মেনু, এবং অন্যান্য UI উপাদানে যোগ করতে পারেন। এছাড়া আপনি আইকনের আকার, রঙ, এবং অন্যান্য স্টাইল কাস্টমাইজ করেও আরও সৃজনশীল এবং ইউজার-বান্ধব ইন্টারফেস তৈরি করতে পারেন। FontAwesome এবং Materialize CSS এর এই কম্বিনেশন আপনার ওয়েব ডিজাইনকে আরও আধুনিক এবং ইন্টারঅ্যাকটিভ করে তুলবে।
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 এর সাথে এই কাস্টম আইকনগুলি সহজেই স্টাইল এবং কাস্টমাইজ করা যায়, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে।
Materialize CSS-এ Icons এবং Buttons এর সমন্বয় তৈরি করা একটি সাধারণ কিন্তু অত্যন্ত কার্যকরী উপায়, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ইন্টারফেসকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি সহজেই icons (আইকন) এবং buttons (বাটন) এর মধ্যে সমন্বয় ঘটাতে পারেন, যাতে একটি আইকন এবং টেক্সটের সাথে বাটন তৈরি করা হয়, যা ব্যবহারকারীর জন্য আরও সহজ ও আকর্ষণীয় হয়।
এখানে Materialize CSS ব্যবহার করে icons এবং buttons এর সমন্বয় করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Materialize CSS-এ Icons এবং Buttons তৈরি করা
Materialize CSS একটি বিস্তৃত icon library সরবরাহ করে, যা Google Material Icons এর ভিত্তিতে তৈরি। আপনি এই আইকনগুলোকে বিভিন্ন buttons এর সাথে সমন্বয় করতে পারেন, যা ওয়েবসাইটে বিভিন্ন কার্যকরী বাটন তৈরি করতে সহায়তা করে।
১. Icon Button with Text
এখানে একটি আইকন বাটন তৈরি করা হলো, যেখানে একটি আইকন এবং টেক্সট একসাথে থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Button Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Icon Button with Text -->
<a class="waves-effect waves-light btn">
<i class="material-icons left">add</i>
Add Item
</a>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
waves-effect waves-light: এই ক্লাসগুলো ওয়েভ ইফেক্ট এবং হালকা ওয়েভ ইফেক্ট ব্যবহার করার জন্য।<i class="material-icons left">add</i>: এখানেmaterial-iconsক্লাসের মাধ্যমে Google Material Icons ব্যবহৃত হয়েছে এবংleftক্লাসের মাধ্যমে আইকনটি বাটনের বামে রাখা হয়েছে।- Add Item: টেক্সটটি বাটনের মধ্যে প্রদর্শিত হবে।
২. Icon Only Button
কখনো কখনো আপনি শুধুমাত্র একটি আইকন ব্যবহার করতে চাইবেন, যেখানে কোনো টেক্সট থাকবে না। এই ধরনের বাটন সাধারণত ছোট হতে পারে এবং শুধুমাত্র ইমেজ বা আইকন দ্বারা একটি কার্যকলাপ নির্দেশ করে।
<a class="waves-effect waves-light btn-small">
<i class="material-icons">edit</i>
</a>
কোড ব্যাখ্যা:
btn-small: এটি ছোট আকারের বাটন তৈরি করে।<i class="material-icons">edit</i>: এখানে edit আইকন ব্যবহার করা হয়েছে।
৩. Icon with Right-Aligned Text
এখানে, আইকন বাটনের মধ্যে আইকনটি ডান দিকে এবং টেক্সটটি বাম দিকে থাকবে।
<a class="waves-effect waves-light btn">
Edit
<i class="material-icons right">edit</i>
</a>
কোড ব্যাখ্যা:
right: এই ক্লাসের মাধ্যমে আইকনটিকে বাটনের ডান দিকে স্থাপন করা হয়েছে।- Edit: টেক্সটটি বাম দিকে থাকবে এবং আইকন ডান দিকে।
৪. Floating Action Button with Icon
Floating Action Button (FAB) হলো একটি বিশেষ ধরনের বাটন যা সাধারণত স্ক্রীনের নীচে স্থির অবস্থায় থাকে এবং একাধিক অ্যাকশন প্রদান করতে সহায়তা করে। এটি সাধারণত একটি বড় আইকনের সাথে ব্যবহার করা হয়।
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">add</i>
</a>
কোড ব্যাখ্যা:
btn-floating: এটি ফ্লোটিং অ্যাকশন বাটন তৈরি করে।btn-large: বড় আকারের বাটন তৈরি করে।red: বাটনের রঙ রেড (লাল) হবে।<i class="material-icons">add</i>: এখানে add আইকন ব্যবহার করা হয়েছে।
৫. Disabled Icon Button
কিছু সময় আপনি একটি নিষ্ক্রিয় বাটন তৈরি করতে চাইবেন, যা ব্যবহারকারীকে কোন অ্যাকশন নিতে দিতে না পারে। Materialize CSS এর মাধ্যমে নিষ্ক্রিয় বাটন তৈরি করা যায়।
<a class="waves-effect waves-light btn disabled">
<i class="material-icons left">delete</i>
Delete Item
</a>
কোড ব্যাখ্যা:
disabled: এই ক্লাসটির মাধ্যমে বাটনটিকে নিষ্ক্রিয় (disabled) করা হয়েছে।<i class="material-icons left">delete</i>: বাটনে delete আইকন ব্যবহার করা হয়েছে।
উপসংহার
Materialize CSS এর Icons এবং Buttons এর সমন্বয়ে আপনি সহজেই একাধিক আকর্ষণীয় এবং কার্যকরী বাটন তৈরি করতে পারেন। আইকন এবং টেক্সটের সমন্বয়, আইকন শুধুমাত্র বাটন, এবং Floating Action Button সহ বিভিন্ন ধরনের বাটন তৈরি করা খুবই সহজ। Materialize CSS এর আইকন লাইব্রেরি এবং বাটন ক্লাসের মাধ্যমে আপনি খুব সহজে এবং দ্রুত আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ বাটন যোগ করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করবে।
Read more
