আইকনগুলি একটি অ্যাপ্লিকেশনে ব্যবহারকারী নিতে পারে এমন ক্রিয়াগুলি চিত্রিত করার জন্য ভাল কাজ করে। বেশ কয়েকটি আইকন লাইব্রেরি সহজেই উপলব্ধ। এখানে অনেকগুলির মধ্যে কয়েকটি রয়েছে:
- ফন্ট অসাধারন – https://fontawesome.com/
- ফ্ল্যাটিকন – https://www.flaticon.com/
- মেটেরিয়াল ডিজাইন আইকন - https://material.io/resources/icons/
উপরে উল্লিখিত আরও অনেকগুলি অবশ্যই আছে, কিন্তু এই নির্দেশিকাটির লক্ষ্য হল আপনাকে দেখানো যে কীভাবে আপনার প্রকল্পের জন্য উপরের লাইব্রেরিগুলির একটিকে ব্যবহার করতে হয় এবং শৈলী নিয়ন্ত্রণ করতে এটিকে লক্ষ্য করে। এছাড়াও, একবার আপনি একটি লাইব্রেরির জন্য প্রক্রিয়াটি শিখলে, এটি অন্যদের জন্য খুব অনুরূপ।
এই নিবন্ধে, আমরা Font Awesome Icon Library ব্যবহার করব। নীচের সম্পাদকে, <link>-এর দিকে লক্ষ্য রাখুন HTML নথির মাথায়। এটি একটি মিনিফাইড CSS ফাইল যা মূলত Font Awesome এর আইকনগুলির লাইব্রেরি উল্লেখ করে। "মিনিফাইড" মূলত এই সত্যটিকে বোঝায় যে সমস্ত হোয়াইটস্পেস চলে গেছে - তাই সত্যিই কোনও ফর্ম্যাটিং নেই।
যতক্ষণ আপনার কাছে এই সামগ্রী বিতরণ নেটওয়ার্ক থাকবে – CDN – <head>-এ , আপনি প্রায় সমস্ত ফন্ট অসাধারণের বিনামূল্যের লাইব্রেরি অ্যাক্সেস করতে সক্ষম হবেন৷ সেখানে একটি SVG লাইব্রেরিও রয়েছে, কিন্তু আমরা যখন JavaScript সম্পর্কে আরও কথা বলি তখন আমরা তাতে প্রবেশ করব।
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
উপরের সম্পাদকে, আপনি দেখতে পাবেন যে আমাদের দুটি ইনলাইন উপাদান রয়েছে, একটি <i> এবং একটি <span> উপাদান যেকোনও উপায় হল আপনার মার্কআপে আইকন লেখার একটি বৈধ উপায়। আমি ব্যক্তিগতভাবে <i> দেখেছি সবচেয়ে বেশি ব্যবহার করেছি, কিন্তু আমি <span>ও দেখেছি বিরল অনুষ্ঠানে।
আপনি দেখতে পাবেন যে উপাদানের বিষয়বস্তু খালি। ক্লাস অ্যাট্রিবিউট হল কিভাবে আমরা HTML ফাইলের মাথায় যে CSS ফাইলটি ঢোকিয়েছি তা ব্যবহার করে ফন্ট আশ্চর্যজনক লাইব্রেরি থেকে আমাদের প্রয়োজনীয় আইকনটি টেনে আনি।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
আপনি কি নিয়ে কাজ করছেন তা দেখতে যদি আপনি CSS ফাইলটি দেখতে চান তবে আপনি অবশ্যই তা করতে পারেন। যদিও এটি আপনাকে পাঠ্যের একটি প্রাচীর দেবে, তাই এটি কিছুটা অপ্রতিরোধ্য হতে পারে। শুধু জেনে রাখুন যে আপনার প্রোজেক্টে বিনামূল্যে আইকন সন্নিবেশ করার জন্য আপনার প্রয়োজনীয় সমস্ত তথ্য এতে রয়েছে।
আইকনের ক্লাস নামের দুটি অংশ রয়েছে:শৈলী উপসর্গ এবং আইকনের নাম। উপরের উদাহরণে, আমরা "fab" এবং "fas" দেখতে পাচ্ছি। "fa" এর অর্থ হল অসাধারন ফন্ট, "b" এর অর্থ ব্র্যান্ড এবং "s" এর অর্থ কঠিন। এছাড়াও অন্যান্য উপসর্গ আছে, কিন্তু এর জন্য একটি PRO অ্যাকাউন্ট প্রয়োজন।
আপনি যখন Font Awesome এর ওয়েবসাইটে আইকন গ্যালারিটি ব্যবহার করছেন তখন আইকনের নামটি পাওয়া যাবে। এটি সাধারণত আপনি উপরে যে নিয়মটি দেখছেন তা অনুসরণ করবে:“fa-<আইকনের নাম>”।
আইকনগুলিকে স্টাইল করার সময় এবং CSS এর মাধ্যমে পৃষ্ঠায় তাদের অবস্থান নিয়ন্ত্রণ করার সময় ইনলাইন উপাদানগুলির মতো আচরণ করা হয়৷ Font Awesome-এর আইকন স্টাইল করার বিষয়ে আরও তথ্যের জন্য, অনুগ্রহ করে তাদের ডক্স দেখুন, যা সত্যিই সহজ এবং আপনাকে ডকুমেন্টেশন পড়ার কিছু অনুশীলন করতে সাহায্য করবে। CSS ব্যবহার করে স্টাইলিং এর একটি উদাহরণ উপরের সম্পাদকে রয়েছে।
আইকনগুলির সাথে খেলতে এবং সেগুলি স্টাইল করা শুরু করতে উপরে স্যান্ডবক্স পরিবেশটি ব্যবহার করতে দ্বিধা বোধ করুন!
