Şrift Zəhmli 6: Tam Rəy
- 1 Şriftin zəhmli qurulması necə
- Metod 1.
- Metod 2.
- 2 Şrift zəhmli nişanlar necə istifadə etmək olar
- 1 standart nişanlar
- 2 böyük nişanlar
- 3 Sabit eni nişanlar
- Bulleted siyahısı üçün 4 nişanlar
- 5 Çərçivəli nişanlar və sitatlar
- 6 cizgi nişanları
- 7 dəyişdirilmiş nişanlar
- 8 Birləşmə nişanları
- 3 Font Awesome 4.5.0 collection, classes vəcss code to insert using the content property
- 4 Müvafiq mənbələr
- Icon ölçüsü
- İkon rəngi
- Tez-Tez Verilən Suallar
Şrift zəhmli, genişlənən vektor nişanlar toplusudur. Nişanlar CSS xüsusiyyətlərindən istifadə edərək biçimlendirilə bilər, rənglərini, ölçüsünü, kölgəsini və daha çoxunu təyin edə bilər. Şrift versiyası 5.5.0 605 nişan daxildir.
1 Şriftin zəhmli qurulması necə
Metod 1.
Aşağıdakı kodu əlavə edərək faylın şrift-zəhmli.css versiyasından istifadə edin<head> Bölmə:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Şrift qoşulduqdan sonra saytınızdakı nişanlar istifadə edə bilərsiniz.
Metod 2.
Şriftini şriftdən zəhmli -dən yükləyin. Arxivi çıxarın və arxivdən iki qovluq Sayt serverinə - CSS və şriftlərə yükləyin. Saytınızdakı bu cür adları olan qovluqlarınız varsa, onda yüklənmiş qovluqlardan onlara fayl əlavə etməlisiniz.
Faylın tam və ya minifalı versiyasından istifadə edə bilərsiniz:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Şrift zəhmli nişanlar necə istifadə etmək olar
İkonlar bir veb səhifəyə iki yolla əlavə edilə bilər: uyğun dərsləri təyin etməklə<i> və<span> elements, və yaby adding them to the desired element using the :before, :after pseudo-elements vəthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: {Məzmun: "\ F015"; / * Ev nişanını əlavə edin1 standart nişanlar
Şrift zəhmli inline elementlərlə istifadə üçün nəzərdə tutulmuşdur. Nişanlar əlavə etmək üçün əvvəlcə FA sinifini təyin etməlisiniz<i> və ya<span> element.
Elementdən əvvəl və ya sonra seçilmiş simge əlavə etmək üçün boşdur<i></i> və ya<span></span> Element, bir simge sinf təyin edilmiş elementə, habelə üslubu uzadan əlavə bir sinif halına gətirilir.
<i class="fa fa-camera-retro"></i>2 böyük nişanlar
Konteynerinə nisbətən bir simge ölçüsünü artırmaq üçün FA-LG (33% artım), FA-2X, FA-3X, FA-4X, FA-5X dərslərindən istifadə edin.
<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 Sabit eni nişanlar
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation və yalists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Ev</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Kitabxana</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Proqramlar</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Parametrlər</a ></li></ul>Bulleted siyahısı üçün 4 nişanlar
Defolt güllələri bir əvəz etmək üçün FA-UL və FA-LI siniflərindən istifadə edin<ul>...</ul> Bulleted siyahısı.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>siyahı</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>siyahı</li> <li><i class="fa-li fa fa-square"></i>siyahı</li></ul>5 Çərçivəli nişanlar və sitatlar
Use the fa-border class to set the border for the icon. The pull-right və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 oturan amet, alanpetur elit. Donec Nec Purus Counge, Posuere Libero, Porta Sapien. Sed elit lektusda. SED LACUS ELIT, SEST VITAE FELIS ID, Sodales Cooles Sapien.</p>6 cizgi nişanları
İplik nişanlarını qurmaq üçün fa-spin, fa-nəbz, fa-yeniləmə, fa-cog sinifləri əlavə edin. Animasiya IE8-də dəstəklənmir - 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 dəyişdirilmiş nişanlar
Nişanları döndərmək və ya çevirmək üçün FA-Rotate- * və Fa-Flip- * dərsləri istifadə edin.
<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 Birləşmə nişanları
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, və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 vəcss code to insert using the content property
Veb tətbiqləri üçün nişanlar Fa-tənzimləmə - \ f042;Fa-lövbər - \ f13d;
FA-Arxiv - \ F187;
FA-Oklar - \ F047;
Fa-ulduz - \ f069;
FAAT - \ F1FA;
FA-balans miqyaslı - \ f24e;
Fa-Ban - \ f05e;
FA-Bank - \ f19c;
Fa-barkod - \ f02a;
Fa-batareya-boş - \ f244;
Fa-batareya-yarı - \ f242;
FA-Batareya-Dörddəbir - \ F243;
Fa-batareya-dörddəbir - \ f241;
Fa-batareya-tam - \ f240;
Fa yataq - \ f236;
Fa-pivə - \ f0fc;
FA-BELL - \ F0F3;
Fa-Bell-Slash - \ F1F6;
Fa-durbinlər - \ f1e5;
Fa-ad günü tortu - \ f1fd;
FA-Bolt - \ F0E7;
Fa-bomba - \ f1e2;
FA-Kitab - \ F02D;
Nişanları döndərmək və ya çevirmək üçün FA-Rotate- * və Fa-Flip- * dərsləri istifadə edin.
4 Müvafiq mənbələr
Şriftin zəhmli kolleksiyasına əlavə olaraq, digər simge şriftlərindən də istifadə edə bilərsiniz.
Fontello.Fontello müxtəlif simge şriftlərinin böyük bir kolleksiyasına malikdir. İstədiyiniz nişanları seçə və kompüterinizə yükləyə bilərsiniz.
Vəqf nişanı.Tonale Icon Fondun çərçivəsinin inkişaf etdiricilərindən başqa bir simges şrift kolleksiyasıdır. Standart nişanlara əlavə olaraq, saytın dəyirmi nişanlar, sosial media nişanları və daha çox xüsusiyyətləri var.
Material nişanlar.Material nişanlar, qavrayış rahatlığını ehtiva edən Google'un vahid düz nişanlardır. İkonlar, bütün ümumi platformalarda və bütün ekran qətnamələri üçün gözəl ekran üçün optimallaşdırılmışdır.
Icon Font kolleksiyasında 750+ nişanlar var. Veb saytınızda bir kolleksiya qurmağın ən asan yolu, Google Web şriftləri kimi nişanlar istifadə etməkdir. Bunu etmək üçün aşağıdakı kod səhifə işarəsinə daxil edilmişdir:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Şrifti brauzerlərdə düzgün göstərmək üçün, simge şriftindən istifadə edən element material-iCons sinifinə verilir:
.material-nişanlar {şrift-ailə: 'material nişanlar'; Şrift çəkisi: Normal şrift tərzi: normal şrift ölçüsü: 24px; / * Tercih edilmiş simge ölçüsü * / ekran: inline blok; eni: 1em; Hündürlük: 1em; Xətt hündürlüyü: 1; Mətn dəyişdirin: Yoxdur; Məktub boşluğu: Normal söz sarğı: Normal; Ağ boşluq: Nowrap; İstiqamət: ltr; -webkit-şrift-hamarlaşdırıcı: antialiased; / * Bütün WebKit brauzerləri tərəfindən dəstəklənir * / mətn göstərmə: optimasızlıq; / * Safari və xrom dəstəyi * / -moz-osx-şrift-hamarlaşdırıcı: boz rəngli; / * Firefox dəstəyi. * / Şrift xüsusiyyətləri-parametrləri: 'Liga'; / * Yəni dəstək. * /}Nişanlar özləri istifadə edərək əlavə olunur<I class=''material-nişanlar''>İşarənin ligature və ya html kodu</i> Etiket, məsələn:
<i class="material-nişanlar">hesab_balance_wallet</i><i class="material-nişanlar"></i>Ligature, bütün müasir brauzerlər tərəfindən başa düşülür, IE - 10-cu versiyadan başlayaraq, icon kodu avtomatik olaraq yaradılır, bunun üçün simge görüntüsünə tıklamalı və təklif olunan görünüşü kopyalamalısınız.
Icon ölçüsü
Icon ölçüsü is controlled by additional classes:
.material-iCONS.MD-18 {Font-Ölçüsü: 18px;} / * üçün<i class="material-nişanlar md-18"></i> * /.material-iCONS.MD-24 {Font-ölçüsü: 24px;} / * üçün<i class="material-nişanlar md-24"></i> * /.material-iCONS.MD-36 {Font-ölçüsü: 36px;} / * üçün<i class="material-nişanlar md-36"></i> * /.material-iCONS.MD-48 {Font-ölçüsü: 48px;} / * üçün<i class="material-nişanlar md-48"></i> * /İkon rəngi
Nişanların rəngi də əlavə siniflərdən istifadə edərək təyin olunur:
.material-iCONS.MD-Dark {rəng: RGBA (0, 0, 0, 0, 0,54);} / *<i class="material-nişanlar md-dark"></i> * /.material-iCONS.MD-Light {Rəng: RGBA (255, 255, 255, 1);} / *<i class="material-nişanlar md-light"></i> * /.material-iCONS.MD-DARK.MD-INFORACT {Rəng: RGBA (0, 0, 0, 0, 0,26);} / *<i class="material-nişanlar md-dark md-inactive"></i> * /.material-iCONS.MD-Light.md-Fəaliyyətsiz {Rəng: RGBA (255, 255, 255, 255, 0.3);} / *<i class="material-nişanlar md-light md-inactive">üz</i> * /Xüsusi bir rəng qurmaq üçün, məsələn, simgənin rəngini müəyyənləşdirən bir sinif əlavə etməlisiniz.
.material-iCONS.INDIGO {Rəng: # 1A237E;} / *<i class="material-nişanlar indigo"></i> * /Tez-Tez Verilən Suallar
- Sadə baxımdan şrift zəhmli nədir?
- Əslində, görmə qabiliyyətini və dizaynını artırmaq üçün istənilən veb səhifə elementinə əlavə edilə bilən nişanlar olan bir şriftdir. Kolleksiya hər hansı bir tapşırıq və məqsəd üçün uyğun bir neçə yüz nişandan ibarətdir.Bu link haqqında daha çox məlumat
Mişel Pinson, səyahət həvəskarı və məzmun yaradıcısıdır. Təhsil və kəşfiyyata birləşən ehtiras, bilik mübadiləsi və təhsil məzmunu ilə başqalarına ilham vermək üçün istifadə edir. Dünyanı qlobal təcrübə və gəzinti hissi ilə gücləndirməklə dünyanı daha da yaxınlaşdırır.
