ফন্ট-অসাম ফাইভ আসল, আসেন দেইখা আসি গিয়া (fontawesome 5 released)

প্রথমেই দুঃসংবাদ দেই। ফন্ট-অসাম ফাইভের যে অংশটা অসাম, সেইটা প্রিমিয়াম। মাগনা ইউজ করা যাবে না।

 

আমরা যারা ওয়েবফন্ট আইকন ইউজ করি, তারা জানি যে, প্রতিটা আইকন প্যাকেজের প্রতিটা আইকনের জন্য একটা প্রি-ফিক্স ক্লাস থাকে এবং আরেকটা ক্লাস থাকে আইকনের জন্য। যেমন ফন্ট-অসামের (font-awesome) এর জন্য fa

f for – font
a for – awesome

আবার অনেক প্যাকেজ থাকে যেগুলোতে প্রি-ফিক্স ক্লাস ইউজ করা হয় না। বরং প্রি-ফিক্সের পরিবর্তে প্রতিটা ক্লাসের প্রথম অংশটাকে Ampersand সাইন ( ^ ) দিয়ে সিলেক্ট করা হয়। যেমন- flaticon, এই ফ্ল্যাট-আইকনের প্রি-ফিক্সিং -এর জন্য আলাদা কোন ক্লাস ইউজ করা হয় না। প্রতিটা আইকনের ক্লাসের প্রথম অংশ থাকে flaticon-

আর CSS এর মধ্যে এভাবে সিলেক্ট করা হয়- [class^=”flaticon-“] {…}

^ চিহ্নটি কিভাবে কাজ করে এবং এমন আরও অনেক চিহ্ন নিয়ে আলোচনা করা হয়েছে এই পোস্টে। যারা পোস্টটি দেখেননি, এখন দেখে নিতে পারেন।

প্রথম আলোচনা – প্রি-ফিক্স ক্লাস

তো … ফন্ট-অসাম হইল সবচে’ জনপ্রিয় ফ্রী আইকন প্যাকেজ, মানে …. এতদিন পর্যন্ত ছিল আর কি। এখন এর একটা অংশ প্রিমিয়াম হয়ে গেছে। নতুন এই আপডেটে যে পরিবর্তনগুলা করা হইছে, তার মধ্যে সর্বপ্রথম আলোচনা করবো, ফন্ট-অসামের প্রি-ফিক্স ক্লাস নিয়ে। অর্থাৎ- fa নিয়ে।

নতুন আপডেটে ফন্ট-অসামের প্রি-ফিক্স ক্লাস মোট চারটা, নিচে ফুল-ফর্মসহ প্রি-ফিক্স ক্লসগুলো দেয়া হল-

Style Style Prefix Code Demo
font awesome solid fas <i class=”fas fa-*”>
font awesome regular far <i class=”far fa-*”>
font awesome light PRO fal <i class=”fal fa-*”>
font awesome brands fab <i class=”fab fa-*”>

 

লাইট ভার্সনের আইকন সবগুলাই প্রিমিয়াম করা,  প্রিমিয়াম ভার্সনের আরও অনেক ফিচার আছে। আর আমরা সব ফিচার নিয়া কথা বলবও না। কারণ সবগুলা নিয়া কথা বলতে গেলে হুদাই সময় নষ্ট হইবো। শুধু ঐ বিষয়গুলা নিয়াই কথা বলবো, যেগুলো সাধারণত সবারই লাগে, এবং এই বিষয়গুলোর কি কি আপডেট হইছে- এই সব।

দ্বিতীয় আলোচনার বিষয় হইল fonts ফোল্ডার

আমরা জানি ফন্ট-অসামের ফন্টগুলো fonts নামের একটা ফোল্ডারে রাখতে হতো। আপডেট ভার্সনে এই ফোল্ডারের নাম চেঞ্জ করে রাখা হইছে- webfonts

fonts নামের ফোল্ডারটি আমরা আগে যেখানে রাখতাম, এই webfonts নামের ফোল্ডারটিও সেই একই জাগায় রাখতে হবে। তবে আপনি যদি লোকেশান চেঞ্জ করতে চান, তাহলে ফন্ট-অসামের .css বা min.css ফাইলটিতে Ctrl+f এর মাধ্যমে url লেখাটি সার্চ করুন, সবগুলো ফন্টের লিঙ্ক পেয়ে যাবেন। তারপর আপনার ইচ্ছেমত লোকেশান দিয়ে নিন।

