লেখক: প্রত্যেক ব্লগারই তাদের কাঙ্খিত ব্লগটি-কে মনের মত করে ডিজাইন করতে চান। সবাই ব্লগ-কে প্রফেশনাল মানের করার জন্য চেষ্টার কোন ত্রুটি রাখেন না। কিন্তু দেখা যায় ওয়েব ডেভেলপমেন্ট সম্পর্কে অপার্যপ্ত জ্ঞান থাকার কারনে সবার পক্ষে ডিজাইন করা সম্ভব হয় না। আজকের এই পোষ্টির মাধ্যমে আপনি অন্তত বিভিন্ন রকম আইকন ব্যবহার করে আপনার ব্লগটি-কে কিছুটা হলেও প্রফেশনাল Look করতে পারবেন। আপনারা নিশ্চয় দেখে থাকেন যে, অনেক ব্লগ এবং ওয়েবসাইটে বিভিন্ন রকম আকর্ষণীয় ডিজাইনের আইকন ব্যবহার করা হয়। কিন্তু এ গুলি-কে ইমেইজ আকারে কোথাও খুজে পাওয়া যায় না। প্রকৃতপক্ষে ঐ গুলি কোন ইমেজ নয়। এ গুলি হচ্ছে এক ধরনের Font আইকন। যা একটি ওয়েবসাইটকে যেমনি আকর্ষণীয় করে তেমনি এর অনেক স্পিডও বাড়ীয়ে তুলে। ওয়েবসাইটে বেশী পরিমানে ইমেজ ব্যবহার করার ফলে যে বাড়তী চাপ পড়তো, এই Font আইকন ব্যবহারের ফলে আপনার ব্লগ/ওয়েবসাইট এই বাড়তী চাপ হতে রেহাই পাবে।
Font Awesome Icons কি?
Font Awesome হচ্ছে এক ধরনের iconic font, যা ডিজাইন করা হয়েছে Bootstrap এর মাধ্যমে। এটি হচ্ছে এক ধরনের SVG (Scalable Vector Graphic) আইকন, যা আপনি ইচ্ছা করলে Customize করতে পারবেন এবং যে কোন ধরনের ব্লগ কিংবা ওয়েবসাইটে ব্যবহার করতে পারবেন। এই আইকন গুলি কোন নির্দিষ্ট আকারে Fixed করা নয়। আপনি ইচ্ছা করলে যে কোন সাইজের আইকন ব্যবহার করতে পারবেন। ছোট কিংবা বড় যে কোন ধরনের আইকন ব্যবহার করলে এর Graphically কোন পরিবর্তন হবে না। তাছাড়া আপনি ইচ্ছা করলে Css কোড ব্যবহার করে এটিতে যে কোন ধরনের কালার ইফেক্ট দিতে পারবেন। আপনি আমার ব্লগের ম্যানুবারের দিকে লক্ষ্য করলেই দেখবেন যে, আমি Font Awesome ব্যবহার করে কয়েকটি আইকন তৈরী করেছি।Font Awesome আইকন এর দুটি ভিন্ন দুটি ভার্সন রয়েছে। একটি হচ্ছে 4.0.0 থেকে 4.7.0 এবং আরেকটি হচ্ছে 5.0.0 থেকে ততোর্ধ। এই দুটি ভার্সন ব্যবহার করা আলাদা আলাদা নিয়ম রয়েছে। আমরা এখানে শুধুমাত্র 4.0.0 থেকে 4.7.0 ব্যবহার করার পূর্ণাঙ্গ টিউটোরিয়াল শেয়ার করব।
কিভাবে Font Awesome 4.0 ব্যবহার করবেন?
নিচের ছোট্ট এই ট্রিকসটি অনুসরণ করে আপনি ব্লগ কিংবা ওয়েবসাইটের যে কোন Html ও Web পেজে এই আইকন যুক্ত করতে পারবেন। নিচে দেখুন -- প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ড হতে Theme > Edit HTML এ ক্লিক করুন।
- এরপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
- নিচের লাইনটি কপি করে </head> এর উপরে পেষ্ট করুন।
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.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> টি ব্যবহার করতেই হবে।
আইকন কাষ্টমাইজঃ
- আপনি ইচ্ছে করলে নিচের Css কোডটি ব্যবহার করে আপনার Font আইকন গুলির সাইজ, কালার এবং বোর্ডারসহ আরও অনেক পরিবর্তন করতে পারবেন। উদাহরন স্বরূপ আমি Home আইকনটি দেখাচ্ছি -
.fa-home {
font-size:20px;
color:#000000;
padding:5px;
border:1px solid #000;
float:left;
}
font-size:20px;
color:#000000;
padding:5px;
border:1px solid #000;
float:left;
}
- এভাবে আইকন কাষ্টমাইজ করার সময় প্রত্যেকটি আইকন এর নামানুসারে Css কোড ব্যবহার করতে হবে। নিচে আমরা আরও কয়েক প্রকারের উদাহরণ দিচ্ছি-
বড় আইকন যুক্ত করাঃ
- বড় আইনের জন্য fa-lg তার পর ধারাবাহিকভাবে fa-2x, fa-3x, fa-4x, ও fa-5x ক্লাসগুলি যুক্ত করে দিলে ৩৩% করে বৃদ্ধি পেতে থাকবে। নিচে দেখুন -
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
- আউটপুট নিচের মত দেখাবে।
Animated Icons যুক্ত করাঃ
- আইকন ঘুরানোর জন্য fa-spin এবং আইকন ৮ টি স্টেপে ঘুরানোর জন্য fa-pulse ব্যবহার করতে হবে। নিচে দেখুন কিভাবে করবেন -
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
- আউটপুট নিচের মত দেখাবে।
Stacked Icons যুক্ত করাঃ
- এখানে fa-stack হচ্ছে মূল Class এবং fa-stack-1x ও fa-stack-2x এর মাধ্যমে আইকনের সাইজ বড় ছোট করতে পারবেন এবং fa-inverse এর মাধ্যমে আইকনের কালার পরিবর্তন করা যাবে। নিচে দেখুন -
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
- আউটপুট নিচের মত দেখাবে।
Fixed Width Icons যুক্ত করাঃ
- আইকনের পরে fa-fw যুক্ত করে দিলেই হবে। এই আইকনগুলির মাপ নির্ধারিত করে দেয়া। নিচে দেখুন -
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
