TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

বক্স হিসাবে দেখানো ফন্টের দুর্দান্ত আইকনগুলি কীভাবে ঠিক করবেন?

8

ওয়েব ডেভেলপমেন্টে, এসকেপ সত্তা ব্যবহার করে প্রতীক টাইপ করার পরিবর্তে এসভিজি ফর্ম্যাটে ফন্ট আইকন ব্যবহার করা সাধারণ। উদাহরণস্বরূপ, ফন্ট অসাধারণ আইকনগুলি গুণমান ছাড়াই আইকনগুলির মাপযোগ্যতার কারণে সবচেয়ে জনপ্রিয়। যাইহোক, যদি আপনি সঠিকভাবে ফন্ট বাস্তবায়ন না করেন তবে অসাধারণ আইকনগুলি বক্স হিসাবে দেখাবে। আপনার যদি ফন্ট আইকন নিয়ে সমস্যা হয়, তাহলে কিভাবে ঠিক করবেন তা দেখুন।

ওয়েবসাইটে ফন্ট অসাধারণ আইকন ব্যবহার করা

আপনার ওয়েবসাইটে ফন্ট আইকন ব্যবহার করার দুটি উপায় আছে। একটি হল এইচটিএমএল ট্যাগ ব্যবহার করা এবং অন্যটি হল সিএসএস সিউডো ক্লাস ব্যবহার করা। উভয় পদ্ধতিতে আপনার সোর্স ফন্ট অসাধারণ সিএসএস লিঙ্ক করা উচিত এবং আপনার সার্ভারে ফন্ট ফাইলগুলি হোস্ট করা উচিত যাতে আইকনগুলিতে সঠিক শৈলী প্রয়োগ করা যায়। HTML এ অসাধারণ ফন্ট ব্যবহারের একটি উদাহরণ নিচে দেওয়া হল :

বক্স হিসাবে দেখানো ফন্টের দুর্দান্ত আইকনগুলি কীভাবে ঠিক করবেন?

অসাধারণ ফন্ট ব্যবহার করা

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

বক্স হিসাবে দেখানো ফন্টের দুর্দান্ত আইকনগুলি কীভাবে ঠিক করবেন?

ফন্ট আইকন সো বক্স

কেন ফন্ট অসাধারণ আইকন বক্স হিসাবে দেখাচ্ছে?

আপনার সাইটে একটি ফন্ট আইকন সন্নিবেশ করার জন্য, আপনাকে নিম্নলিখিতগুলি থাকতে হবে:

  • আপনার সার্ভারে ফন্ট হোস্ট করুন
  • লিঙ্ক সঠিক ফন্ট অসাধারণ CSS সংস্করণ
  • একই সাইটে পুরানো এবং নতুন সংস্করণের সাথে কোন বিরোধ নেই
  • সঠিক ফন্ট পরিবার চেক করুন
  • সঠিক সিএসএস ক্লাস ব্যবহার করুন
  • ফন্টের ওজন পরীক্ষা করুন
  • CSS কন্টেন্ট কোড চেক করুন

আসুন বিশদভাবে ইজি পয়েন্টটি পরীক্ষা করি।

আপনার সার্ভারে 1 হোস্ট ফন্ট

আপনার ওয়েবসাইটে অসাধারণ ফন্ট ব্যবহার করার জন্য, একই ডিরেক্টরিতে ফন্ট ফাইলগুলিও হোস্ট করা প্রয়োজন। সমস্ত ওয়েব ফন্ট টাইপফেস "/ওয়েবফন্ট" ফোল্ডারে পাওয়া উচিত এবং "/CSS" ফোল্ডারে অবস্থিত CSS- এ উল্লেখ করা উচিত।

বেশিরভাগ ক্ষেত্রে, আপনি যে থিম বা প্লাগইন ব্যবহার করেন তা আপনার সার্ভারে সমস্ত প্রয়োজনীয় CSS এবং ফন্ট ফাইল ইনস্টল করবে। এই ক্ষেত্রে, বিশেষ করে যখন আপনি আপনার ওয়েবসাইটের জন্য ওয়ার্ডপ্রেস ব্যবহার করেন।

2 লিঙ্ক সঠিক CSS সংস্করণ

সংস্করণ 4.70 পর্যন্ত ফন্ট অসাধারণ বিনামূল্যে পাওয়া যায়। যাইহোক, 5.0 সংস্করণ থেকে শুরু করে বিনামূল্যে এবং প্রো উভয় সংস্করণই পাওয়া যায়। যদিও সংস্করণ 4.70 পুরানো ছিল, বেশিরভাগ ফ্রি প্লাগইন এবং থিমগুলি এখনও ইউনিফর্ম সিএসএস ক্লাস এবং ব্যবহারের সহজতার কারণে 4.70 ব্যবহার করে। যাইহোক, 5.0 সংস্করণে বিনামূল্যে ব্যবহারকারীদের জন্য ব্র্যান্ড এবং কঠিন শৈলী রয়েছে এবং আপনি উভয় শৈলী অন্তর্ভুক্ত করতে all.css ব্যবহার করতে পারেন।

আপনি হয় সিডিএন কিট পেতে ফন্ট অসাধারণ সাইটে নিবন্ধন করতে পারেন অথবা ক্লাউডফ্লেয়ার থেকে পাওয়া সিডিএন ফাইল ব্যবহার করতে পারেন ।

বক্স হিসাবে দেখানো ফন্টের দুর্দান্ত আইকনগুলি কীভাবে ঠিক করবেন?

