আসসালামু আলাইকুম টেকটিউনস কমিউনিটি, কেমন আছেন সবাই? আশা করছি ভাল আছেন। বরাবরেই মত আজকেও চলে এসেছি নতুন টিউন নিয়ে।

সবচেয়ে জনপ্রিয় ফ্রি আইকন এবং ফন্ট হিসেবে আপনি নিশ্চয় Font Awesome এর সাথে পরিচিত। এই আইকন সেটটি ২০১২ সালে রিলিজ করা হয়। বর্তমানে এর রয়েছে ১৫৪৪ টির মত প্যাটার্ন রয়েছে। এই প্যাটার্ন গুলো মূলত, ফ্রি, ওপেন এবং অরিজিনাল ক্যাটাগরিতে ভাগ করা হয়। দুই ধরনের আইকন পাওয়া যায় যেমন, কোড এবং পেইড প্রো আইকন, যা পুরো ফন্ট স্ক্রিপ্ট ওয়েবসাইটের ২০% মার্কেট দখল করে আছে।

আমরা বিভিন্ন ওয়েবসাইটে যেসব আইকন বা প্যাটার্ন দেখি এর অধিকাংশই এখান থেকে এসেছে। আপনি পুরো আইকন সেটা অফিসিয়াল ওয়েবসাইট বা GitHub থেকে ডাউনলোড করে নিতে পারেন।

Line Awesome কী?

জনপ্রিয় ফ্রি আইকন প্রোভাইডার Icons8 এর একটি চমৎকার প্রোডাক্ট হচ্ছে Line Awesome। এটি আগে Fugue এর মত ফ্রি মিউজিক ম্যাটারিয়াল লাইব্রেরি এবং Moose Photos এর মত ফ্রি ইমেজ লাইব্রেরী নিয়ে এসেছিল। এটি Vector Creator নামে একটি সেলফ মেইড ভেক্টর  টুলও নিয়ে এসেছিল। কোম্পানিটি সম্প্রতি Line Awesome লঞ্চ করেছে। এটি Font Awesome এর ভিত্তিতেই তৈরি করা। তারা এখানে প্যাটার্ন গুলোকে লাইন আইকনে কনভার্ট করেছে যা নামেও পরিচিত।

Line Awesome, Font Awesome এর ১৩৮০ টি ফ্লাট আইকন প্যাটার্নকে কাভার করেছে। আইকন স্টাইল Icons8 Windows 10 ব্যবহার করে এবং এখানে ৪০০০ এর বেশি আইকন রয়েছে। আপনি Line Awesome এর অফিসিয়াল ওয়েবসাইট থেকে সব গুলো আইকন দেখতে পারবেন। ব্যবহারের আগে আপনি কনফার্ম হয়ে নিতে পারবেন আপনি কোনটি ব্যবহার করবেন।

Line Awesome icon সেট ইম্পোর্ট করাও অনেক সহজ। ওয়েবসাইট একটি CDN লিংক দেবে এটা দিয়েই আপনি ওয়েবসাইটে নির্দিষ্ট প্যাটার্ন এড করতে পারবেন। তাছাড়া আপনি ফুল প্যাকেজটিও ডাউনলোড করে নিতে পারেন। ডাউনলোড করে আপনি বিভিন্ন প্যাটার্নে আইকন গুলো পাবেন।

Line Awesome

অফিসিয়াল ওয়েবসাইট @ Line Awesome

কীভাবে ব্যবহার করবেন?

চলুন দেখে নেয়া যাক কিভাবে Line Awesome ব্যবহার করবেন

ধাপ ১

প্রথমে Line Awesome ওয়েবসাইট ওপেন করুন। আপনি যেকোনো আইকনে ক্লিক করে আইকন প্যাটার্নের প্রিভিউ দেখতে পারবেন। আপনি যেকোনো আইকনে ক্লিক করে আইকনের কোড কপি করে নিতে পারবেন।

ধাপ ২

Get Started এ ক্লিক করুন, কিভাবে আইকন গুলো ইন্সটল করবেন সেই সংক্রান্ত ইন্সট্রাকশন এখানে পেয়ে যাবেন। এই আইকন গুলো CDN দিয়ে লোড করা সবচেয়ে সহজ। এটি আপনার হোস্টিং এর স্পেস তো বাঁচাবেই একই সাথে ওয়েবসাইটের স্পীডও বাড়াবে। আপনি যদি ইতিমধ্যে Font Awesome icon সেট ব্যবহার করে থাকেন তাহলে এটির সাথে Line Awesome এর আইকন রিপ্লেস করতে পারবেন। অরিজিনাল প্যাটার্ন ঠিকই দেখাবে কেবল স্টাইল ভিন্ন হবে।

আপনি যদি নতুন প্রজেক্ট শুরু করতে চান তাহলে সোর্স কোডের দ্বিতীয় লাইনটি কপি করুন এবং পেজের টপে প্লাস করুন।

তাছাড়া আপনি পুরো জিপ ফরমেটেও Line Awesome ডাউনলোড করতে পারেন।

CDN অথবা হোস্ট যেভাবেই আইকন ফাইল লোড করুন, আপনি কিভাবে সেগুলো কন্টেন্টে প্লেস করে জানতে পারবেন এবং CSS দিয়ে কালার ও সাইজ এডজাস্ট করতে পারবেন।

ধাপ ৩

কিভাবে প্যাটার্নের স্টাইল নেম খুঁজে পাবেন? Line Awesome ওয়েবসাইট ওপেন করে প্যাটার্নের কিওয়ার্ড লিখে সার্চ দিন। যেমন battery লিখে সার্চ দিলে এই রিলেটেড সকল প্যাটার্ন চলে আসবে।

ধাপ ৪

যখন ব্যাটারি প্যাটার্নে ক্লিক করবেন তখন সেখানে বিভিন্ন সাইজ যেমন, 16px থেকে 64px, প্যাটার্ন পেয়ে যাবেন। সেখান থেকে সহজে কপি পেস্ট এর ব্যবস্থা রয়েছে। lar, las, এবং lab মূলত রেগুলার তিনটি স্টাইলকে রিপ্রেজেন্ট করে।

Line Awesome এর সুবিধা

চলুন Line Awesome ব্যবহারের কিছু সুবিধা দেখে নেয়া যাক।

• Icons8 এই আইকন গুলো Font Awesome থেকে মডিফাই করেছে
• এখানে তিন স্টাইলে ৪০০০ এর বেশি প্যাটার্ন খুঁজে পাবেন
• CDN দিয়ে দ্রুত লোডের ব্যবস্থা আছে অথবা ফাইল ডাউনলোড করে হোস্ট এর ব্যবস্থাও আছে।

শেষ কথা

আশা করছি যারা ওয়েব ডেভেলপমেন্ট নিয়ে কাজ করেন তাদের জন্য এই টিউনটি যথেষ্ট উপকারী হবে। এখন আপনারা চাইলেই চমৎকার সব আইকন প্যাটার্ন নিজের ওয়েবসাইটে লোড করে নিতে পারবেন। CDN এবং হোস্ট উভয় সুবিধা থাকার কারণে ডিজাইনাররা নিজেদের ইচ্ছে মত আইকন প্যাটার্ন ব্যবহার করতে পারবে।

তো কেমন হল আজকের এই টিউন, জানাতে অবশ্যই টিউমেন্ট করুন। পরবর্তী টিউন পর্যন্ত ভাল থাকুন, আল্লাহ হাফেজ।