Уеб разработчиците са много свикнали да използват икони за представяне на конкретно действие или иконата може графично да представя всяка команда или действие или индикатор на уеб страница. Иконите се използват както в документи, така и в приложения и могат да бъдат избираеми или не избираеми.
Например изображенията, които виждаме на бутоните на приложение, са всички икони и тези бутони могат да бъдат избрани.
За да се улесни проектирането и програмирането на уебсайтове, са разработени някои библиотеки с икони на шрифтове, тоест икони, които могат да се вмъкват, сякаш са текстови и са достъпни за използване в HTML страниците на уебсайт, спестявайки много работа за потребители, дизайнери и програмисти.
В този урок ще разгледаме някои библиотеки като Font Awesome, Bootstrap Glyphicons и Material Design Google, които са библиотеки с предварително зададени шрифтове за икони, често използвани от уеб разработчиците.
Страхотни инструменти и библиотека на шрифта
Font Awesome е библиотека с шрифтове, която изобразява икони с помощта на набор от базирани на CSS инструменти. Този инструмент е разработен за използване с Twitter Bootstrap, но може да се използва индивидуално като стилови таблици на всеки уебсайт.
Предимството да бъдеш CSS библиотека е, че работи на всеки браузър и устройство и дори се адаптира към всяка разделителна способност на екрана.
Можете да изтеглите библиотеката от уебсайта Font Awesome. Друга възможност е да използвате директната връзка към библиотеката:
Нека видим пример за как да приложите икони за социални мрежи с Font Awesome, създаваме html файл и добавяме следния код:
Страхотен шрифт - Икони на социалните медии
Всяка икона е представена с фа-икона на клас, така че например иконата за YouTube ще бъде fa-youtube, резултатът при показване в браузъра ще бъде следният:
След това можем да добавим наши собствени CSS класове или да променим предварително дефинирания, за да се адаптира към нашия дизайн, например между маркерите head добавяме следния CSS код.
Украса на икони чрез CSS
След това изпълняваме в браузъра и резултатът ще бъде следният:
Можем да видим, че сме приложили CSS към всяка икона и не сме добавили никакви изображения. Друга възможност за подобряване на видимостта е да промените клас на зависване, тоест, когато мишката се движи над икона, променете цвета на буквата.
За да направите това, ние променяме цвета в следния ред:
.social-icons .fa: hover {цвят: зелен; } Резултатът при мишката върху икона ще бъде следният:
Можем да го направим и с фона на всяка икона, като променим свойството на фона за цвят, който ни харесва.
Всички налични икони могат да се видят на уебсайта Font Awesome, иконите са организирани по категории.
Използването на този тип шрифт за икони за нашия уеб дизайн ни позволява да ускорим зареждането на страницата, тъй като не се нуждаем от изображения и предлагаме по -високо качество (особено на мобилни устройства при мащабиране)
Glyphicons Bootstrap Инструменти и библиотека
Glyphicons Bootstrap е библиотека с икони на шрифтове. Той предлага голямо разнообразие от икони във формат на шрифт. Тези икони са безплатни и можете също да разширите библиотеката с платени икони. Безплатните икони могат да се използват в проекти, базирани на уеб дизайн, без да се налага да ги купувате. Тази библиотека е ориентирана към икони за бутони, които изпълняват някои функции като печат, търсене, запазване и т.н.
Тази библиотека е включена като стилови таблици в Bootstrap, за да я използваме, можем да изтеглим Bootstrap от официалната й страница или да използваме следната връзка:
Можем също да видим иконите по категории на страницата Glyphicons.
След това нека видим пример, който използваме тази библиотека за икони за бутони и елементи за въвеждане на данни за формуляр:
Glyphicon Bootstrap - БутониТествахме на мобилно устройство така:Glyphicon Bootstrap - Бутони
Търсене Печат Вход Купи
Прилагаме иконата на списък към избрано
Автомобили Мотоциклети
Предимствата от използването на икони за шрифтове или икони за шрифтове е, че спестява необходимостта от извикване на изображение или икона, тъй като изображенията са във формат svg в css файла на библиотеката и тези изображения са мащабируеми.
Пълната библиотека може да бъде между 10Kb и 40Kb, което увеличава скоростта на зареждане на уебсайта.
Иконите са текст, затова можем да ги манипулираме с CSS и той ще отговори на всяко събитие, което програмираме с Jquery.
Ако в свойството CSS Font посочим размера на шрифта в им например font-size: 4em иконата ще бъде отзивчива и ще се адаптира към всяко устройство. Те могат да се използват и за програмиране на отзивчиви приложения с рамки, както се вижда в урока, програмиране на мобилни приложения с Ionic Framework, тези икони също се използват.
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
