Фонтови икона су изванредни за вашу веб локацију: Ево зашто

Реклама

Чули сте за иконе и скоро сигурно сте чули за фонтове, али шта је то Фонт икона? Данас ћу вам показати шта су фонтови икона и како их можете користити за оживљавање веб локације. Хајде да почнемо.

Шта су иконе фонтова?

Фонтови икона су потпуно исти као и „обични“ фонтови - они дефинишу изглед и осећај дела текста. Велика разлика је у томе што фонтови икона не садрже слова и бројеве, већ симболе и иконе. Можда вас ово збуњује, као што је добар фонт ако не можете писати писма мајци!

Фонтови икона се углавном користе за обликовање веб локација. Будући да су засноване на векторима, помоћу њих се може мењати величина, померати, обликовати и мењати ЦСС 5 беби корака за учење ЦСС-а и постати Кицк-Асс ЦСС чаробњакЦСС је једина најважнија измена веб страница у последњој деценији, и отворио је пут раздвајању стила и садржаја. На модерни начин КСХТМЛ дефинише семантичку структуру ... Опширније . То пружа велику предност у односу на традиционалне методе дизајна, као што су слике. Изглед великог броја икона може се променити са само неколико линија кода. Не морате да мењате ниједну слику, отварате Пхотосхоп или преносите нове датотеке - само пишете код.

Почетак

Користит ћу Фонт Авесоме за ове примере, али теорија се може применити на мноштво других пакета фонтова.

Ево почетног ХТМЛ-а:

Ово је минимална количина ХТМЛ-а потребна за израду веб странице. Нећу објаснити већину тога, као што смо то објавили у нашем водичу како направити веб страницу.

Најважнија линија је следеће:

Ово учитава таблицу стила Авесоме са своје стране ЦДН. Без ове линије, ваша веб локација не би знала шта је Фонт Авесоме, тако да је веома важно. Ова таблица стилова обрађује сав тежак посао уградње веб фонтова и генерално вам олакшава ствари.

Иконе фонта одличне дефинишу ЦСС класе које су додате у ја ознаке. Они су изабрани јер на њима није прикључен ниједан прегледач или подразумевано дефинисан стил, тако да се ваше иконе неће побркати. Алтернативно, можете да додате часове у распон ознаке, али то вам затвара ХТМЛ.

Ево основне употребе. Ставите ово унутра тело ознаке:

 Моја прва икона

Ево како то изгледа:

Колико је то било лако? Разбијемо га Потребне су две класе да би Фонт Авесоме могао да ради. Први се зове фа, што заступа Фонт Авесоме. Ово је потребно за било коју икону, без обзира коју користите. Друга класа одређује одређену икону коју желите да користите - то може бити било шта, авион, особа или кредитна картица. Ово је такође префикс фа, а како је ово икона зупчаника, име јој је фа-цог. Можете да видите листу свих иконе у фонту Авесоме на њиховој веб локацији.

Покушајте да промените икону зупчаника у било коју другу.

Идете дубље

Једном када упознате основе, време је за неке напредне трикове.

Ако не желите да напишете свој ЦСС, можете користити стилове уграђене право у Фонт Авесоме. Постоји много класа помоћу којих можете да повећате иконе:

Још једна корисна класа је фа-спин. Тако ћете се иконе ротирати, а у комбинацији са претходним класама величине можете произвести неке лепе ефекте. Ево код:

Ево резултата:

Ротирати иконе је лако - користите тастере фата ротирање класа:

Број на крају дефинише степене окретања иконе, али немојте да вас одвлаче. Ограничени сте на 90, 180, или 270.

Последњи трик који можете да урадите је слагање. Тхе фа-стацк класа омогућава комбиновање две или више икона заједно. Ево код:

Ево како то изгледа:

Једном када почнете да комбинујете све те различите часове, могућности су заиста бескрајне.

Прилагођени ЦСС

Јер су фонтови икона само фонтове, можете их стилизовати помоћу ЦСС-а као и било који други елемент. Коришћењем малог ЦСС3 може бити дуг пут:

Ево ХТМЛ-а за ту икону:

Ево ЦСС-а:

@кеифрамес се крећу {фром {маргин-лефт: 0; } до {маргин-лефт: 400пк; } } .бике {анимација-име: преместити; анимација-трајање: 4с; }

Овај ЦСС је прилично базичан, али има велики утицај. Ово ипак није ЦСС туториал, тако да можда желите научите ЦСС 10 једноставних примера ЦСС кода које можете да научите за 10 минутаЖелите знати више о коришћењу ЦСС-а? Покушајте са овим основним примерима ЦСС кода, а затим их примените на сопствене веб странице. Опширније ако желите знати више о унутрашњем раду.

Ако заиста желите да урадите неке посебне ствари:

Ово се мало муца да би се смањила величина датотеке за Веб. Ево ХТМЛ-а:

Ево ЦСС-а:

@кеифрамес фаде {фром {опацити: 0; } до {непрозирност: 1; } } .персон {опацити: 0; анимација-име: изблиједити; } # п1 {боја: црвена; анимација-трајање: 2с; } # п2 {боја: наранџаста; анимација-трајање: 4с; } # п3 {боја: зелена; анимација-трајање: 6с; } # п4 {анимација-трајање: 8с; }

Као и претходни пример, и овај користи ЦСС3 анимације. Анимација под називом изблиједити креира се, а свака икона особе имплементира ову анимацију са различитим временским интервалима. Постоји пуно потенцијала за дивљење помоћу ових икона и ЦСС3.

То је све за данас. Сада бисте могли да користите иконе Фонтови за оживљавање ваше веб странице! Ако још нисте сигурни у своје вештине, погледајте ове ЦСС сајтови шаблона 11 ЦСС предложака: Не почињте од нуле!На хиљаде бесплатних ЦСС предложака доступних су на мрежи, а све обухвата модерне трендове дизајна и технологије. Можете их користити у њиховом оригиналном облику или их прилагодити тако да их учините својим. Опширније или ове ИоуТубе канали за почетак Желите да научите веб дизајн? 7 ИоуТубе канала за почетакИоуТубе има хиљаде видео записа и канала за почетнике веб дизајна. Овдје ћемо погледати неке од најбољих од којих сте започели. Опширније са веб дизајном.

Да ли сте данас научили нешто ново? Који је ваш омиљени Ицон Фонт? Јавите нам у коментарима испод!