Pure.CSS ফ্রেমওয়ার্ক নিজে কোনো ইন-বিল্ট আইকন প্যাক সরবরাহ করে না, তবে আপনি সহজেই অন্যান্য আইকন লাইব্রেরি যেমন FontAwesome ইন্টিগ্রেট করে আপনার ওয়েব পেজে আইকন ব্যবহার করতে পারেন। FontAwesome একটি জনপ্রিয় আইকন প্যাক যা হাজার হাজার আইকন প্রদান করে এবং এটি সহজেই Pure.CSS এর সাথে কাজ করে।
1. Pure.CSS এর সাথে FontAwesome ইন্টিগ্রেশন
FontAwesome একটি বহুল ব্যবহৃত আইকন লাইব্রেরি যা ওয়েব ডিজাইনে আইকন ব্যবহারকে সহজ করে তোলে। এটি টেক্সটের মতো আইকন ব্যবহারের সুবিধা প্রদান করে এবং সেগুলিকে CSS এর মাধ্যমে কাস্টমাইজ করা যায়।
FontAwesome CDN ইনস্টল করা:
প্রথমে FontAwesome সিএনডি (CDN) যুক্ত করুন, যাতে আপনি সরাসরি তাদের আইকন ব্যবহার করতে পারেন।
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
এটি আপনার head ট্যাগের মধ্যে যুক্ত করতে হবে।
2. Pure.CSS এর সাথে Icons ব্যবহার করা
এখন আপনি FontAwesome আইকনগুলি আপনার HTML ডকুমেন্টে ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেয়া হলো, যেখানে Pure.CSS এবং FontAwesome এর সাহায্যে আইকন এবং বাটন তৈরি করা হয়েছে।
Icons Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Button with Icons */
.icon-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.icon-btn i {
margin-right: 8px; /* Space between icon and text */
}
.icon-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<button class="icon-btn">
<i class="fas fa-play"></i> Play
</button>
<button class="icon-btn">
<i class="fas fa-pause"></i> Pause
</button>
<button class="icon-btn">
<i class="fas fa-stop"></i> Stop
</button>
</body>
</html>
ব্যাখ্যা:
- FontAwesome Icons: এখানে FontAwesome এর
fas fa-play,fas fa-pause, এবংfas fa-stopআইকনগুলি ব্যবহার করা হয়েছে। এগুলি FontAwesome আইকন ক্লাস যা বিভিন্ন আইকন প্রদর্শন করবে (প্লে, পজ, স্টপ)। iট্যাগ: FontAwesome আইকনগুলোকেiট্যাগের মধ্যে রাখা হয়েছে।iট্যাগের সাথে FontAwesome ক্লাস ব্যবহার করা হলে, আইকনটি স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।- Button Styling: Pure.CSS এর
pure-buttonক্লাস ব্যবহার করা হয়নি, তবে স্বয়ংক্রিয়ভাবে CSS দিয়ে আইকনের বাটন তৈরি করা হয়েছে।background-color,border-radius, এবংcursor: pointerএর মাধ্যমে বাটনের স্টাইলিং করা হয়েছে। - Spacing:
margin-right: 8px;ব্যবহার করে আইকন এবং টেক্সটের মধ্যে কিছু স্পেস রাখা হয়েছে।
3. FontAwesome এর সাথে Responsive Icons
Pure.CSS এবং FontAwesome এর সাহায্যে আপনি সহজেই রেসপনসিভ আইকন তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি রেসপনসিভ ইন্টারফেসে আইকন ব্যবহার করা হয়েছে।
Responsive Icons Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Container for Responsive Icons */
.icon-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
/* Icon Styling */
.icon-container i {
font-size: 3rem;
color: #4CAF50;
cursor: pointer;
transition: color 0.3s ease;
}
.icon-container i:hover {
color: #45a049;
}
/* For Small Screens */
@media screen and (max-width: 600px) {
.icon-container i {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="icon-container">
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>
</div>
</body>
</html>
ব্যাখ্যা:
- Flexbox for Icon Container:
display: flex;এবংjustify-content: center;ব্যবহার করে আইকনগুলোকে কেন্দ্রে সজ্জিত করা হয়েছে।gap: 20px;ব্যবহৃত হয়েছে আইকনগুলোর মধ্যে কিছু স্পেস যোগ করতে। - Icon Styling: আইকনের আকার
font-size: 3rem;দিয়ে সেট করা হয়েছে, এবং hover effect যোগ করা হয়েছে যাতে মাউস হোভার করলে আইকনের রং পরিবর্তিত হয়। - Responsive Design:
@media screen and (max-width: 600px)কুয়েরি ব্যবহার করে মোবাইল স্ক্রীনে আইকনের আকার ছোট করা হয়েছে।
4. FontAwesome Icons for Social Media Links
FontAwesome আইকনগুলো Social Media Links এর জন্য ব্যবহার করা হয়, যেমন Facebook, Twitter, LinkedIn ইত্যাদি। নিচে একটি উদাহরণ দেওয়া হলো যেখানে FontAwesome আইকনগুলি সোশ্যাল মিডিয়া বাটন হিসেবে ব্যবহৃত হয়েছে।
Social Media Icons Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Social Media Icon Buttons */
.social-icons a {
color: white;
background-color: #333;
padding: 15px;
margin: 5px;
border-radius: 50%;
font-size: 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
.social-icons a:hover {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="social-icons">
<a href="#" class="pure-button"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="pure-button"><i class="fab fa-twitter"></i></a>
<a href="#" class="pure-button"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>
ব্যাখ্যা:
- FontAwesome Social Media Icons: FontAwesome এর
fab fa-facebook-f,fab fa-twitter, এবংfab fa-linkedin-inআইকনগুলি ব্যবহার করা হয়েছে। - Button Styling:
border-radius: 50%;ব্যবহার করে আইকনগুলোকে গোলাকার বাটনে পরিণত করা হয়েছে।background-colorএবংhovereffect দিয়ে বাটনের রঙ পরিবর্তন করা হয়েছে।
Pure.CSS এর সাথে FontAwesome আইকন ব্যবহারের মাধ্যমে আপনি সহজেই ওয়েব পেজে সুন্দর এবং ইন্টারেক্টিভ আইকন যুক্ত করতে পারেন। FontAwesome এর বিশাল আইকন প্যাক ব্যবহার করে আপনি সোশ্যাল মিডিয়া আইকন, বাটন আইকন, নেভিগেশন আইকন, এবং অন্যান্য গ্রাফিক্যাল উপাদান যোগ করতে পারবেন। Pure.CSS এর সহজ স্টাইলিং সমর্থন দিয়ে আইকনগুলোকে সুন্দরভাবে কাস্টমাইজ করা সম্ভব।
Read more
