Какво е ikonochny шрифт?
Ikonochny шрифта - това е един и същ шрифт. Въпреки това, вместо от букви и цифри, те съдържат символите и специалните символи. Можете да ги оформите с CSS, по същия начин, както го правите с обикновен текст.
Доводи за и против
Има много предимства на подмяна на растерни шрифтове ikonochnymi. Ето някои от тях:
- дизайн на CSS;
- вектор природа го прави лесно да ги мащабирате до всякакъв размер без загуба на качество;
- една заявка HTTP вместо многократно, за разлика от растерни изображения;
- По-бързо зареждане, поради малкия размер;
- широка подкрепа браузър включително IE6.
Означава ли това, че ikonochnye шрифтове са панацея? Не, разбира се, не. Това е страхотна техника, която можете да използвате в дизайна на проекта, но при използването им, има няколко недостатъка. Например, ако искате да покажете сложен образ, а не просто икона, а след това ikonochny шрифта - не най-доброто решение.
Така че, като правило, те могат да бъдат показвани само в един цвят, ако не се използват CSS трикове. Също така, могат да бъдат създадени някои икони за специфични размери, например, 16 х 16, 32 х 32, 48 х 48 и т.н. Ако по някаква причина промените размера на 25 × 25, резултатът може да бъде размита.
Заслужава да се отбележи, че в допълнение към ikonochnyh шрифтове, има и друг популярен решение: SVG. Употребата им може да реши някои проблеми. Например, можете да използвате повече от един цвят.
Следваща погледнем две ikonochnyh библиотеки на шрифта:
Като се вгледаме в четири различни примери за използване ikonochnyh шрифтове.
Страхотен шрифта
Font Страхотен - библиотека, която съдържа 439 икони. Това е абсолютно безплатно за лични и търговски цели. Първоначално тя е предназначена за първоначално зареждане, но можете да го използвате отделно.
Работа с Font Страхотен
Най-лесният начин да се свърже Font Страхотен - свързан посредством CDN. Ако работите офлайн - ще трябва да изтеглите комплекта.
Просто трябва да свържете генерирания CSS и шрифтове в различни формати.
За да използвате иконите, ще трябва да ги поставите вътре елемент от време, или аз. След това, трябва да ги назначи в два класа: еа плюс втори клас, които трябва да съответстват на името на икони, като еа дома. Тук можете да намерите имената на всички налични икони.
За повече информация и много примери могат да бъдат намерени на тази страница.
Сега нека да разгледаме някои примери.
Font Страхотен. Example # 1
В първия пример, ние създаваме вертикално меню. Първо, поставете иконите вътре в елемента аз и двойно увеличение техният размер, използвайки предварително определен клас еа-2x. След това ги подредите, използвайки CSS.
HTML ще изглежда така:
Font Страхотен. Example # 2
HTML за една икона е както следва:
CSS за стил икони:
Font Страхотен. Example # 3
HTML и CSS са подобни на предишните. Резултати.
икони IcoMoon
IcoMoon - е друг популярен ikonochny шрифт. По това време, ние можем да избираме между два пакета: единият с отворен код, друг премия. По-подробна информация можете да намерите тук. В зависимост от избрания пакет, броя и размера на наличните икони ще бъдат различни. Например, в един свободен пакет от 450 икони във внесения в 1266.
Просто IcoMoon осигурява онлайн приложение. където можете да намерите и изтеглите над 3500 икони. основни операции могат да се извършват в тази молба: завъртане, цветове на климата и др.
Освен това, имате възможност да импортирате своите икони и да създадете свои собствени ikonochnye шрифтове.
Работа с IcoMoon
Пакетът ще изберете, включват изображения в различни формати (SVG, PSD, AI). След изтеглянето на иконите, трябва да се свържете на CSS и генерирания шрифта папка.
За да използвате IcoMoon икони трябва да сложите един вътре елемент от време. След това трябва да се възложат клас, който трябва да съвпада с името на желаната икона, като икона дома. Можете също да конфигурирате имената на иконите в предпочитанията на разделите.
IcoMoon. пример
Ние събрахме иконите вътре педя елементи. и да направи с CSS.
HTML за две икони е както следва:
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии