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

কিভাবে Weebly এ ফন্ট অসাধারণ আইকন ব্যবহার করবেন?

2

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

আপনার কেন ফন্ট আইকন ব্যবহার করা উচিত?

ফন্ট আইকন ব্যবহার করার জন্য আপনার কেন বিবেচনা করা উচিত তার একাধিক কারণ রয়েছে:

  • ব্যক্তিগত এবং বাণিজ্যিক ব্যবহারের জন্য আইকনগুলি বিনামূল্যে ব্যবহার করা যায়।
  • আইকন তৈরির জন্য আপনার ইমেজ এবং জাভাস্ক্রিপ্টের প্রয়োজন নেই যা সাইট লোড করার সময় উন্নত করে।
  • সিএসএস দিয়ে আইকনটির চেহারা সম্পূর্ণরূপে কাস্টমাইজ করা যায়।
  • নিখুঁত রেজোলিউশনের সাথে বিভিন্ন আকারের আইকন ব্যবহার করা যেতে পারে।
  • রেটিনা ডিসপ্লে সহ ডিভাইসগুলিতে অত্যন্ত আকর্ষণীয়।

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

কিভাবে Weebly এ ফন্ট অসাধারণ আইকন ব্যবহার করবেন?

যদিও ফন্ট অসাধারণ আইকন ব্যবহার করার অনেক উপায় আছে আমরা দুটি সহজ পদ্ধতি ব্যাখ্যা করব:

  • MaxCDN- এর মতো যেকোন CDN পরিষেবা থেকে বুটস্ট্র্যাপ CDN ব্যবহার করা
  • আপনার নিজের সাইটে ফন্ট অসাধারণ আইকন হোস্টিং

বুটস্ট্র্যাপ সিডিএন ব্যবহার করে

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

আমরা লাইভ সাইটে স্থাপন করার আগে "পৃষ্ঠা" ট্যাবের অধীনে আপনার যে কোনো পৃষ্ঠার শিরোনাম বিভাগে লিঙ্ক করার সুপারিশ করি। সম্ভবত আপনি সার্চ ইঞ্জিন থেকে লুকানো একটি পরীক্ষা পৃষ্ঠা তৈরি করতে পারেন অথবা একটি পরীক্ষা সাইট তৈরি করতে পারেন এবং শিরোনাম বিভাগে স্টাইলশীট লিঙ্ক করতে পারেন "সেটিংস" ট্যাব। লক্ষ্য করুন যে ফন্টের অসাধারণ আইকনগুলি একটি বিনামূল্যে Weebly সাইটে কাজ করবে এবং এই উদ্দেশ্যে প্রিমিয়াম পরিকল্পনার প্রয়োজন নেই।

আপনার সাইটে হোস্টিং

বুটস্ট্র্যাপ সিডিএন সিএসএস ব্যবহারের পরিবর্তে, আপনি গিথুবের ফন্ট অসাধারণ সাইটের হোম পেজ থেকে সম্পূর্ণ ফন্ট ফাইল এবং সিএসএস ডাউনলোড করতে পারেন । উৎস HTML/CSS সম্পাদনা করে আপনার Weebly সাইটে সম্পূর্ণ ফোল্ডারগুলি আপলোড করুন। নীচের ছবিতে দেখানো সব ধরণের ফন্ট এবং CSS ফাইল আপলোড করা নিশ্চিত করুন:

কিভাবে Weebly এ ফন্ট অসাধারণ আইকন ব্যবহার করবেন?

Weebly এ ফন্ট অসাধারণ ফাইল আপলোড করুন

CSS ফাইলটিকে প্রয়োজনীয় পৃষ্ঠার হেডার বিভাগে বা সাইট পর্যায়ে লিঙ্ক করুন।

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

আপনি .css ফাইল অথবা .min.css ফাইল ব্যবহার করতে পারেন। ক্ষুদ্র সংস্করণটি লাইভ সাইটে সুপারিশ করা হয় কারণ এটি সাইট লোড করার সময় উন্নত করে।

ফন্ট আইকন ব্যবহারের উদাহরণ

একবার আপনি সিদ্ধান্ত নিলেন যে স্টাইলশীট এবং ফন্ট আপলোড করবেন বা সিডিএন সিএসএস ব্যবহার করবেন, তার পরের ধাপ হল "এম্বেড কোড" উপাদান ব্যবহার করে আপনার পৃষ্ঠায় এটি ব্যবহার করা।

আসুন আপনার পৃষ্ঠায় একটি গিয়ার আইকন যুক্ত করার একটি উদাহরণ নেওয়া যাক, একটি ফন্ট অসাধারণ আইকন যোগ করার বিন্যাসটি নীচের মত সহজ:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

সিনট্যাক্সটিতে তিনটি অংশ রয়েছে:

  • … – প্রতিটি আইকন ট্যাগের মধ্যে ব্যবহার করা উচিত ।
  • fa – ফন্ট অসাধারণ CSS ক্লাস উপসর্গ।
  • fa-phone-square-প্রকৃত আইকনের নাম।

"এম্বেড কোড" উপাদানটির ভিতরে আটকানো উপরের কোডের আউটপুট নীচের মত হবে:

কিভাবে Weebly এ ফন্ট অসাধারণ আইকন ব্যবহার করবেন?

Weebly এ ফন্ট অসাধারণ আইকনের উদাহরণ

আইকনের আকার বাড়ানো

নীচের মতো আইকনের আকার বাড়ানোর জন্য পাঁচটি CSS ক্লাস রয়েছে:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

সীমাহীন কাস্টমাইজেশন

একবার আপনি ফন্ট আইকন ব্যবহার করার জন্য একটি হাত পেতে সেখানে অনেক দরকারী উপায় তারা একটি সাইটে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি নীচে একটি তালিকা যোগ করতে পারেন:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

তালিকাটি নীচের মত হবে:

কিভাবে Weebly এ ফন্ট অসাধারণ আইকন ব্যবহার করবেন?

ফন্ট আইকন তালিকা

ফন্ট আইকন দিয়ে আপনার সাইটে অনেক বৈশিষ্ট্য যোগ করা কতটা সহজ তা পরীক্ষা করতে আপনি উদাহরণগুলি উল্লেখ করতে পারেন । আইকনের নামগুলি দ্রুত পেতে চিট শীটটি পড়ুন । আপনি আইকন নামের পরিবর্তে ইউনিকোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ, তালিকা আইকনের উপরের উদাহরণে আইকন নাম FA-check-square ব্যবহারের পরিবর্তে আপনি এর সমতুল্য ইউনিকোড মান use ব্যবহার করতে পারেন।

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

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