فونٹ خوفناک 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" ؛/ * ہوم آئیکن شامل کریں */فونٹ فیملی: فونٹ واس ؛ رنگ: #AAAAAA ؛ مارجن رائٹ: 10px ؛}1 معیاری شبیہیں
فونٹ خوفناک ان لائن عناصر کے ساتھ استعمال ہونے کے لئے ڈیزائن کیا گیا ہے۔ شبیہیں شامل کرنے کے ل you ، آپ کو پہلے ایف اے کلاس کو رب پر سیٹ کرنے کی ضرورت ہے<i> یا<span> عنصر
عنصر سے پہلے یا بعد میں منتخب آئیکن کو شامل کرنے کے لئے ، ایک خالی<i></i> یا<span></span> عنصر کو عنصر میں شامل کیا جاتا ہے ، جسے آئیکن کلاس تفویض کیا جاتا ہے ، نیز ایک اضافی کلاس جو اسٹائل میں توسیع کرتی ہے۔
<i class="fa fa-camera-retro"></i>2 بڑے شبیہیں
اس کے کنٹینر کے نسبت آئیکن کے سائز کو بڑھانے کے ل FA ، ایف اے-ایل جی (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 متحرک شبیہیں
اسپننگ شبیہیں قائم کرنے کے لئے ایف اے اسپن ، ایف اے پلس ، ایف اے ریفریش ، ایف اے-کوگ کلاسز شامل کریں۔ IE8 - IE9 میں حرکت پذیری کی تائید نہیں کی گئی ہے۔
<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 تبدیل شدہ شبیہیں
شبیہیں کو گھومنے یا پلٹانے کے ل Fa ، ایف اے روٹیٹ-* اور ایف اے فلپ-* کلاسز استعمال کریں۔
<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 ؛ایف اے -اینکر - \ f13d ؛
ایف اے آرکیو - \ f187 ؛
ایف اے -ایروز - \ F047 ؛
ایف اے -ماسٹرک - \ F069 ؛
faat - \ f1fa ؛
ایف اے بیلنس پیمانے-\ f24e ؛
ایف اے -بین - \ f05e ؛
ایف اے بینک - \ f19c ؛
ایف اے بارکوڈ - \ f02a ؛
ایف اے بیٹری-خالی-\ F244 ؛
ایف اے بیٹری ہاف-\ F242 ؛
ایف اے بیٹری کوارٹر-\ F243 ؛
ایف اے بیٹری-تھری کوارٹرز-\ F241 ؛
ایف اے بیٹری-فل-\ F240 ؛
ایف اے بیڈ - \ F236 ؛
ایف اے بیئر - \ f0fc ؛
ایف اے بیل - \ f0f3 ؛
ایف اے بیل سلیش-\ F1F6 ؛
ایف اے -بائنوکولر - \ f1e5 ؛
ایف اے-باریٹ ڈے کیک-\ f1fd ؛
ایف اے بولٹ - \ f0e7 ؛
ایف اے بم - \ f1e2 ؛
ایف اے بک - \ f02d ؛
شبیہیں کو گھومنے یا پلٹانے کے ل Fa ، ایف اے روٹیٹ-* اور ایف اے فلپ-* کلاسز استعمال کریں۔
4 متعلقہ وسائل
فونٹ کے خوفناک مجموعہ کے علاوہ ، آپ دوسرے آئیکن فونٹ بھی استعمال کرسکتے ہیں۔
فونٹیلو۔٪٪ فونٹیلو ٪ ٪ میں مختلف آئیکن فونٹس کا ایک بہت بڑا مجموعہ ہے۔ آپ اپنی پسند کی شبیہیں منتخب کرسکتے ہیں اور انہیں اپنے کمپیوٹر پر ڈاؤن لوڈ کرسکتے ہیں۔
فاؤنڈیشن آئیکن۔٪٪ فاؤنڈیشن آئیکن ٪٪ فاؤنڈیشن فریم ورک کے ڈویلپرز کا ایک اور آئیکن فونٹ مجموعہ ہے۔ معیاری شبیہیں کے علاوہ ، سائٹ میں گول شبیہیں ، سوشل میڈیا شبیہیں اور بہت کچھ شامل ہے۔
مادی شبیہیں۔مادی شبیہیں گوگل کے متحد فلیٹ شبیہیں ہیں جو تاثرات کو آسانی سے مجسم کرتی ہیں۔ شبیہیں تمام عام پلیٹ فارمز اور اسکرین کی تمام قراردادوں پر خوبصورت ڈسپلے کے ل optim بہتر ہیں۔
آئیکن فونٹ کلیکشن میں 750+ شبیہیں ہیں۔ اپنی ویب سائٹ پر کسی مجموعہ کو انسٹال کرنے کا آسان ترین طریقہ یہ ہے کہ گوگل ویب فونٹس جیسے شبیہیں استعمال کریں۔ ایسا کرنے کے لئے ، مندرجہ ذیل کوڈ کو صفحہ مارک اپ میں شامل کیا گیا ہے:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">براؤزرز میں فونٹ کو صحیح طریقے سے ظاہر کرنے کے لئے ، عنصر جو آئیکن فونٹ کو استعمال کرے گا اسے ماد شبیہیں وں کی کلاس دی گئی ہے۔
.میٹریل آئیکنز {فونٹ فیملی: 'مادی شبیہیں' ؛ فونٹ وزن: عام فونٹ اسٹائل: عام فونٹ سائز: 24px ؛ / * ترجیحی آئیکن سائز */ ڈسپلے: ان لائن بلاک ؛ چوڑائی: 1em ؛ اونچائی: 1em ؛ لائن اونچائی: 1 ؛ ٹیکسٹ ٹرانسفارم: کوئی نہیں ؛ خط کی جگہ: عام الفاظ کی لپیٹ: عام ؛ سفید اسپیس: ابراپ ؛ سمت: LTR ؛ -ewebkit-font ہم-ہموار: antialiased ؛ / * تمام ویب کِٹ براؤزرز کے ذریعہ تعاون یافتہ */ ٹیکسٹ رینڈرنگ: آپٹیمیل گیبلٹی ؛ / * سفاری اور کروم سپورٹ */ -Moz-OSX-FONT ہموار: گریس اسکیل ؛ /* فائر فاکس سپورٹ۔ */ فونٹ فیچر سیٹنگ: 'liga' ؛ /* یعنی سپورٹ۔ */}شبیہیں خود استعمال کرکے شامل کی جاتی ہیں<I class=''material-شبیہیں''>آئیکن کا ligature یا HTML کوڈ</i> ٹیگ ، مثال کے طور پر:
<i class="material-شبیہیں">اکاؤنٹ_ بیلنس_ والٹ</i><i class="material-شبیہیں"></i>لیگچر کو تمام جدید براؤزرز ، یعنی ورژن 10 سے شروع کرتے ہیں۔ آئیکن کوڈ خود بخود تیار ہوتا ہے ، اس کے ل you آپ کو آئیکن امیج پر بائیں کلک کرنے کی ضرورت ہے اور تجویز کردہ نظر کو کاپی کرنا ہوگا۔
آئیکن سائز
آئیکن سائز is controlled by additional classes:
.materatory-شبیہیں.md-18 {فونٹ سائز: 18px ؛} /* کے لئے<i class="material-شبیہیں md-18"></i> */.materatory-شبیہیں.md-24 {فونٹ سائز: 24px ؛} /* کے لئے<i class="material-شبیہیں md-24"></i> */.materatory-شبیہیں.md-36 {فونٹ سائز: 36px ؛} /* کے لئے<i class="material-شبیہیں md-36"></i> */.materatory-شبیہیں.md-48 {فونٹ سائز: 48px ؛} /* کے لئے<i class="material-شبیہیں md-48"></i> */آئیکن رنگ
شبیہیں کا رنگ اضافی کلاسوں کا استعمال کرتے ہوئے بھی طے کیا گیا ہے:
.materatory-شبیہیں.md-dark {رنگ: RGBA (0 ، 0 ، 0 ، 0.54) ؛} /*<i class="material-شبیہیں md-dark"></i> */.materatory-شبیہیں.md- لائٹ {رنگ: آر جی بی اے (255 ، 255 ، 255 ، 1) ؛} /*<i class="material-شبیہیں md-light"></i> */.materational-شبیہیں.md-dark.md-inctive {رنگ: آر جی بی اے (0 ، 0 ، 0 ، 0.26) ؛} /*<i class="material-شبیہیں md-dark md-inactive"></i> * /.materational-شبیہیں.md-light.md-inctive {رنگ: آر جی بی اے (255 ، 255 ، 255 ، 0.3) ؛} /*<i class="material-شبیہیں md-light md-inactive">چہرہ</i> */کسٹم رنگ طے کرنے کے ل you ، آپ کو ایک کلاس شامل کرنے کی ضرورت ہے جو آئیکن کے رنگ کی وضاحت کرے ، مثال کے طور پر:
.materatory-شبیہیں.indigo {رنگ: #1A237E ؛} /*<i class="material-شبیہیں indigo"></i> */اکثر پوچھے گئے سوالات
- آسان الفاظ میں فونٹ کیا حیرت انگیز ہے؟
- خلاصہ یہ ہے کہ یہ ایک فونٹ ہے جس میں شبیہیں ہیں جو اس کی مرئیت اور ڈیزائن کو بڑھانے کے لئے کسی بھی ویب پیج عنصر میں شامل کی جاسکتی ہیں۔ اس مجموعہ میں کئی سو شبیہیں شامل ہیں جو کسی بھی کام اور مقصد کے لئے موزوں ہیں۔اس لنک پر مزید معلومات
