Веб програмери су веома навикли да користе иконе за представљање одређене радње или икона може графички приказати било коју команду или радњу или индикатор на веб страници. Иконе се користе у документима и апликацијама и могу се бирати или не бирати.
На пример, слике које видимо на тастерима апликације су све иконе и ова дугмад се могу изабрати.
Да би се олакшао дизајн и програмирање веб локација, развијене су неке библиотеке икона фонтова, односно иконе које се могу уметнути као да су текстуалне и доступне за употребу на ХТМЛ страницама веб локације, што штеди много посла за корисници.дизајнери и програмери.
У овом водичу ћемо погледати неке библиотеке попут Фонт Авесоме, Боотстрап Глипхицонс и Материал Десигн Гоогле које су библиотеке са унапред подешеним фонтовима икона које често користе веб програмери.
Фонт Авесоме Тоолс анд Либрари
Фонт Авесоме је библиотека фонтова која приказује иконе помоћу скупа алата заснованих на ЦСС-у. Овај алат је развијен за употребу са Твиттер Боотстрапом, али се може користити појединачно као стилски опис на било којој веб локацији.
Предност ЦСС библиотеке је та што ради на било ком прегледачу и уређају, па се чак и прилагођава било којој резолуцији екрана.
Библиотеку можете преузети са веб странице Фонт Авесоме. Друга могућност је да користите директну везу до библиотеке:
Погледајмо пример како имплементирати иконе за друштвене мреже помоћу Фонт Авесоме, креирамо хтмл датотеку и додајемо следећи код:
Фонт Авесоме - Иконе друштвених медија
Свака икона је представљена класом фа-ицон, па ће на пример бити икона за ИоуТубе фа-иоутубе, резултат при приказивању у прегледачу ће бити следећи:
Затим можемо додати сопствене ЦСС класе или изменити унапред дефинисане како бисмо се прилагодили нашем дизајну, на пример између ознака хеад додајемо следећи ЦСС код.
Декорација икона путем ЦСС -а
Затим извршавамо у прегледачу и резултат ће бити следећи:
Можемо видети да смо применили ЦСС на сваку икону и да нисмо додали ниједну слику. Друга могућност за побољшање видљивости је промена лебдећа класа, то јест, када миш пређе преко иконе, промените боју слова.
Да бисмо то урадили, променимо боју у следећој линији:
.социал-ицонс .фа: ховер {цолор: греен; } Резултат приликом преласка курсором преко иконе биће следећи:
То можемо учинити и са позадином сваке иконе, мењајући својство позадине за боју која нам се свиђа.
Све доступне иконе могу се видети на веб страници Фонт Авесоме, иконе су организоване по категоријама.
Кориштење ове врсте фонта икона за наше веб дизајне омогућава нам убрзање учитавања странице јер нам не требају слике и нуде већи квалитет (посебно на мобилним уређајима при зумирању)
Алати и библиотека Глипхицонс Боотстрап
Глипхицонс Боотстрап је библиотека икона фонтова. Нуди велики избор икона у формату фонта. Ове иконе су бесплатне, а библиотеку можете проширити и плаћеним иконама. Бесплатне иконе се могу користити у пројектима заснованим на веб дизајну, а да их не морате купити. Ова библиотека је оријентисана на иконе за дугмад која обављају неке функције као што су штампање, претраживање, чување итд.
Ова библиотека је укључена у листу стилова у оквиру Боотстрапа, да бисмо је користили, можемо преузети Боотстрап са његове званичне странице или користити следећу везу:
Иконе такође можемо видети по категоријама на страници Глификони.
Затим погледајмо пример како користимо ову библиотеку за иконе за дугмад и елементе за унос података у образац:
Глипхицон Боотстрап - БуттонсТестирали смо на мобилном уређају како би то изгледало:Глипхицон Боотстрап - Буттонс
Тражи Штампај Пријави се Купи
Иконицу листе примењујемо на изабране
Аутомобили Мотоцикли
Предности коришћења икона фонтова или икона фонтова су у томе што се штеди при позивању слике или иконе јер су слике у свг формату у цсс датотеци библиотеке и те слике су скалабилне.
Комплетна библиотека може бити између 10 КБ и 40 КБ, што повећава брзину учитавања веб странице.
Иконе су текстуалне, па њима можемо манипулисати помоћу ЦСС -а и он ће одговорити на сваки догађај који програмирамо помоћу Јкуери -ја.
Ако у својству ЦСС Фонт наведемо величину фонта у ем на пример, фонт-сизе: 4ем икона ће реаговати и прилагодит ће се сваком уређају. Такође се могу користити за програмирање респонзивних апликација са оквирима као што се види у водичу, програмирање мобилних апликација са Иониц Фрамеворк -ом, ове иконе се такође користе.
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
