ওয়াপকিজ সাইটে ফন্ট অসাম আইকন ব্যবহার করতে হয় কিভাবে?


ফন্ট অসাম(Font Awesome) একটি ফ্রি আইকন সার্ভিস যেটা ব্যবহার করে আপনি আপনার সাইট ডিজাইনের জন্য প্রয়োজনীয় আইকন গুলো কোনো প্রকার ইমেজ ছাড়াই বসাতে পারেন। এর সবথেকে ভালো দিক হলো এতে আপনি প্রয়োজনীয় সব আইকন পাবেন একদম ফ্রিতেই। এই পোস্ট এ ফন্ট অসাম আইকন ব্যবহারের সুবিধাগুলো এবং এটা কিভাবে ব্যবহার করতে হয় সে বিষয়ে আলোচনা করা হবে। তাহলে ঝাঁপিয়ে পড়ুন পুরো পোস্ট পড়ার জন্য।

ফন্ট অসাম আইকন ব্যবহারের সুবিধাগুলো:

  • সাইটে ইমেজ ব্যবহার করে আইকন দেওয়া হলে সাইট জুম করার পর সেটা খারাপ দেখায়। ফন্ট অসাম এর ক্ষেত্রে এই সমস্যা নেই।
  • প্রয়োজনীয় সব আইকন এর .png ইমেজ খুঁজে বের করা অনেক মুসকিল। কিন্তু ফন্ট অসাম এ সব দরকারি আইকন আছে।
  • ইমেজ আইকন ব্যবহারের ক্ষেত্রে আপনি যে কালারে আইকন ব্যবহার করতে চান সেই কালারের আইকন খুঁজে বের করা অনেক মুসকিল। ফন্ট অসাম এর ক্ষেত্রে আপনি সিএসএস দিয়েই আইকন এর কালার পরিবর্তন করতে পারবেন।
  • ফন্ট অসাম আইকন আপনি সিএসএস দিয়ে আপনার ইচ্ছা মত সাইজে ব্যবহার করতে পারবেন। একই কাজ ইমেজ দিয়ে করতে গেলে বড় বড় ইমেজ ব্যবহারের ফলে ওয়েবপেজ ভারি হয় ফলে ওয়েবপেজ লোড হতে সময় বেশি লাগে।

তো এই ছিলো ফন্ট অসাম ব্যবহারের সুবিধা। এছাড়াও আরো অনেক সুবিধা আছে। ব্যবহার করলে পরে বুঝতে পারবেন।

ওয়াপকিজ সাইটে ফন্ট অসাম ব্যাবহার করবেন যেভাবে

সাধারন ওয়েবপেজে ফন্ট অসাম আইকন ব্যবহার করতে হলে ফন্ট অসাম এর এক্সটারনাল সিএসএস লিঙ্ক হেড ট্যাগ এর মধ্যে বসাতে হয়। ওয়াপকিজ এর ক্ষেত্রে আপনাকে মেটা হেডারে ফন্ট অসাম এর সিএসএস লিঙ্ক বসাতে হবে। এর জন্য জাস্ট নিচের কোডটি কপি করে আপনার সাইটের মেটা হেডারে পেস্ট করে দিন তাহলেই ফন্ট অসাম এর সিএসএস ইনস্টল হয়ে গেলো।

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

এবার আপনি যে জায়গায় আইকন বসাতে চান সেখানে <i></i> ট্যাগ এ যে আইকন ব্যবহার করবেন সেটার ক্লাস এর নাম দিতে হবে। যেমন আমি যদি ফেসবুকের আইকন বসাতে চাই তাহলে আমাকে নিচের মতো কোড দিতে হবে। নিচের কোড এর মতোই যে কোনো আইকন ব্যবহারের ক্ষেত্রে ওই আইকন এর ক্লাস এর নাম দিতে হবে। এখানে class="fa fa-facebook" এ fa হলো ফন্ট অসাম এর ক্লাস নাম এবং fa-facebook হলো ফেসবুক আইকন এর ক্লাস এর নাম।

  <i class="fa fa-facebook"></i>

ফন্ট অসাম আইকন গুলো পাবেন কিভাবে?

ফন্ট অসাম এর যে কোনো আইকন এর ক্লাস এর নাম পেতে জাস্ট গুগল সার্চ করেই পেয়ে যাবেন। যে কোনো আইকন এর ক্লাস এর নাম পেতে "Font Awesome Facebook Icon" এভাবে গুগল সার্চ করুন। "Facebook" এর জায়গায় আপনি যে আইকন খুঁজছেন সে আইকন এর নাম দিবেন তাহলেই পেয়ে যাবেন। অথবা সরাসরি গুগলে "Font Awesome" লিখে সার্চ করে ফন্ট অসাম এর ওয়েবসাইটে ঢুকে সেখানে থাকা সার্চ বক্সে যে কোনো আইকন সার্চ করতে পারেন।


তো বন্ধুরা এই ছিলো আজকের পোস্ট। আশা করি আপনাদের কাজে আসবে। পোস্ট টা ভালো লাগলে আপনার বন্ধুদের সাথে শেয়ার করুন। আগামী পোস্ট নিয়ে আসছি শীঘ্রই। ততক্ষণ আমাদের সাথেই থাকুন, ধন্যবাদ।

Post a Comment

1 Comments

  1. অনেক দরকারি পোস্ট ছিল ব্রো, শুধু যে এটা দরকারি টা না, প্রায় সবগুলো পোস্ট দরকারি...

    ReplyDelete