ফোল্ডারের কথার শেষে আরেকটি গুরুত্বপূর্ণ আপডেটের কথা আলোচনা করি। আগের ভার্সনের ফাইলটি ওপেন করলে কিছু CSS ফোল্ডার আর একটি ফন্টের ফোল্ডারসহ আরও কিছু ভোংচোং ফাইল থাকতো। কিন্তু আপডেটেড ভার্সনের ফাইলটি ওপেন করলে পাঁচটি ফোল্ডার, একটি লাইসেন্স এবং একটি README ফাইল পাবেন। আমরা যারা ফন্ট-অসাম সাধারণভাবে ব্যবহার করি, এই আমাদের প্রয়োজনীয় ফোল্ডারটির নাম হলো- web-fonts-with-css

উল্লিখিত পাঁচটি ফোল্ডার থেকে এই ফোল্ডারটি আলাদা করে আমরা আমাদের নিয়মিত কাজ শুরু করতে পারি। আরও যে ছোটখাট কিছু কথা আছে ফাইল এবং ফোল্ডার নিয়ে, সেগুলো বলা লাগবে না। আপনারা আশা করি নিজেই বুঝতে পারবেন। আর বুঝতে না পারলে তো ফন্ট-অসামের অফিসিয়াল সাইটের ডক আর গুগল তো আছেই। ওকে … নেক্সট—-

 

তৃতীয় আলোচ্য বিষয় হলো- ইউনিকোড (Unicode)

আমরা যারা বিভিন্ন ফন্ট প্যাকেজ নিয়ে কাজ করে অভ্যস্ত, তারা অনেকেই জানেন যে, ফন্ট-অসামের যে আইকনগুলো, সেগুলো মূলত তার ক্লাসের :before সিলেক্টরের content প্রোপার্টির ভ্যালু থেকে নিয়ন্ত্রিত, আর এই ভ্যালুটি মূলত একটি ইউনিকোড। তো আগের ভার্সনে কোন একটি আইকনের পেইজে আমরা যখন তার ক্লাসটি কপি করতাম, তখন তার উপরেই সেই আইকনের ইউনিকোডটা দেয়া থাকতো, নিচের ছবিটা দেখুন, পরিষ্কার বুঝতে পারবেন-

 

নতুন ভার্সনে অন্যান্য পেইজের মত এই সিঙ্গেল আইকনের পেইজের ডিজাইনও পুরোপুরি চেঞ্জ করে ফেলা হয়েছে। নতুন ডিজাইনের এই পেইজে ইউনিকোড দেয়া হয়েছে দুই জাগায়। প্রথমটা উপরে বামে আর দ্বিতীয়টা দেয়া হয়েছে পেইজের মাঝখানে, অন্যান্য ডিটেইলসের সাথে। নিচের ছবি দু’টো দেখুন-

 

দ্বিতীয় ছবি

 

ফন্ট-অসামের এবারের আপডেটে অনেক অনেক নতুন ফিচার রয়েছে। এখানে শুধু সেই বিষয়গুলো নিয়েই আলোচনা করলাম, যেগুলো জানলে ফন্ট-অসামের নতুন ভার্সন দিয়ে আমরা আগের মতই কাজ করতে পারবো কোন সমস্যা ছাড়া। আর এই কমন বিষয়গুলোর মধ্যেও যে সবকিছুর আলোচনা করেছি, তাও না। যেমন- আইকনের সাইজের জন্য ফন্ট-অসামে যে ক্লাসগুলো ছিল, সেগুলোর মধ্যেও অনেক পরিবর্তন এসেছে, তারপর … আইকন সার্চ করার বিষয়টাও এখন অনেক সহজ হয়ে গেছে। কারণ আইকন সার্চ করার জন্য এখন ফিল্টার বসানো হইছে। এ সব বিষয় এবং অন্যান্য আরও নতুন ফিচার জানার জন্য ফন্ট-অসামের  অফিসিয়াল সাইট ভিজিট করুন, ডকুমেন্টেশন পড়ুন, বুঝতে পারবেন আশা করি।

 

সবাই ভাল থাকুন, আবার দেখা হবে আশা করি।

মন্তব্য

মন্তব্য