Image 01:

Image 02:

Image 03:

Image 04:

বণনা: উপরের ছবি দেখে কি বুঝলেন? নিশ্চই এই ধরনের আইকন আপনি বিভিন্ন ওয়েব সাইটে দেখেছেন। আপত দৃষ্টিতে মনে হতে পারে Photoshop দিয়ে এই সমস্ত icon এর ডিজাইন করা হয়েছে। আবার যারা একটু বুদ্ধিমান। তারা বলবে কি দরকার এত কিছুর google search দিলে হাজার হাজার ফ্রি Icon পাওয়া যায়। যেটা দরকার সেটাই বসিয়ে দিলাম আমার সাইটে। কিন্তু এই ভাবে আর কয়দিন? দেখা যাবে যে Photoshop দিয়ে ছবি কাটা কাটি করতেই আপনার মেজাজ খারাপ হয়ে যাবে। আর সবচে বেশি যে সমস্যায় পরবেন তা হল আপনার সাইটের সাথে Icon এর কালার এর কোন মিল নাই। এই সকল সমস্যার সমাধান নিয়ে এসেছে Font Awesome নামে একটি CSS file
সুবিধা সমূহ:
১. Photoshop দিয়ে আইকন ডিজাইন বা আইকন কাস্টমাইজ করার কোন দরকার নাই।
২. আপনি যেখানে এই আইকন ব্যবহার করবেন ঠিক সেই স্থানের কালার এর সাথে মিল রেখেই অটোমেটিক Icon এর কালার পরিবতন হয়ে যাবে।
৩. কত বড় আইকন দরকার আপনার? কোন টেনশন এর কারণ নাই । শুধু Value পরিবর্তন করলেই আইকন এর সাইজ ও পরিবর্তন হয়ে যাবে।
৪. আমার মনে হয় এখানে যে পরিমান আইকন ডিজাইন করা আছে তার বেশি একটি আইকন ও দরকার নাই।
৫. মাত্র একটি CSS file এবং একটি font নামে একটি Folder লাগবে আপনার এই কাজ করার জন্য।
৬. সবচে বড় কথা সব কিছুই ফ্রি। এবং তাদের ওয়েব সাইটে বিস্তারিত বণনা দেওয়া আছে।
৭.   <i class='icon-download'></i>এতটুকু লিখা  কল করলেই চলে আসবে আইকন।

যা যা লাগবে:
১. মাত্র একটি CSS file
২. Font নামে একটি Folder লাগবে
সবাই পাবেন http://fortawesome.github.io/Font-Awesome/
আর আমি সব Zip File দিয়ে দিব।

File structure:

১. CSS folder a মাত্র একটি ফাইল থাকবে font-awesome.min.css নামে। কোন কিছু পরিবর্তন করার দরকার নাই।
২. Font নামে ফোল্ডারটি ধরার দরকার নাই। যেভাবে আছে ঠিক সেই ভাবে রেখে দিন।এর মধ্যে কিছু ফন্ট আছে খুব বেশি ইন্টারেশ্টিং ফিল করলে ওপেন করে দেখতে পারেন। তবে কোন কিছু পরিবর্তন করার দরকার নাই।
৩. Index.html মূলত আমরা এই পেইজে Icon গুলো ব্যবহার করব।

Index.html Page Structure:

১. font-awesome.min.css ফাইলটি যুক্ত করতে হবে। যুক্ত করার লাইন হল :    <link rel="stylesheet" href="css/font-awesome.min.css" />
২. আমাদের কাজ শেষ এখন শুধু যেখানে icon প্রয়োজন যেখানে ছোট একটি লাইন দিয়ে Call করলেই Icon হাজির হবে। লাইনটি হল: <i class='icon-download'></i>
এখানে “icon-download” হল আইকন এর নাম। যে আইকন প্রয়োজন সে আইকন এর নাম লিখলেই আইনক এসে পড়বে। তা হলে এত আইকন এর নাম আপনি কোথায় পাবেন?
http://fortawesome.github.io/Font-Awesome/icons/ সব আইকন এর নাম ও আইকন দেওয়া আছে শুধু আপনি পছন্দ করুন কোনটি আপনার লাগেব।
৩. উপরের index.html পেইজ্র আউটপুট: দেখেন সব আইকন এর সাইজ সমান কিন্তু Home বাটর এর Icon টি একটু বড় কারণ কোড এ দেখুন যে যেখানে বলা হয়েছে যে

<h1 style="color:orange;">Home <i class="icon-home icon-3x"></i></h1>

Home

মানে এখানে “icon-home” হল আইকন এর নাম কিন্তু এর সাথে আর একটি ক্লাস যুক্ত করা হয়েছে “icon-3x” যার কারনে এটি ৩ গুন বড় হয়ে গেছে । আপনার আর বড় আইকন দরকার হলে আর ও বাড়াতে পারেন।

৪. দেখেন আমার লিখার কালার এর সাথে Automatic কালার পরিবর্তন হয়ে গেছে। সবচে বড় কথা হল যে আমরা যে Icon ব্যবহার করছি তা কোন Image ও না। ফলে খুব সহজেই আপনি তা যে কোন স্থানে ব্যবহার করতে পারেন। কার কোন সমস্যা হলে অবশ্যই জানাবেন। আর ভূল-ট্রুটি নিজ গুণে ক্ষমা করবেন।
ধন্যবাদ সবাইকে ।

Download Link 1:

https://docs.google.com/file/d/0B8Pd8Sl9KFnwMEUwNGhaRFMzWjg/edit?usp=sharing
Download Link 2:
https://copy.com/dIA8s2I3zQWU

ফেইসবুকে আমি: http://facebook.com/mehedi6060
Or mail: [email protected]