ব্লগার টেমপ্লেটে কিভাবে Font Awesome Icons ব্যবহার করবেন?
Font Awesome হচ্ছে এক ধরনের iconic font, যা ডিজাইন করা হয়েছে Bootstrap এর মাধ্যমে। এটি হচ্ছে এক ধরনের SVG (Scalable Vector Graphic) আইকন
প্রত্যেক ব্লগারই তাদের কাঙ্খিত ব্লগটি-কে মনের মত করে ডিজাইন করতে চান। সবাই ব্লগ-কে প্রফেশনাল মানের করার জন্য চেষ্টার কোন ত্রুটি রাখেন না। কিন্তু দেখা যায় ওয়েব ডেভেলপমেন্ট সম্পর্কে অপার্যপ্ত জ্ঞান থাকার কারনে সবার পক্ষে ডিজাইন করা সম্ভব হয় না। আজকের এই পোষ্টির মাধ্যমে আপনি অন্তত বিভিন্ন রকম আইকন ব্যবহার করে আপনার ব্লগটি-কে কিছুটা হলেও প্রফেশনাল Look করতে পারবেন।
Font Awesome Icons কি?Font Awesome হচ্ছে এক ধরনের iconic font
কিভাবে 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 এর অফিসিয়াল ওয়েবসাইট থেকে আপনার পছন্দের আইকনটি বেছে নিতে পারেন।
<i class=”fa fa-home”></i>
.fa-home {
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>
3 thoughts on "ব্লগার টেমপ্লেটে কিভাবে Font Awesome Icons ব্যবহার করবেন?"