ফন্ট অসাধারণ 6: সম্পূর্ণ পর্যালোচনা
- 1 কীভাবে দুর্দান্ত ফন্ট ইনস্টল করবেন
- পদ্ধতি 1।
- পদ্ধতি 2।
- 2 কীভাবে ফন্ট দুর্দান্ত আইকন ব্যবহার করবেন
- 1 স্ট্যান্ডার্ড আইকন
- 2 বড় আইকন
- 3 স্থির প্রস্থ আইকন
- বুলেটেড তালিকার জন্য 4 আইকন
- 5 ফ্রেম আইকন এবং উদ্ধৃতি
- 6 অ্যানিমেটেড আইকন
- 7 রূপান্তরিত আইকন
- 8 সংমিশ্রণ আইকন
- 3 Font Awesome 4.5.0 collection, classes এবংcss code to insert using the content property
- 4 সম্পর্কিত সংস্থান
- আইকন আকার
- আইকন রঙ
- প্রায়শই জিজ্ঞাসিত প্রশ্ন
ফন্ট অসাধারণ হ'ল স্কেলেবল ভেক্টর আইকনগুলির সংগ্রহ। আইকনগুলি সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করে ফর্ম্যাট করা যায়, তাদের রঙ, আকার, ছায়া এবং আরও অনেক কিছু সেট করে। ফন্ট সংস্করণ 5.5.0 এ 605 আইকন অন্তর্ভুক্ত।
1 কীভাবে দুর্দান্ত ফন্ট ইনস্টল করবেন
পদ্ধতি 1।
ফাইলটির ফন্ট-দুর্দান্ত.সিএসএস সংস্করণটি ব্যবহার করুন নিম্নলিখিত কোডটি যুক্ত করে<head> অধ্যায়:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">ফন্টটি সংযুক্ত হয়ে গেলে আপনি আপনার সাইটে আইকনগুলি ব্যবহার করতে পারেন।
পদ্ধতি 2।
ফন্ট দুর্দান্ত থেকে ফন্টটি ডাউনলোড করুন। সংরক্ষণাগারটি আনপ্যাক করুন এবং সংরক্ষণাগার থেকে সাইট সার্ভার - সিএসএস এবং ফন্টগুলিতে দুটি ফোল্ডার আপলোড করুন। আপনার যদি ইতিমধ্যে আপনার সাইটে এই জাতীয় নাম সহ ফোল্ডার থাকে তবে আপনাকে কেবল ডাউনলোড করা ফোল্ডারগুলি থেকে ফাইল যুক্ত করতে হবে।
আপনি ফাইলটির সম্পূর্ণ বা ক্ষুদ্র সংস্করণ ব্যবহার করতে পারেন:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 কীভাবে ফন্ট দুর্দান্ত আইকন ব্যবহার করবেন
আইকনগুলি দুটি উপায়ে একটি ওয়েব পৃষ্ঠায় যুক্ত করা যেতে পারে: এর জন্য উপযুক্ত ক্লাস সেট করে<i> এবং<span> elements, বাby adding them to the desired element using the :before, :after pseudo-elements এবংthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> লি: {বিষয়বস্তুর আগে: "\ f015";/ * হোম আইকন যুক্ত করুন */ফন্ট-পরিবার: ফন্টোয়াল; রঙ: #AAAAA; মার্জিন-ডান: 10px;}1 স্ট্যান্ডার্ড আইকন
ফন্ট অসাধারণ ইনলাইন উপাদানগুলির সাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে। আইকন যুক্ত করার জন্য, আপনাকে প্রথমে এফএ ক্লাস সেট করতে হবে<i> বা<span> উপাদান।
উপাদানটির আগে বা পরে নির্বাচিত আইকন যুক্ত করতে, একটি খালি<i></i> বা<span></span> উপাদানটি উপাদানটিতে যুক্ত করা হয়, যা একটি আইকন শ্রেণি বরাদ্দ করা হয়, পাশাপাশি একটি অতিরিক্ত শ্রেণি যা স্টাইলিং প্রসারিত করে।
<i class="fa fa-camera-retro"></i>2 বড় আইকন
এর ধারকটির তুলনায় আইকনের আকার বাড়ানোর জন্য, এফএ-এলজি (33% বৃদ্ধি), এফএ -2 এক্স, এফএ -3 এক্স, এফএ -4 এক্স, এফএ -5 এক্স ক্লাসগুলি ব্যবহার করুন।
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 স্থির প্রস্থ আইকন
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation বাlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> বাড়ি</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> গ্রন্থাগার</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> অ্যাপ্লিকেশন</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> সেটিংস</a ></li></ul>বুলেটেড তালিকার জন্য 4 আইকন
এ-তে ডিফল্ট বুলেটগুলি প্রতিস্থাপন করতে এফএ-উল এবং এফএ-লি ক্লাসগুলি ব্যবহার করুন<ul>…</ul> বুলেটযুক্ত তালিকা.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>তালিকাবদ্ধ</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>তালিকাবদ্ধ</li> <li><i class="fa-li fa fa-square"></i>তালিকাবদ্ধ</li></ul>5 ফ্রেম আইকন এবং উদ্ধৃতি
Use the fa-border class to set the border for the icon. The pull-right এবংpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>লোরেম ইপসাম ডলর সিট অ্যামেট, কনসেক্টর অ্যাডিপিসিং এলিট। ডোনেক এনইসি পিউরাস কঞ্জি, পোসুয়ের লিবারো ইন, পোর্টা স্যাপিয়েন। সেড এলিট লেকটাসে। সেড ল্যাকাস এলিট, সেম্পার ভিটা ফেলিস আইডি, সোডেলস কনগ স্যাপিয়েন।</p>6 অ্যানিমেটেড আইকন
স্পিনিং আইকন সেট আপ করতে এফএ-স্পিন, এফএ-পালস, এফএ-রিফ্রেশ, এফএ-কগ ক্লাস যুক্ত করুন। অ্যানিমেশন আইই 8 - আইই 9 এ সমর্থিত নয়।
<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>7 রূপান্তরিত আইকন
আইকনগুলি ঘোরানো বা ফ্লিপ করতে, এফএ-রোটেট-* এবং এফএ-ফ্লিপ-* ক্লাসগুলি ব্যবহার করুন।
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 সংমিশ্রণ আইকন
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, এবংfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o 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-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal 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 "></i></span>3 Font Awesome 4.5.0 collection, classes এবংcss code to insert using the content property
ওয়েব অ্যাপ্লিকেশনগুলির জন্য আইকন এফএ -অ্যাডজাস্ট - \ F042;এফএ -অ্যাঙ্কর - \ এফ 13 ডি;
এফএ -আরচিভ - \ এফ 187;
এফএ -তীর - \ F047;
এফএ -এসেরিস্ক - \ f069;
FAAT - \ f1fa;
এফএ-ব্যালেন্স-স্কেল-\ এফ 24 ই;
এফএ -নিষেধাজ্ঞা - \ f05e;
এফএ -ব্যাংক - \ f19c;
এফএ -বারকোড - \ f02a;
ফা-ব্যাটারি-এম্পটি-\ এফ 244;
ফা-ব্যাটারি-হাফ-\ এফ 242;
এফএ-ব্যাটারি-কোয়ার্টার-\ এফ 243;
এফএ-ব্যাটারি-থ্রি-চতুর্থাংশ-\ এফ 241;
ফা-ব্যাটারি-পূর্ণ-\ f240;
এফএ -বেড - \ এফ 236;
এফএ -বিয়ার - \ f0fc;
এফএ -বেল - \ f0f3;
এফএ-বেল-স্ল্যাশ-\ f1f6;
এফএ -বিনোকুলারস - \ f1e5;
এফএ-বার্থডে-কেক-\ এফ 1 এফডি;
এফএ -বোল্ট - \ f0e7;
এফএ -বোম্ব - \ f1e2;
এফএ -বুক - \ f02d;
আইকনগুলি ঘোরানো বা ফ্লিপ করতে, এফএ-রোটেট-* এবং এফএ-ফ্লিপ-* ক্লাসগুলি ব্যবহার করুন।
4 সম্পর্কিত সংস্থান
ফন্ট অসাধারণ সংগ্রহ ছাড়াও, আপনি অন্যান্য আইকন ফন্টগুলিও ব্যবহার করতে পারেন।
ফন্টেলো।ফন্টেলো এর বিভিন্ন আইকন ফন্টের একটি বৃহত সংগ্রহ রয়েছে। আপনি নিজের পছন্দসই আইকনগুলি নির্বাচন করতে পারেন এবং সেগুলি আপনার কম্পিউটারে ডাউনলোড করতে পারেন।
ফাউন্ডেশন আইকন।ফাউন্ডেশন আইকন ফাউন্ডেশন ফ্রেমওয়ার্কের বিকাশকারীদের থেকে অন্য আইকন ফন্ট সংগ্রহ। স্ট্যান্ডার্ড আইকনগুলি ছাড়াও, সাইটটিতে গোলাকার আইকন, সোশ্যাল মিডিয়া আইকন এবং আরও অনেক কিছু রয়েছে।
উপাদান আইকন।উপাদান আইকনগুলি হ'ল গুগলের ইউনিফাইড ফ্ল্যাট আইকন যা উপলব্ধি স্বাচ্ছন্দ্যকে মূর্ত করে। আইকনগুলি সমস্ত সাধারণ প্ল্যাটফর্মে সুন্দর প্রদর্শনের জন্য এবং সমস্ত স্ক্রিন রেজোলিউশনের জন্য অনুকূলিত হয়।
আইকন ফন্ট সংগ্রহে 750+ আইকন রয়েছে। আপনার ওয়েবসাইটে সংগ্রহ ইনস্টল করার সহজতম উপায় হ'ল গুগল ওয়েব ফন্টের মতো আইকন ব্যবহার করা। এটি করার জন্য, নিম্নলিখিত কোডটি পৃষ্ঠায় অন্তর্ভুক্ত করা হয়েছে মার্কআপ:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ব্রাউজারগুলিতে ফন্টটি সঠিকভাবে প্রদর্শন করতে, আইকন ফন্টটি ব্যবহার করবে এমন উপাদানটিকে উপাদান-আইকন ক্লাস দেওয়া হয়:
.ম্যাটরিয়াল-আইকনস {ফন্ট-পরিবার: 'উপাদান আইকন'; ফন্ট-ওজন: সাধারণ ফন্ট-স্টাইল: সাধারণ ফন্ট-আকার: 24 পিএক্স; / * পছন্দের আইকন আকার */ প্রদর্শন: ইনলাইন-ব্লক; প্রস্থ: 1 এম; উচ্চতা: 1 এম; লাইন-উচ্চতা: 1; পাঠ্য-ট্রান্সফর্ম: কিছুই নয়; চিঠি-মহাকাশ: সাধারণ শব্দ-মোড়: সাধারণ; হোয়াইট স্পেস: নওরাপ; দিকনির্দেশ: এলটিআর; -ওয়েবকিট-ফন্ট-স্মুথিং: অ্যান্টিয়ালিয়াসড; / * সমস্ত ওয়েবকিট ব্রাউজার দ্বারা সমর্থিত */ পাঠ্য-রেন্ডারিং: অপ্টিমাইজেলিবিলিটি; / * সাফারি এবং ক্রোম সমর্থন */ -মোজ-ওএসএক্স-ফন্ট-স্মুথিং: গ্রেস্কেল; /* ফায়ারফক্স সমর্থন। */ ফন্ট-ফিচার-সেটিংস: 'লিগা'; /* আইই সমর্থন। */}আইকনগুলি নিজেরাই ব্যবহার করে যুক্ত করা হয়<I class=''material-আইকন''>আইকনের লিগ্যাচার বা এইচটিএমএল কোড</i> ট্যাগ, উদাহরণস্বরূপ:
<i class="material-আইকন">অ্যাকাউন্ট_বালেন্স_ওয়ালেট</i><i class="material-আইকন"></i>লিগ্যাচারটি সমস্ত আধুনিক ব্রাউজার দ্বারা বোঝা যায়, যেমন - সংস্করণ 10 থেকে শুরু করে আইকন কোডটি স্বয়ংক্রিয়ভাবে উত্পন্ন হয়, এর জন্য আপনাকে আইকন চিত্রটিতে বাম -ক্লিক করতে হবে এবং প্রস্তাবিত চেহারাটি অনুলিপি করতে হবে।
আইকন আকার
আইকন আকার is controlled by additional classes:
।<i class="material-আইকন md-18"></i> */।<i class="material-আইকন md-24"></i> */।<i class="material-আইকন md-36"></i> */.material-আইকন.md-48 {ফন্ট-আকার: 48px;} /* জন্য<i class="material-আইকন md-48"></i> */আইকন রঙ
আইকনগুলির রঙ অতিরিক্ত ক্লাস ব্যবহার করেও সেট করা আছে:
।<i class="material-আইকন md-dark"></i> */.মেটরিয়াল-আইকনস.এমডি-লাইট {রঙ: আরজিবিএ (255, 255, 255, 1);} /*<i class="material-আইকন md-light"></i> */।<i class="material-আইকন md-dark md-inactive"></i> * /।<i class="material-আইকন md-light md-inactive">মুখ</i> */একটি কাস্টম রঙ সেট করতে, আপনাকে একটি ক্লাস যুক্ত করতে হবে যা আইকনের রঙ সংজ্ঞায়িত করে, উদাহরণস্বরূপ:
.material-আইকন.indigo {রঙ: #1A237E;<i class="material-আইকন indigo"></i> */প্রায়শই জিজ্ঞাসিত প্রশ্ন
- সাধারণ ভাষায় ফন্টটি কী দুর্দান্ত?
- সংক্ষেপে, এটি আইকনগুলির সাথে একটি ফন্ট যা এর দৃশ্যমানতা এবং নকশা বাড়ানোর জন্য যে কোনও ওয়েব পৃষ্ঠার উপাদানগুলিতে যুক্ত করা যেতে পারে। সংগ্রহটি যে কোনও কাজ এবং উদ্দেশ্য জন্য উপযুক্ত কয়েক শতাধিক আইকন নিয়ে গঠিত।এই লিঙ্কে আরো তথ্য
মিশেল পিনসন একজন ভ্রমণ উত্সাহী এবং বিষয়বস্তু নির্মাতা। শিক্ষা এবং অনুসন্ধানের জন্য আবেগকে একীভূত করে তিনি জ্ঞান ভাগ করে নেওয়ার এবং অন্যকে মনমুগ্ধ করার মাধ্যমে অন্যকে অনুপ্রাণিত করার ক্ষেত্রে বিচ্ছিন্ন হয়ে পড়েছিলেন। বিশ্বব্যাপী দক্ষতা এবং ওয়ান্ডারলাস্টের অনুভূতি সহ ব্যক্তিদের ক্ষমতায়নের মাধ্যমে বিশ্বকে আরও একত্রে নিয়ে আসা।