ফন্ট অসাধারণ CDN কিট পান

3 সাংঘর্ষিক CSS সংস্করণ

একটি ওয়ার্ডপ্রেস সাইটের সাথে আমরা যে সমস্যার সম্মুখীন হয়েছি তা হল একটি প্লাগইন 4.70 সংস্করণ এবং থিম 5.0 ব্যবহার করছে। অসঙ্গতিপূর্ণ CSS ক্লাস এবং বিষয়বস্তু কোডের কারণে এটি দ্বন্দ্ব সৃষ্টি করছিল। অতএব, আপনার সাইটে সঠিক CSS সোর্স ফাইলের সাথে সর্বশেষ সংস্করণ 5.0 ব্যবহার করতে ভুলবেন না।

বক্স হিসাবে দেখানো ফন্টের দুর্দান্ত আইকনগুলি কীভাবে ঠিক করবেন?

বক্স হিসেবে ফন্ট আইকন দেখাচ্ছে

4 সঠিক ফন্ট পরিবার ব্যবহার করুন

CSS এর সাথে অসাধারণ ফন্ট ব্যবহার করার জন্য, আপনার সঠিক ফন্ট পরিবার ব্যবহার করা উচিত। নিচে 4.70 সংস্করণে ব্যবহৃত ধরনের CSS কোড দেওয়া হল।

.li: আগে {
content: "00A3; font-family: "FontAwesome"; ফন্ট-ওজন: স্বাভাবিক; }

যাইহোক, এটি 5.0 সংস্করণ সহ একটি আইকনের পরিবর্তে একটি বাক্স দেখাবে। আপনার 5.0 ফ্রি ভার্সনের সাথে নিম্নলিখিত CSS ব্যবহার করা উচিত।

.li: আগে {
content: "00A3; font-family: " ফন্ট অসাধারণ 5 ফ্রি "; ফন্ট-ওজন: 900 ; }

অতএব, সিএসএস -এ সঠিক "ফন্ট অসাধারণ 5 ফ্রি" ফন্ট পরিবার ব্যবহার করতে ভুলবেন না। উপরন্তু, যদি আপনি সামাজিক আইকন ব্যবহার করেন তাহলে ফন্ট পরিবার "ফন্ট অসাধারণ 5 ব্র্যান্ড" হওয়া উচিত। এই দুটি ফন্ট পরিবার বিনামূল্যে ব্যবহারকারীদের জন্য উপলব্ধ।

5 সঠিক CSS স্টাইল উপসর্গ ব্যবহার করুন

আরেকটি বিভ্রান্তি হল যে সংস্করণ 5.0 এর পূর্ববর্তী সংস্করণের তুলনায় বিভিন্ন CSS ক্লাস রয়েছে। সংস্করণ 4.7 এ আপনি নীচের মত এফএ স্টাইল উপসর্গ ব্যবহার করতে পারেন:

<i class = "fa fa-camera”>

যাইহোক, এটি 5.0 সংস্করণের সাথে কাজ করবে না। FA শৈলী উপসর্গটি অপ্রচলিত ছিল এবং আপনার ফেসবুকের মতো সামাজিক ব্র্যান্ডিং আইকনের জন্য কঠিন আইকন এবং ফ্যাব ব্যবহার করতে হবে।

6 ফন্ট ওজন চেক করুন

ফন্টের অসাধারণ সংস্করণ 5.0 CSS- এ সাধারণ "ফন্ট-ওজন: স্বাভাবিক" ঘোষণা সমর্থন করে না। আইকন দেখানোর জন্য আপনার নির্দিষ্ট ফন্টের ওজন ঘোষণা করা উচিত ।

7 CSS কনটেন্ট কোড চেক করুন

সিএসএস -এ ব্যবহৃত বিষয়বস্তু কোডটি সঠিক কিনা তা নিশ্চিত করা শেষ কথা। আপনাকে CSS সিউডো এলিমেন্টের ফন্ট অসাধারণ সাইট থেকে উপলব্ধ কোডগুলির মধ্যে একটি ব্যবহার করতে হবে । উপরন্তু, "f00d" বিন্যাসে কোড ব্যবহার নিশ্চিত করুন; আইকনটি সঠিকভাবে দেখানোর জন্য।

সারসংক্ষেপ

নীচে ফন্ট পরিবার, ফন্ট ওজন, শৈলী উপসর্গ এবং শৈলী বিনামূল্যে এবং প্রো ব্যবহারকারীদের জন্য উপলব্ধ সারাংশ। একটি বাক্সের পরিবর্তে আইকন প্রদর্শনের জন্য আপনাকে নিশ্চিত করতে হবে যে এগুলি সবই সঠিক।

স্টাইল উপস্থিতি ফন্ট ওজন শৈলী উপসর্গ ফন্ট পরিবার
কঠিন মুক্ত 900 তুমি কর ফন্ট অসাধারণ 5 ফ্রি বা ফন্ট অসাধারণ 5 প্রো
নিয়মিত প্রো 400 দূরে ফন্ট অসাধারণ 5 প্রো
আলো প্রো 300 fal ফন্ট অসাধারণ 5 প্রো
ডিউটোন প্রো 900 ফ্যাড ফন্ট অসাধারণ 5 Duotone
ব্র্যান্ড মুক্ত 400 ফ্যাব ফন্ট অসাধারণ 5 ব্র্যান্ড

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত