Фонт гайхалтай 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 Холбоотой нөөц
- Icon хэмжээ
- Iice өнгө
- Түгээмэл Асуултууд
Фонт гайхалтай бол вектор вектор дүрсийг цуглуулах явдал юм. Дүрсийг CSS Properties ашиглан форматлаж, өнгө, хэмжээ, сүүдэр, сүүдэрт тохируулна уу. FONT хувилбар 5.5.0 нь 605 дүрс багтсан болно.
1 Фонтыг хэрхэн яаж суулгах вэ
Арга 1.
FONT-AWESOME-ийг ашиглана уу<head> Хэсэг:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">ХУВИЙН ХУВЬ ХҮНИЙГ ХҮРГЭЕ, та өөрийн сайт дээрх дүрсүүдийг ашиглаж болно.
Арга 2.
Фонтыг фонтоос татаж авах . Архивыг задалж, архивыг архивт сервер рүү шилжүүлэх - CSS болон FONTS. Хэрэв танд ийм сайт дээрх ийм нэртэй хавтастай бол та татаж авсан фолдеруудаас файлуудаас файл нэмэх хэрэгтэй.
Та файлын бүрэн эсвэл эрдэс хувилбарыг ашиглаж болно.
<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: {АГУУЛГА: "\ F0105"; / FontaweS: Fontawees-ийг: Fontawesome: 10px; 10px; 10px;1 Стандарт дүрс
Фонт гайхалтай гайхалтай нь мөрөн элементүүдтэй ашиглахаар төлөвлөсөн болно. Тэмдэглэл нэмэхийн тулд та FA ангиллыг эхлээд тохируулах хэрэгтэй<i> эсвэл<span> элемент.
Элементээс өмнө эсвэл дараа нь сонгосон дүрсийг нэмэх, хоосон байна<i></i> эсвэл<span></span> Элемент нь элементийг icon ангилалд нэмж өгдөг, бас загварыг нягталж өгдөг нэмэлт анги.
<i class="fa fa-camera-retro"></i>2 том дүрс
Савтай харьцуулагчтай харьцуулахад дүрсийг нэмэгдүүлэхийн тулд FA-LG (33% -ийг), FA-LG (33% нь 3x, fa-3x, fa-3x, fa-3x, fa-3x, fa-3x, fa-4x, fa-4x, 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 ангиудыг ашиглан үндсэн сумыг 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>Lorem Ipsum Dolor Sig Saw amet, Consectetur Adipiscing Elit. Донек NEC NEC PERUS Congue, POSTUEE POLEADEO POLEADEO POLEADO IN, PORTA SAPIEN. SED ELIT LECEUS-д. SED LACUS ELIT, SEMPER VITAE FELAE FELIS ID, SOALES COADES COAGE SAPIEN.</p>6 хөдөлгөөнт дүрс
FAIN Spin, FA-PULPES, FA-PULSES, FA-PUREST, FA-PURSEST, FA-PUREST, FA-COUNDING SPINNING ICONS-ийг тохируулах. IE8 - IE8-д анимейшныг дэмждэггүй.
<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-roupe- * ба 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-Trate - \ F042;FA-ANCHOR - \ F13D;
FA-Архив - \ F187;
Fa-Sarows - \ f047;
Fa-asterisk - \ f069;
FAAT - \ F1FA;
FA-FAILE-SCACESC - \ F24E;
Fa-хориг - \ F05E;
FA-Bank - \ F19c;
FA-Barcode - \ F02A;
FA-батерей хоосон - \ f244;
FA-батерей-хагас - \ F242;
FA-батерейны улирал - \ F243;
FA-батерей - дөрөвний гурвыг нь - \ F241;
Fa-батерей-бүтэн - \ F240;
FA-ийн ор - \ F236;
FA-BEAT - \ F0FC;
Fa-Bell - \ f0f3;
Fa-Bell-slash - \ f1f6;
Fa-дуран - \ f1e5;
FA-BAY-BAY-BAY - \ F1FD;
FA-BOLT - \ F0E7;
FA-BAMB - \ F1E2;
FA-Book - \ F02D;
Дүрсийг эргүүлэх эсвэл эргүүлэх, эргүүлэх, fa-roupe- * ба fa-flip- * ангиуд ашиглах.
4 Холбоотой нөөц
ҮНЭГҮЙ ҮНЭГҮЙ ҮНЭГҮЙ ҮНЭГҮЙ ҮНЭГҮЙ БОЛОМЖТОЙ БОЛОМЖТОЙ БОЛОМЖТОЙ БОЛОМЖТОЙ.
Fontello.fontello нь янз бүрийн дүрс фонтуудын том цуглуулгатай байдаг. Та дуртай дүрсүүдийг сонгож, компьютер дээрээ татаж авах боломжтой.
Сангийн дүрслэл.Зохиогчийн дүрс нь суурийн хүрээний хөгжүүлэгчдээс өөр дүрс фонт цуглуулга юм. Стандарт дүрсээс гадна сайт нь дугуй дүрс, нийгмийн мэдээллийн хэрэгслийн дүрсүүд, нийгмийн мэдээллийн дүрсүүд ба бусад.
материаллаг дүрс.Материалын дүрс нь Google-ийн нэгдсэн хавтгай дүрсийг ойлголттой нийцдэг. Тэмдэглэгээг бүх нийтлэг платформ дээр үзэсгэлэнтэй дэлгэц дээр оновчтой болгож, бүх дэлгэцийн бүх тогтоолуудад зориулагдсан болно.
ICON FONT цуглуулга нь 750+ дүрс агуулсан байна. Таны вэбсайт дээр цуглуулах хамгийн хялбар арга бол Google вэб фонт шиг дүрсийг ашиглах явдал юм. Үүнийг хийхийн тулд дараах кодыг хуудасны тэмдэглэгээнд оруулсан болно.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Хөтөч дэх фонтыг зөв харуулахын тулд icon font-ийг ашиглах элемент нь материаллаг дүрслэлийг өгнө:
.material-Тууч {Фонт-Гэр бүл: 'материаллаг дүрс'; Фонт жин: Ердийн үсгийн хэв маяг: Ердийн үсгийн хэмжээ: 24PX; / * ICOND ICON SIZE * / дэлгэц: Inline-Bock; Өргөн: 1ем; Өндөр: 1EM; ШУУД ҮЗЭХ: 1; Текст хувиргах: Аль нь ч биш; Захидалтай зай: Ердийн үгийн оролт: хэвийн; Цагаан орон зай: ownrap; чиглэл: ltr; -webkit-fonte-гөлгөр: antialiased; / * Бүх вэбкит хөтөч нар дэмжсэн * / текст-рикс хийх замаар дэмжигдсэн: Optimize-ийн боломж; / * Safari болон Chromari болон Chrome-ийн дэмжлэг * / -moz-osx-font-гөлгөр: Саарал өнгөтэй; саарал; / * Гал руу таталт дэмжлэг. * / FONT-FITE-Тохиргоо-Тохиргоо: 'LIGA'; / * Өөрөөр хэлбэл дэмжлэг. * /}Дүрс нь өөрсдийгөө ашиглан нэмж оруулдаг<I class=''material-Тууч''>Хөшөө эсвэл HTML код дүрс</i> Шошго, жишээ нь:
<i class="material-Тууч">Дансны_балис_воллет</i><i class="material-Тууч">Ий</i>Хөшөө нь орчин үеийн бүх хөтөч, өөрөөр хэлбэл, өөрөөр хэлбэл 10-р хувилбараас эхэлнэ. Энэ нь ICON-ийн дүрмийг автоматаар үүсгэж, ICON ICE-гийн дүр зургийг бүрдүүлж, санал болгосон дүр зургийг хуулах хэрэгтэй.
Icon хэмжээ
Icon хэмжээ is controlled by additional classes:
.material-Тууч.md-18 {фонт-хэмжээ: 18px; 18px;} / * / * / *<i class="material-Тууч md-18"></i> * /.material-Тууч.md-24 {фонт-хэмжээ: 24PX; 24px;} / * / *<i class="material-Тууч md-24"></i> * /.materialial-Тууч.md-36 {фонт-36 {фонт-хэмжээ: 36px;} / * / * -д<i class="material-Тууч md-36"></i> * /.material-Тууч.md-48 {фонт-хэмжээ: 48px; 48PX;} / * / * -д<i class="material-Тууч md-48"></i> * /Iice өнгө
Тэмдэгтийн өнгө нь нэмэлт ангиудыг ашиглан багцыг тохируулна.
.material-Тууч.md-харанхуй {өнгө: RGBA (RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.54);} / * / *<i class="material-Тууч md-dark"></i> * /.Material-Тууч.md-light {өнгө {өнгө: RGBA (255, 255, 255, 255, 255, 1);};} / * / *<i class="material-Тууч md-light"></i> * /.material-Тууч.md-харанхуй.md-inactivact {өнгө: RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.26);} / * / *<i class="material-Тууч md-dark md-inactive"></i> * /.material-Тууч.md-light.md-inactive {өнгөт {өнгөт: RGBA (255, 255, 255);} / 255, 255);} / * / *<i class="material-Тууч md-light md-inactive">нүүр</i> * /Жишээ нь тохируулсан өнгийг тохируулахын тулд та дүрсийг тодорхойлсон ангийг нэмэх хэрэгтэй.
.material-Тууч.indigo {өнгө: # 1A237E;} / * / * / *<i class="material-Тууч indigo"></i> * /Түгээмэл Асуултууд
- Энгийн хувьд ямар фонт гайхалтай вэ?
- Үндсэндээ энэ нь харагдах байдал, дизайныг сайжруулахын тулд ямар ч вэб хуудасны элементтэй хамт фонттой юм. Цуглуулга нь аливаа даалгавар, зорилгод тохиромжтой хэдэн зуун дүрсээс бүрдэнэ.Энэ холбоос дээр дэлгэрэнгүй мэдээлэл
Мишель Пинсон бол аялал жуулчлалын урам зориг, агуулга бүтээгч юм. Боловсрол, хайгуулын хүсэл тэмүүллийг нэгтгэх, мэдлэг олж авах, боловсролын агуулгыг олж авах замаар бусдад урам зориг өгөх, бусдад урам зориг өгдөг. Дэлхий ертөнцийг дэлхийн мэргэжлийн туршлага, тэнүүчлэх чадвартай хувь хүмүүсийг биелүүлэх замаар хамтад нь ойртуулах.