შრიფტი გასაოცარია 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 დაკავშირებული რესურსი
- ხატის ზომა
- ხატის ფერი
- ხშირად დასმული კითხვები
შრიფტი გასაოცარია მასშტაბური ვექტორული ხატების კოლექცია. ხატების ფორმატირება შესაძლებელია CSS თვისებების გამოყენებით, დააყენეთ მათი ფერი, ზომა, ჩრდილი და მრავალი სხვა. შრიფტის ვერსია 5.5.0 მოიცავს 605 ხატს.
1 როგორ დავაყენოთ შრიფტი გასაოცარია
მეთოდი 1.
გამოიყენეთ ფაილის Font-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 როგორ გამოვიყენოთ შრიფტის გასაოცარი ხატები
ხატები შეიძლება დაემატოს ვებ - გვერდს ორი გზით: შესაბამისი კლასების დაყენებით<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";/ * დაამატეთ სახლის ხატი */Font-Family: Fontawesome; ფერი: #aaaaaa; ზღვარი-მარჯვენა: 10px;}1 სტანდარტული ხატი
შრიფტი გასაოცარია, რომ გამოყენებული იქნას Inline Elements. ხატების დასამატებლად, პირველ რიგში, თქვენ უნდა დააყენოთ FA კლასი<i> ან<span> ელემენტი.
არჩეული ხატის დასამატებლად ელემენტის წინ ან მის შემდეგ, ცარიელი<i></i> ან<span></span> ელემენტს ემატება ელემენტი, რომელსაც ენიჭება ხატის კლასი, ასევე დამატებითი კლასი, რომელიც აფართოებს სტილს.
<i class="fa fa-camera-retro"></i>2 დიდი ხატი
ხატის ზომების გასაზრდელად, მისი კონტეინერთან შედარებით, გამოიყენეთ 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> Bulleted სია.
<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 Congue, Posuere Libero in, Porta Sapien. Sed Elit Lectus- ში. SED LACUS ELIT, SEMPER VITAE FELIS ID, Sodales Congue Sapien.</p>6 ანიმაციური ხატი
დაამატეთ FA-SPIN, FA-PULSE, FA-REFRESH, 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-rotate-* და 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 -adjust - \ f042;FA -Angor - \ F13D;
FA -Archive - \ F187;
FA- ისრები - \ F047;
Fa -ოსტატი - \ F069;
Faat - \ f1fa;
FA-Balance მასშტაბის-\ F24E;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
FA -BARCODE - \ F02A;
Fa-batter-empty-\ f244;
Fa-battery ნახევარი-\ f242;
Fa-batter-მეოთხედი-\ F243;
Fa-batter-სამ მეოთხედი-\ F241;
Fa-batter-full-\ f240;
FA -Bed - \ F236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binoculars - \ f1e5;
Fa-birthday ნამცხვარი-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
FA- წიგნი - \ F02D;
ხატების როტაციისთვის გამოიყენეთ fa-rotate-* და fa-flip-* კლასები.
4 დაკავშირებული რესურსი
შრიფტის გასაოცარი კოლექციის გარდა, შეგიძლიათ გამოიყენოთ სხვა ხატის შრიფტებიც.
ფონტელო.Fontello აქვს სხვადასხვა ხატის შრიფტის დიდი კოლექცია. შეგიძლიათ აირჩიოთ თქვენთვის სასურველი ხატები და გადმოწეროთ ისინი თქვენს კომპიუტერში.
ფონდის ხატი.ფონდის ხატი არის კიდევ ერთი ხატის შრიფტის კოლექცია ფონდის ჩარჩოს დეველოპერებისგან. სტანდარტული ხატების გარდა, საიტს აქვს მრგვალი ხატები, სოციალური მედიის ხატები და სხვა.
მატერიალური ხატები.მატერიალური ხატები არის Google- ის ერთიანი ბრტყელი ხატები, რომლებიც განასახიერებენ აღქმის მარტივად. ხატები ოპტიმიზირებულია ლამაზი დისპლეისთვის ყველა საერთო პლატფორმაზე და ეკრანის ყველა რეზოლუციისთვის.
ხატის შრიფტის კოლექცია შეიცავს 750+ ხატს. თქვენს ვებსაიტზე კოლექციის დაყენების ყველაზე მარტივი გზაა გამოიყენოთ ხატები, როგორიცაა Google Web შრიფტები. ამისათვის, შემდეგი კოდი შედის გვერდის მარკირებაში:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ბრაუზერებში შრიფტის სწორად გამოსახვისთვის, ელემენტს, რომელიც გამოიყენებს ხატის შრიფტს, ეძლევა მასალების დაშვების კლასი:
. მასალა -კონები {შრიფტი-ოჯახი: 'მატერიალური ხატები'; შრიფტის წონა: ნორმალური შრიფტის სტილი: ნორმალური შრიფტის ზომა: 24px; / * სასურველი ხატის ზომა */ ეკრანი: inline-block; სიგანე: 1EM; სიმაღლე: 1EM; ხაზის სიმაღლე: 1; ტექსტის ტრანსფორმაცია: არცერთი; ასო-სპექტრი: ნორმალური სიტყვის გადაფარვა: ნორმალური; თეთრი სივრცე: Nowrap; მიმართულება: LTR; -webkit-font-smoothing: ანტიალიზირებული; / * მხარს უჭერს ყველა WebKit ბრაუზერს */ ტექსტის გადაღება: ოპტიმიზაცია; / * Safari და Chrome მხარდაჭერა */ -moz-osx-font-smoothing: grayscale; /* Firefox მხარდაჭერა. */ შრიფტის გამჭრიახობა: 'ლიგა'; /* ე.ი. მხარდაჭერა. */}თავად ხატებს ემატება<I class=''material-ხატები''>ხატის ლიგატური ან HTML კოდი</i> Tag, მაგალითად:
<i class="material-ხატები">account_balance_wallet</i><i class="material-ხატები"></i>ლიგატას ესმის ყველა თანამედროვე ბრაუზერის მიერ, ანუ - დაწყებული ვერსიიდან 10. ხატის კოდი ავტომატურად წარმოიქმნება, ამისათვის თქვენ გჭირდებათ მარცხენა ღილაკი ხატის სურათზე და დააკოპიროთ შემოთავაზებული სახე.
ხატის ზომა
ხატის ზომა is controlled by additional classes:
.material-ხატები.md-18 {font-size: 18px;} /* for<i class="material-ხატები md-18"></i> */.material-ხატები.md-24 {font-size: 24px;} /* for<i class="material-ხატები md-24"></i> */.material-ხატები.md-36 {font-size: 36px;} /* for<i class="material-ხატები md-36"></i> */.material-ხატები.md-48 {font-size: 48px;} /* for<i class="material-ხატები md-48"></i> */ხატის ფერი
ხატების ფერი ასევე არის მითითებული დამატებითი კლასების გამოყენებით:
.material-ხატები.md-dark {ფერი: rgba (0, 0, 0, 0.54);} /*<i class="material-ხატები md-dark"></i> */.material-ხატები.md-Light {ფერი: rgba (255, 255, 255, 1);} /**<i class="material-ხატები md-light"></i> */.material-ხატები.md-dark.md-inactive {ფერი: rgba (0, 0, 0, 0.26);} /*<i class="material-ხატები md-dark md-inactive"></i> * /.material-ხატები.md-light.md-inactive {ფერი: rgba (255, 255, 255, 0.3);} /*<i class="material-ხატები md-light md-inactive">სახე</i> */საბაჟო ფერის დასადგენად, თქვენ უნდა დაამატოთ კლასი, რომელიც განსაზღვრავს ხატის ფერს, მაგალითად:
.material-ხატები.indigo {ფერი: #1A237E;} /*<i class="material-ხატები indigo"></i> */ხშირად დასმული კითხვები
- რა არის შრიფტი გასაოცარია მარტივი თვალსაზრისით?
- არსებითად, ეს არის შრიფტი ხატებით, რომელსაც შეუძლია დაამატოთ ნებისმიერი ვებ - გვერდის ელემენტი მისი ხილვადობისა და დიზაინის გასაუმჯობესებლად. კოლექცია შედგება რამდენიმე ასეული ხატისგან, რომლებიც შესაფერისია ნებისმიერი დავალებისა და მიზნისთვის.დამატებითი ინფორმაცია ამ ბმულზე
მიშელ პინსონი არის მოგზაურობის ენთუზიასტი და შინაარსის შემქმნელი. განათლებისა და გამოძიებისადმი ვნებას აერთიანებს, იგი ითვალისწინებს ცოდნის გაზიარებას და სხვების შთაგონებას საგანმანათლებლო შინაარსის მიმზიდველი გზით. მსოფლიოს უახლოვდება გლობალური ექსპერტიზის მქონე პირების უფლებამოსილებას და Wanderlust- ის გრძნობას.
