فونټ 6: بشپړ بیاکتنه
- 1 د فونټ نصبولو څرنګوالی
- 1 میتود.
- میتود 2.
- 2 څنګه د فونټ فونټ عکسونو وکاروئ
- 1 معیاري عکسونه
- 2 لوی ise
- 3 ټاکلی سوری عکس
- د بیل شوي لیست لپاره 4 عکسونه
- 5 چوکاټ شوي آيونونه او نرخونه
- 6 انیم شوي آیکونونه
- 7 د لیږد شوي شبیه
- 8 د ترکیب شبیه
- 3 Font Awesome 4.5.0 collection, classes اوcss code to insert using the content property
- 4 اړونده سرچینې
- د عکس اندازه
- عکس
- پوښتل شوې پوښتنې
فونټ په زړه پوری د سکاټل وړ ویکتور عکسونو ټولګه ده. عکسونه د CSS ملکیتونو په کارولو سره فارمیټ کیدی شي، د دوی رنګ، اندازه، سیوري او نور ډیر څه تنظیم کړي. د فونټ نسخه 5.5.0 کې 605 آیکونونه شامل دي.
1 د فونټ نصبولو څرنګوالی
1 میتود.
د لاندې کوډ اضافه کولو سره د فایل - Abomsomy.cssome نسخه وکاروئ<head> برخه:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">یوځل چې فونټ وصل شي، تاسو کولی شئ په خپل سایټ کې د عکسونو څخه کار واخلئ.
میتود 2.
د٪ font څخه په زړه پوری٪ 100 څخه فونټ ډاونلوډ کړئ. آرشیف خلاص کړئ او د آرشیف سرور ته د آرشیف څخه دوه فولډرې - CSS او ټوکرۍ ته اپلوډ کړئ. که تاسو دمخه په خپل سایټ کې د ورته نومونو سره فولډرې لرئ، نو تاسو باید اړتیا لرئ فایلونه له ډاونلوډ شوي فولډز څخه دوستانه اضافه کړئ.
تاسو کولی شئ د فایل بشپړ یا لاسي نسخه وکاروئ:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 څنګه د فونټ فونټ عکسونو وکاروئ
په ویب پا page ه کې د ویب پا to ې په دوه ډولونو کې اضافه کیدی شي: د<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"؛ د کور عکس اضافه کول / foobeawy؛ رنګ؛ حاشیه - سم: 10px؛1 معیاري عکسونه
فونټ په زړه پوری ډیزاین شوی ترڅو د انلاین عناصرو سره وکارول شي. د عکسونو اضافه کولو لپاره، تاسو باید لومړی اړتیا لرئ چې د DAM ټولګی ته د DAM ټولګی ته تنظیم کړئ<i> یا<span> عنصر.
د عنصر دمخه یا وروسته د ټاکل شوي آیکون اضافه کول، خالي<i></i> یا<span></span> عنصر په عنصر کې اضافه کیږي، کوم چې د ICON ټولګی ته ټاکل شوی، او یو اضافي ټولګی چې سټایل اوږدوي.
<i class="fa fa-camera-retro"></i>2 لوی ise
د دې کانتینر پورې اړوند د آیکون اندازې لوړولو لپاره، د F-lg (33٪ زیاتوالی)، FA-2x، FA-4X، fx ټولګي.
<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 عکسونه
د F- Ul او FAI-LI-LIL ټولګي وکاروئ ترڅو د ډیفالټ ګولۍ په a کې ځای په ځای کړئ<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>ډرم ايپسم بایل د APT په توګه وټاکه د ورکړل شوي بشپړ شوی نیکی کانګو ته کانګو، پوپل لیپین کې پوویر لیبر. په SED ایلټ لیټس کې. sed بې شرمه اشراف، د سیمپر ویټي فیلیس شناخت، سوډیلز سیګین کانګو ته کجې.</p>6 انیم شوي آیکونونه
د FA-Spin، فای نبض، فایټ ریفریش، فیګ ریفریش، د F-cu ټولګي اضافه کړئ ترڅو د سپنینګ آیکانو رامینځته کولو لپاره. انیمیشن په 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 د لیږد شوي شبیه
څرخیدل یا فلپ عکسونو ته، د غوړ ځغلي * او فای فلیپ- فلیپ- ټولګي وکاروئ.
<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
د ویب غوښتنلیکونو لپاره شبیه فایټ - Fe F042؛fa-enonan - F F13D؛
fabrife - op F187؛
فینډس - \ F047؛
فای کلیسایک - \ Fe069؛
فاتټ - \ f1fa؛
د فای بیلانس - کچې - \ F24E؛
fa-bla - f05e؛
fa-proot - famp F19C؛
فای بارکوډ - \ F02A؛
د فایټ بیټرۍ - خالي - \ F244؛
د بیټرۍ بون - نیم - \ F242؛
د بیټرۍ - ربع - \ F243؛
د فایټ بیټرۍ - درې چوکۍ - \ F241؛
د فایټ بیټرۍ - بشپړ - \ F240؛
فای بست - F236؛
فای بیر - \ F0FC؛
فویل - F0f3؛
فو بیل - سلیش - f F1F6؛
fa-sinoculars - d F1e5؛
د فای کلیزې کیک - 8 F1FD؛
فای بولټ - f F0e7؛
farm تنه - op F12؛
FA-کتاب - \ f02D؛
څرخیدل یا فلپ عکسونو ته، د غوړ ځغلي * او فای فلیپ- فلیپ- ټولګي وکاروئ.
4 اړونده سرچینې
د فونټ په اړه ډیر څه په زړه پوری مجموعه، تاسو کولی شئ نور عکس لیکونه هم وکاروئ.
فونټیلو.٪٪ pictelloOLO ٪٪ د مختلف ژن فونټونو لوی ټولګه لري. تاسو کولی شئ د هغه عکسونو غوره کړئ چې تاسو یې خوښوئ او خپل کمپیوټر ته یې ډاونلوډ کړئ.
د آی بنسټ.٪٪ فاونډیشن عکس العمل له مخې د لاسي صنایعو بل عکس ټولګه ده. د معیاري شیطانونو سربیره، سایټ د ټولنیزو رسنیو شبیه، او نور ډیر څه دي.
د موادو آپیلونه.د موادو یو متحد شوي فلیټ عکسونه دي چې د انګیرنې اسانه کوي. شبیه د ټولو عام پلیټ فارمونو او د سکریټ په اړه د ښکلي نمایش لپاره مطلوب دي.
د INCO فونټ ټولګه په 5050++ عکسونو کې. ستاسو په ویب پا on ه کې د ټولګه نصبولو ترټولو اسانه لار د ګوګل ویب فونټونو په څیر د ICOs کارول دي. د دې کولو لپاره، لاندې کوډ په پا Page ه کې شامل شوی:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">د فونټ په سمه توګه په براوزر کې ښودل، عنصر چې د آی سي ډبرو څخه کار به د موادو-ICNO ټولګي ته وي ورکړل شي:
. د فونټ - کورني - کورنۍ: 'مادي شبرونو'؛ فونټ وزن: د فونټ نورمال ډول: د فونټ نورمال: د فونټ - اندازې: 24px؛ / * د غوره شوي عکس، / ښودنه: Innine - بلاک؛ پلنوالی: 1 م قد: 1em؛ لاین لوړوالی: 1؛ د متن بدلون: هیڅ نه؛ خط - فاصله: د نورمال ټکي تړل: نورمال؛ سپین - ځای: اوسرسپ؛ لارښود: ltr؛ -wobkit-فونټ-هوساینه - هوساینه: متوافق؛ / * د ټولو ویب فیټ براوزر * / متن رابللو د ټولو ویب پریکینټ براوزرونو لخوا ملاتړ شوی: د مطلوب قضیې؛ / * سفاري او کروم ملاتړ * / amoz-OSX-فونټ-فونګ-فونټ-فون / * د فایرفوکس ملاتړ. * / د فونټ - ب feature ه تنظیمات: 'لیګا'؛ / * د مثال په توګه ملاتړ. * /}انځورونه پخپله د دې په کارولو کې اضافه شوي<I class=''material-شبیه''>ligtate یا html کوډ د عکس</i> ټاګ، د مثال په توګه:
<i class="material-شبیه">حساب_بالانس_ولټ</i><i class="material-شبیه"></i>لایجور د ټولو عصري کوونکو لخوا پیژندل شوی، د بیلګې په توګه - د نسخه څخه پیل کیږي 10. د عکس کوډ په اوده پوه شو چې وړاندیز شوی ښکاري.
د عکس اندازه
د عکس اندازه is controlled by additional classes:
. د میټری - ISD-500 {سونټ اندازه: 18px؛} / * لپاره<i class="material-شبیه md-18"></i> * /. د میرتری - سیکون .md-ed-24 {د فونټ اندازه: 24px؛} / * لپاره<i class="material-شبیه md-24"></i> * /. د بانسین - IMD -D-36 {36 {<i class="material-شبیه md-36"></i> * /. د میرتری - سیکون .md-48 48 488 48 48 48} 48 {اندازه: 48px؛} / * لپاره<i class="material-شبیه md-48"></i> * /عکس
د شبیه رنګ د اضافي ټولګیو په کارولو سره هم ټاکل کیږي:
. د کیپریټ - IMD-ډایل - کیټ-کیټ-کیټ - رنګ: RGبا (0، 0، 0، 0.54) / * *<i class="material-شبیه md-dark"></i> * /. د بیروني - imd-Ste-light {رنګ: rgba (255، 255، 255، 255، 255، 255، 1 / *<i class="material-شبیه md-light"></i> * /.MARTARTE-Isd-usken-de-byd-Unitive {رنګ: rgba (0، 0، 0، 0.26)؛} / *<i class="material-شبیه md-dark md-inactive"></i> * /. د بلی - ISD-Sp-sx.md-غیر فعال {رنګ: RGبا (255، 255، 255، 255 ،، 255 ،، 255 ،، 255 ،، 255 ،، 255 ،، 255 ،، 45،<i class="material-شبیه md-light md-inactive">مخ</i> * /د ګمرکي رنګ ټاکلو لپاره، تاسو اړتیا لرئ یو ټولګی اضافه کړئ چې د عکس رنګ ټاکي، د مثال په توګه:
. د بانسین - icondio {رنګ: # 1a237e؛} / *<i class="material-شبیه indigo"></i> * /پوښتل شوې پوښتنې
- په ساده شرایطو کې فونټ څه شی دی؟
- په اصل کې، دا د عکسونو سره فونټ دی چې د دې لید او ډیزاین لوړولو لپاره په هرې ویب پا aper ې عنصر کې اضافه کیدی شي. راټولول د کوم کار او مقصد لپاره مناسب څو سوه عکس لري.د دې لینک په اړه نور معلومات
میشل پننسن د سفر او مینځپانګې جوړونکی دی. د تعلیم او اکتشاف لپاره لیوالتیا د پوهې شریکولو او د تعلیمي مینځپانګې له لارې د نورو هڅولو لپاره لیوالتیا رامینځته کوي. د نړۍ په ځواک سره د نړۍ نږدې کول د نړیوال تجربې سره او د لیدو احساس لري.
