প্রত্যেক ব্লগারই তাদের কাঙ্খিত ব্লগটি-কে মনের মত করে ডিজাইন করতে চান। সবাই ব্লগ-কে প্রফেশনাল মানের করার জন্য চেষ্টার কোন ত্রুটি রাখেন না। কিন্তু দেখা যায় ওয়েব ডেভেলপমেন্ট সম্পর্কে অপার্যপ্ত জ্ঞান থাকার কারনে সবার পক্ষে ডিজাইন করা সম্ভব হয় না। আজকের এই পোষ্টির মাধ্যমে আপনি অন্তত বিভিন্ন রকম আইকন ব্যবহার করে আপনার ব্লগটি-কে কিছুটা হলেও প্রফেশনাল Look করতে পারবেন। আপনারা নিশ্চয় দেখে থাকেন যে, অনেক ব্লগ এবং ওয়েবসাইটে বিভিন্ন রকম আকর্ষণীয় ডিজাইনের আইকন ব্যবহার করা হয়। কিন্তু এ গুলি-কে ইমেইজ আকারে কোথাও খুজে পাওয়া যায় না। প্রকৃতপক্ষে ঐ গুলি কোন ইমেজ নয়। এ গুলি হচ্ছে এক ধরনের Font আইকন। যা একটি ওয়েবসাইটকে যেমনি আকর্ষণীয় করে তেমনি এর অনেক স্পিডও বাড়ীয়ে তুলে। ওয়েবসাইটে বেশী পরিমানে ইমেজ ব্যবহার করার ফলে যে বাড়তী চাপ পড়তো, এই Font আইকন ব্যবহারের ফলে আপনার ব্লগ/ওয়েবসাইট এই বাড়তী চাপ হতে রেহাই পাবে।
Font Awesome Icons কিঃ Font Awesome হচ্ছে এক ধরনের iconic font, যা ডিজাইন করা হয়েছে Bootstrap এর মাধ্যমে। এটি হচ্ছে এক ধরনের SVG (Scalable Vector Graphic) আইকন, যা আপনি ইচ্ছা করলে Customize করতে পারবেন এবং যে কোন ধরনের ব্লগ কিংবা ওয়েবসাইটে ব্যবহার করতে পারবেন। এই আইকন গুলি কোন নির্দিষ্ট আকারে Fixed করা নয়। আপনি ইচ্ছা করলে যে কোন সাইজের আইকন ব্যবহার করতে পারবেন। ছোট কিংবা বড় যে কোন ধরনের আইকন ব্যবহার করলে এর Graphically কোন পরিবর্তন হবে না। তাছাড়া আপনি ইচ্ছা করলে Css কোড ব্যবহার করে এটিতে যে কোন ধরনের কালার ইফেক্ট দিতে পারবেন। আপনি আমার ব্লগের ম্যানুবারের দিকে লক্ষ্য করলেই দেখবেন যে, আমি Font Awesome ব্যবহার করে কয়েকটি আইকন তৈরী করেছি।
কি ভাবে ব্লগে Font Awesome Icon যুক্ত করবেনঃ নিচের ছোট্ট এই ট্রিকসটি অনুসরণ করে আপনি ব্লগ কিংবা ওয়েবসাইটের যে কোন Html ও Web পেজে এই আইকন যুক্ত করতে পারবেন। নিচে দেখুন -
- প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
- এরপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
- নিচের লাইনটি কপি করে </head> এর উপরে পেষ্ট করুন।
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>
- এরপর Save Template এ ক্লিক করুন।
উপরের এই লিংকটির মাধ্যমে Font Awesome আইকন এর Css কোডগুলি আপনার ব্লগের সাথে যুক্ত হয়ে গেল। আপনি ইচ্ছা করলে আপনার নিজস্ব সার্ভারের এই কোডগুলি আপলোড করে ব্যবহার করতে পারবেন। এখন আপনাদের দেখাবো কিভাবে আপনার কাঙ্খিত পেজে বা জায়গা এই আইকন গুলি ব্যবহার করবেন।
- এখন আপনাকে বেছে নিতে হবে যে, কোন কোডটি আপনার পেজে/টেমপ্লেটে ব্যবহার করত চান। এই জন্য আপনি Font Awesome এর অফিসিয়াল ওয়েবসাইট থেকে আপনার পছন্দের আইকনটি বেছে নিতে পারেন।
- ওখান থেকে পছন্দের আইকনটি বেছে নেওয়ার জন্য সার্চ বারে আইকনটির নাম লিখে তার উপরে ক্লিক করলে নিচের মত একটি করে Class দেখতে পাবেন। নিচে দেখুন
<i class="fa fa-home"></i>
- উপরের Class টির লাল অংশটি হচ্ছে আপনার কাঙ্খিত আইকন এর নাম। এই অংশে বিভিন্ন ফন্টের নাম দিয়ে আপনি ভিন্ন ভিন্ন আইকন ব্যবহার করতে পারবেন। তবে প্রত্যেকবারই এই <i class="fa fa-name"></i> টি ব্যবহার করতেই হবে।
