Material Design Lite (MDL) একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতিগুলি অনুসরণ করে। MDL আপনাকে Material Icons ব্যবহারের মাধ্যমে ওয়েবসাইটে আইকন যোগ করার সুযোগ দেয়। তবে, আপনি যদি আপনার নিজস্ব Custom Icons বা Icon Fonts যোগ করতে চান, তবে সেগুলি খুব সহজেই MDL-এ ইন্টিগ্রেট করা যায়।
এখানে আমরা আলোচনা করব কিভাবে MDL-এ Custom Icons এবং Icon Fonts যোগ করা যায়।
MDL এ Material Icons যোগ করা
MDL, Material Icons নামক একটি স্ট্যান্ডার্ড আইকন প্যাকেজের সঙ্গে আসে, যা গুগল কর্তৃক তৈরি এবং ওয়েবসাইট ডিজাইনে ব্যবহৃত হয়। MDL-এ Material Icons ব্যবহার করতে খুব সহজ।
ধাপ ১: Material Icons CSS লিঙ্ক করা
MDL-এর সঙ্গে Material Icons ব্যবহারের জন্য আপনাকে Google Fonts এর Material Icons ফন্ট যোগ করতে হবে।
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
এটি আপনার HTML ডকুমেন্টের <head> ট্যাগের মধ্যে যোগ করতে হবে।
ধাপ ২: আইকন ব্যবহার করা
Material Icons ব্যবহার করার জন্য আপনাকে শুধুমাত্র <i> ট্যাগের মধ্যে আইকনের নাম লিখতে হবে। উদাহরণস্বরূপ, একটি "home" আইকন ব্যবহার করা হলে তা এমন হবে:
<i class="material-icons">home</i>
এটি একটি home আইকন প্রদর্শন করবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Lite Icons</title>
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Material Icon Example -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="material-icons">home</i> Home
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে, একটি home আইকন বাটনের মধ্যে ব্যবহার করা হয়েছে।
Custom Icons এবং Icon Fonts যোগ করা
আপনি যদি MDL-এ Custom Icons বা আপনার নিজস্ব Icon Fonts ব্যবহার করতে চান, তবে সেগুলি Font Awesome অথবা অন্য কোনো SVG Icon প্যাকেজ ব্যবহার করে যোগ করতে পারেন।
Font Awesome Icons যোগ করা
Font Awesome আইকন ব্যবহার করার জন্য, প্রথমে আপনাকে Font Awesome এর সিএসএস ফাইল লিঙ্ক করতে হবে।
ধাপ ১: Font Awesome CDN লিঙ্ক
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
ধাপ ২: আইকন ব্যবহার করা
Font Awesome আইকন ব্যবহার করার জন্য আপনি <i> ট্যাগ ব্যবহার করবেন এবং প্রয়োজনীয় আইকনের ক্লাস যোগ করবেন।
<i class="fas fa-camera"></i>
এটি একটি camera আইকন প্রদর্শন করবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Custom Icons Example</title>
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Font Awesome Icon Example -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="fas fa-camera"></i> Camera
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে, Font Awesome আইকনের camera আইকন ব্যবহার করা হয়েছে।
SVG Icons যোগ করা
আপনি যদি নিজস্ব SVG Icons ব্যবহার করতে চান, তাহলে সেগুলি সরাসরি HTML-এ ইনলাইন হিসেবে ব্যবহার করতে পারেন।
উদাহরণ:
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L2 7v10l10 5 10-5V7l-10-5z"></path>
</svg>
এটি একটি Home আইকন প্রদর্শন করবে যা SVG ফর্ম্যাটে রয়েছে।
সারাংশ
Material Design Lite (MDL)-এ Custom Icons এবং Icon Fonts যোগ করা খুবই সহজ। আপনি Material Icons ব্যবহার করতে চাইলে গুগলের Google Fonts CDN লিঙ্ক যোগ করলেই তা সহজেই ওয়েবসাইটে ব্যবহার করা যাবে। এছাড়া, Font Awesome বা SVG Icons যোগ করেও আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইউজার ফ্রেন্ডলি করা যায়। MDL-এর সহজ কাস্টমাইজেশন এবং ইন্টিগ্রেশন সুবিধা আপনাকে দ্রুত এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে সাহায্য করে।
Read more
