Фонт Авесоме 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 Сродне ресурсе
- Величина иконе
- Боја икона
- Често Постављана Питања
Фонт Авесоме је збирка скалабилних икона вектора. Иконе се могу форматирати помоћу ЦСС својстава, поставите њихову боју, величину, сенку и још много тога. Фонт верзија 5.5.0 укључује 605 икона.
1 Како инсталирати Фонт Авесоме
Метода 1.
Користите верзију датотеке Фонт-Авесоме.цсс додавањем следећег кода на<head> Одељак:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Једном када је фонт повећан, можете користити иконе на својој веб локацији.
Метода 2.
Преузмите фонт са ФОНТ АВЕСОМЕ . Распакирајте архиву и пренесите две мапе са архиве на сервер сајта - ЦСС и фонтови. Ако већ имате мапе са таквим именима на вашој веб локацији, онда само требате додати датотеке из преузетих мапа.
Можете да користите потпуну или минификују верзију датотеке:
<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> ЛИ: Пре {садржај: "\ ф015"; / * Додај кућну икону * / фонт-породица: фонтавесоме; цолор: # аааааа; маргин-десно: 10пк;}1 стандардне иконе
Фонт Авесоме је дизајниран да се користи са инлине елементима. Да бисте додали иконе, прво морате да поставите Фа Цлас на<i> или<span> Елемент.
Да бисте додали одабрану икону пре или после елемента, празан<i></i> или<span></span> Елемент се додаје у елемент, који је додељен класу иконе, као и додатна класа која проширује стил.
<i class="fa fa-camera-retro"></i>2 велике иконе
Да бисте повећали величину иконе у односу на њен контејнер, користите ФА-ЛГ (Повећање 33%), ФА-2Кс, ФА-3Кс, ФА-4Кс, ФА-5Кс часове.
<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 иконе за листу за булте
Користите ФА-УЛ и ФА-ЛИ класе да бисте заменили задане метке у а<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>Лорем Ипсум Долор Сет Амет, ЦонцецтУр Адиписцинг Елит. Донец Нец Пурус Цонгуе, Посуере Либеро Ин, Порта Сапиен. У СЕД Елит Лецтусу. Сед Лацус Елит, Семпер Витае Фелис ИД, Содалес Цонгуе Сапиен.</p>6 Анимиране иконе
Додајте ФА-Спин, ФА-Пулсе, ФА-Рефресх, Фа-ЦОГ часове да бисте поставили иконе која се врти. Анимација није подржана у ИЕ8 - ИЕ9.
<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
Иконе за веб апликације Фа-Адеарцх - \ Ф042;Фа-сидро - \ Ф13Д;
ФА-архива - \ Ф187;
ФА-Стрелице - \ Ф047;
ФА-Астериск - \ Ф069;
Фаат - \ Ф1ФА;
Фа-баланс-скала - \ Ф24е;
Фа-Бан - \ Ф05Е;
ФА-Банк - \ Ф19Ц;
ФА-баркод - \ Ф02А;
Фа-батерија-празна - \ Ф244;
ФА-батерија-упола - \ Ф242;
ФА-батерија-квартал - \ Ф243;
ФА-батерија-три четвртине - \ Ф241;
ФА-батерија - ФУЛЛ - \ Ф240;
Фа-Бед - \ Ф236;
Фа-Беер - \ Ф0ФЦ;
ФА-БЕЛЛ - \ Ф0Ф3;
ФА-БЕЛЛ-СЛАСХ - \ Ф1Ф6;
ФА-двоглед - \ Ф1Е5;
ФА-рођендан-торта - \ Ф1ФД;
Фа-вијак - \ Ф0Е7;
ФА бомба - \ Ф1Е2;
Фа-Боок - \ Ф02Д;
Да бисте ротирали или окренули иконе, користите класе ФА-Ротате-* и ФА-Флип-*.
4 Сродне ресурсе
Поред фантастичне колекције фонтова, можете користити и друге фонтове иконе.
Фонтелло.Фонтелло има велику колекцију различитих фонтова икона. Можете да одаберете иконе које вам се свиђају и преузму на рачунар.
Икона фондације.Икона фондације %% %% је још једна икона колекција фонтова од програмера оквира Фондације. Поред стандардних икона, сајт садржи иконе, иконе друштвених медија и још много тога.
Материалне иконе.Иконе материјала су Гоогле-ове јединствене равне иконе које утјеловљују ублажавање перцепције. Иконе су оптимизоване за прелепи приказ на свим уобичајеним платформама и за све резолуције на екрану.
Колекција фонтова икона садржи 750+ икона. Најлакши начин за инсталирање колекције на вашој веб локацији је да користите иконе попут Гоогле веб фонтова. Да бисте то учинили, следећи код је укључен у ознаку странице:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Да бисте исправно приказали фонт у прегледачима, елемент који ће користити фонт иконе добија се класа иконе материјала:
.Материал-Ицонс {фонт-породица: 'Иконе материјала'; Фонт-Тежина: Нормални фонт-стил: нормална величина фонта: 24пк; / * Пожељна величина иконе * / дисплеј: Инлине-блок; Ширина: 1ЕМ; Висина: 1ЕМ; Висина линије: 1; Трансформација текста: ниједан; Размак слова: Нормални омотач речи: нормално; Бели простор: Новрап; Правац: ЛТР; -Вебкит-Фонт-изглађивање: Антиалиасид; / * Подржане сви вебКит претраживачи * / текстуална рендерирање: оптимизалегибилност; / * Сафари и Цхроме Суппорт * / -Моз-ОСКС-фонт-изглађивање: ГреиСцале; / * Подршка за Фирефок. * / Подешавања фонтова-функција: 'Лига'; / * Тј. Подршка. * /}Сами иконе се додају помоћу<I class=''material-иконе''>Лигатура или ХТМЛ код иконе</i> Ознака, на пример:
<i class="material-иконе">налоге_баланце_валлет</i><i class="material-иконе"></i>Лигатура се схватају сви савремени претраживачи, тј. Почевши од верзије 10. Кодекс иконе се аутоматски генерише, за то вам је потребно да оставите на левој икони и икони предложени изглед.
Величина иконе
Величина иконе is controlled by additional classes:
.Материал-ицонс.мд-18 {фонт-сизе: 18пк;} / * за<i class="material-иконе md-18"></i> * /.Материал-ицонс.мд-24 {фонт-сизе: 24пк;} / * за<i class="material-иконе md-24"></i> * /.Материал-ицонс.мд-36 {фонт-сизе: 36пк;} / * за<i class="material-иконе md-36"></i> * /.Материал-ицонс.мд-48 {фонт-сизе: 48пк;} / * за<i class="material-иконе md-48"></i> * /Боја икона
Боја икона такође је постављена коришћењем додатних класа:
.Материал-ицонс.мд-дарк {боја: ргба (0, 0, 0, 0,54);} / *<i class="material-иконе md-dark"></i> * /.Материал-Ицонс.мд-Лигхт {Боја: РГБА (255, 255, 255, 1);} / *<i class="material-иконе md-light"></i> * /.Материал-ицонс.мд-дарк.мд-неактивно {боја: РГБА (0, 0, 0, 0,26);} / *<i class="material-иконе md-dark md-inactive"></i> * /.Материал-ицонс.мд-лигхт.мд-неактивно {Боја: РГБА (255, 255, 255, 0,3);} / *<i class="material-иконе md-light md-inactive">лице</i> * /Да бисте поставили прилагођену боју, морате да додате класу која дефинише боју иконе, на пример:
.Материал-ицонс.индиго {боја: # 1а2337е;} / *<i class="material-иконе indigo"></i> * /Често Постављана Питања
- Шта је фонтове феноменално у једноставним условима?
- У суштини, то је фонт са иконама које се могу додати било којој елементу веб странице да побољша њену видљивост и дизајн. Колекција се састоји од неколико стотина икона погодних за било који задатак и сврху.Више информација о овој вези
Мицһел Пинсон је ентузијаста за путовање и Створитељ садржаја. Спајање страсти за образовање и истраживање, искрвари се да дели знање и надаһњују друге кроз очајнички образовни садржај. Доводите свет ближе оснаживању појединаца са глобалном експертизом и осећајем лутања.
