Font Awesome 6: Ամբողջական ակնարկ
- 1 Ինչպես տեղադրել տառատեսակը AWESOME
- Մեթոդ 1.
- Մեթոդ 2.
- 2 Ինչպես օգտագործել տառատեսակը Awesome սրբապատկերներ
- 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 հարակից ռեսուրսներ
- Պատկերակի չափը
- Պատկերակի գույնը
- Հաճախակի Տրվող Հարցեր
Font Awesome- ը մասշտաբային վեկտորի սրբապատկերների հավաքածու է: Սրբապատկերները կարող են ձեւափոխվել CSS հատկությունների միջոցով, սահմանել դրանց գույնը, չափը, ստվերը եւ շատ ավելին: 5.5.0 տառատեսակը ներառում է 605 սրբապատկեր:
1 Ինչպես տեղադրել տառատեսակը AWESOME
Մեթոդ 1.
Օգտագործեք ֆայլի տառատեսակ-Awesome.css տարբերակը `ավելացնելով հետեւյալ ծածկագիրը<head> Բաժին:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Տառատեսակը միացնելուց հետո կարող եք օգտագործել ձեր կայքում պատկերակները:
Մեթոդ 2.
Ներբեռնեք տառատեսակը տառատեսակի հիասքանչ : Բացահայտեք արխիվը եւ վերբեռնեք երկու թղթապանակ արխիվից մինչեւ կայքի սերվեր `CSS եւ տառատեսակներ: Եթե ձեր կայքում ունեք նման անուններով թղթապանակներ, ապա պարզապես անհրաժեշտ է ներբեռնված պանակներից ֆայլեր ավելացնել դրանց:
Կարող եք օգտագործել ֆայլի ամբողջական կամ ականազերծված տարբերակը.
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Ինչպես օգտագործել տառատեսակը Awesome սրբապատկերներ
Սրբապատկերները կարող են ավելացվել վեբ էջում երկու եղանակով. Համապատասխան դասեր սահմանելով<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> LI. Նախքան {բովանդակությունը. "\ F015";1 ստանդարտ սրբապատկեր
Font Awesome- ը նախագծված է օգտագործվելու ներկառուցված տարրերով: Սրբապատկերներ ավելացնելու համար դուք նախ պետք է սահմանեք FA դասը<i> կամ<span> տարր.
Ընտրված պատկերակը տարրից առաջ կամ հետո ավելացնելու համար, դատարկ<i></i> կամ<span></span> Element- ը ավելացվում է տարրին, որը նշանակվում է պատկերակի դաս, ինչպես նաեւ լրացուցիչ դաս, որը տարածում է ոճավորումը:
<i class="fa fa-camera-retro"></i>2 մեծ սրբապատկեր
ICON- ի չափը բարձրացնելու համար իր բեռնարկղի համեմատ օգտագործեք FA-LG (33% աճ), FA-2X, FA-3X, FA-4x, FA-5X դասընթացներ:
<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 սրբապատկեր փամփուշտների ցուցակի համար
Օգտագործեք FA-UL եւ FA-LI դասերը `լռելյայն փամփուշտները փոխարինելու համար<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>Lorem Ipsum Dolor sit amet, Consectetur Adipiscing Elit. Donec Nec Purus Compy, Posuere Libero in, Porta Sapien. SED ELIT DECLUS- ում: SED LACUS ELIT, SEMPER VITAE FELIS ID, SODALES CAPPYAGE SAPIEN:</p>6 անիմացիոն սրբապատկերներ
Ավելացնել FA- պտտվող, FA-PULSE, FA-REMSH, FA-COG դասընթացներ `պտտվող սրբապատկերներ տեղադրելու համար: Անիմացիան չի ապահովվում 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- պտտվող- * եւ FA-Flip- ի դասերը:
<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
Սրբապատկերներ վեբ ծրագրերի համար FA-React- ը `\ F042;FA-Anchor - \ F13D;
FA-Archive - \ F187;
FA-Ռադիո - \ F047;
FA-Asterisk - \ F069;
FAAT - \ F1FA;
FA-BACED- սանդղակ - \ F24e;
FA-BAN - \ F05E;
FA-Bank - \ F19C;
FA-BARCODE - \ F02A;
FA-BATTERE-DEGMING - \ F244;
FA-մարտկոց-կես - \ F242;
FA-մարտկոց-թաղամաս - \ F243;
FA-Batterg-երեք քառորդներ - \ F241;
FA-Battery-Full - \ F240;
FA-BED - \ F236;
FA-գարեջուր - \ f0fc;
FA-Bell - \ f0f3;
Fa-Bell-slash - \ f1f6;
FA-Binoculars - \ f1e5;
FA- ծննդյան-տորթ - \ f1fd;
FA-Bolt - \ f0e7;
FA-BOMB - \ F1E2;
FA-գիրք - \ F02D;
Պտտեցնել կամ մատնել սրբապատկերները, օգտագործեք FA- պտտվող- * եւ FA-Flip- ի դասերը:
4 հարակից ռեսուրսներ
Բացի տառատեսակի հիասքանչ հավաքածուից, կարող եք նաեւ օգտագործել այլ պատկերակների տառատեսակներ:
FontelloFontello ունի պատկերակի տարբեր տառատեսակների մեծ հավաքածու: Կարող եք ընտրել ձեր նախընտրած սրբապատկերները եւ ներբեռնել դրանք ձեր համակարգչում:
Հիմնադրամի պատկերակը:Հիմնագրի Icon Icon տառատեսակի մեկ այլ հավաքածու է Հիմնադրամի շրջանակի մշակողներից: Ի լրումն ստանդարտ սրբապատկերներից, տեղում ներկայացված են կլոր սրբապատկերներ, սոցիալական մեդիա սրբապատկերներ եւ այլն:
Նյութական սրբապատկերներ:Նյութական սրբապատկերները Google- ի միասնական հարթ սրբապատկերներ են, որոնք մարմնավորում են ընկալման հեշտությունը: Սրբապատկերները օպտիմիզացված են բոլոր ընդհանուր պլատֆորմների եւ էկրանի բոլոր բանաձեւերի համար:
Icon Font Collection- ը պարունակում է 750+ սրբապատկեր: Ձեր կայքում հավաքածու տեղադրելու ամենահեշտ ձեւը Google վեբ տառատեսակների նման սրբապատկերներ օգտագործելն է: Դա անելու համար հետեւյալ ծածկագիրը ներառված է էջի Markup- ում.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Տառատեսակը զննարկիչներում ճիշտ ցուցադրելու համար այն տարրը, որը կօգտագործի պատկերակի տառատեսակը, տրվում է նյութի սրբապատկերների դասը.
. Նյութական-սրբապատկերներ {տառատեսակ. «Նյութական սրբապատկերներ»; Տառատեսակ. Նորմալ տառատեսակ, նորմալ տառատեսակ. 24px; / * Նախընտրելի պատկերակի չափը * / ցուցադրում. Ներքին բլոկ; Լայնությունը, 1EM; Բարձրություն, 1EM; տող-բարձրությունը `1; Տեքստային վերափոխում. Ոչ մեկը; Նամակ-տարածություն. Նորմալ Word- փաթեթավորում. Նորմալ; Սպիտակ-տարածություն. Nowrap; Ուղղություն, LTR; -Էբկիտ-տառատեսակ-հարթեցում. Անտիվազեր; / * Աջակցում են բոլոր վեբ-բրաուզերների * / տեքստի մատուցում. Optimizelegibility; / * Safari եւ Chrome աջակցություն * / -Moz-OSX-FONT-Smooting: GRAYSCALE; / * Firefox աջակցություն: * / Տառատեսակ-հնարավորություններ-պարամետրեր. «Լիգա»; / * IE աջակցություն: * /Սրբապատկերներն իրենք են ավելացվում օգտագործելով<I class=''material-սրբապատկերներ''>Պատկերների կապանք կամ HTML կոդ</i> Tag, օրինակ:
<i class="material-սրբապատկերներ">Account_balance_wallet</i><i class="material-սրբապատկերներ"></i>Լիգասը հասկացվում է բոլոր ժամանակակից զննարկիչների կողմից, այսինքն `սկսած 10-րդ տարբերակից: Icon ծածկագիրը ստեղծվում է ինքնաբերաբար, դրա համար անհրաժեշտ է ձախից սեղմել պատկերակի պատկերին եւ պատճենել առաջարկվող տեսքը:
Պատկերակի չափը
Պատկերակի չափը is controlled by additional classes:
. Նյութական-պատկերակները .D-18 {տառատեսակ. 18px;} / * համար<i class="material-սրբապատկերներ md-18"></i> * /. Նյութական-պատկերակներ .D-24 {տառատեսակ. 24px;} / * համար<i class="material-սրբապատկերներ md-24"></i> * /. Նյութական-պատկերակներ .MD-36 {տառատեսակ. 36px;} / * համար<i class="material-սրբապատկերներ md-36"></i> * /. Նյութական-պատկերակներ .MD-48 {տառատեսակ. 48px;} / * համար<i class="material-սրբապատկերներ md-48"></i> * /Պատկերակի գույնը
Սրբապատկերների գույնը սահմանվում է նաեւ լրացուցիչ դասերի միջոցով.
.<i class="material-սրբապատկերներ md-dark"></i> * /.Այլ-պատկերակներ ...- թեթեւ {Գույն, RGBA (255, 255, 255, 1);} / *<i class="material-սրբապատկերներ md-light"></i> * /. Նյութական-պատկերակներ .MD-Dark.md-intive {Գույն: RGBA (0, 0, 0,2.26);} / *<i class="material-սրբապատկերներ md-dark md-inactive"></i> * /. Նյութական-պատկերակներ ..d-light.md-intive-intive {Գույն, RGBA (255, 255, 255, 0.3);} / *<i class="material-սրբապատկերներ md-light md-inactive">դեմք</i> * /Պատվերով գույնը սահմանելու համար հարկավոր է ավելացնել մի դաս, որը սահմանում է պատկերակի գույնը, օրինակ.
. Նյութական-սրբապատկերներ. Այգիգո {Գույն, # 1A237E;} / *<i class="material-սրբապատկերներ indigo"></i> * /Հաճախակի Տրվող Հարցեր
- Ինչ է տառատեսակը հիանալի տերմիններով:
- Ըստ էության, դա տառատեսակ է պատկերակներով, որոնք կարող են ավելացվել ցանկացած վեբ էջի տարր, դրա տեսանելիությունն ու դիզայնը բարձրացնելու համար: Հավաքածուն բաղկացած է մի քանի հարյուր սրբապատկերներից, որոնք հարմար են ցանկացած առաջադրանքի եւ նպատակի համար:Լրացուցիչ տեղեկություններ այս հղման վերաբերյալ
Michel Pinson- ը ճանապարհորդական խանդավառ եւ բովանդակության ստեղծող է: Կրթության եւ հետախուզման կրքի միաձուլումը, նա ինդուկտիվ է ճանաչել գիտելիքների եւ ուրիշներին ոգեշնչել կրթական բովանդակությունը գրավելու միջոցով: Աշխարհը ավելի մոտեցնելով համաշխարհային փորձաքննություն ունեցող անհատներին եւ թափառող զգացողություն:
