Какво е шрифт на икона? (И как да използвате един)

Шрифтовете за икони са популярно решение на често срещан CSS проблем; как да включите уеб икони в дизайна на уебсайта си по ефикасен, бързо зареждащ се начин.

С изобилие от услуги, които да улеснят избора и използването на шрифт на иконата, не е нужно да създавате свой собствен от нулата. Шрифтовете за икони се намират в интернет.

Но какво точно е шрифт на иконата? И как ги използвате? Ето ръководство за всичко, което трябва да знаете за шрифтовете на иконите.

Разгледайте шрифтовете

Какво е шрифт на икона?

Шрифтовете за икони са шрифтове, които използват малки изображения, а не букви. Подобно на типа, всеки символ е мащабируем и може да бъде променен с помощта на CSS.

Основните причини за използване на шрифт на иконата са, че можете лесно да променяте размера, цвета, формата. Шрифтовете на иконите са прозрачни по природа, така че можете да ги поставите върху всеки цвят или тип фон и можете да добавяте щрихи или да променяте непрозрачността на иконите.

Всичко се прави с CSS, така че не е нужно да създавате уникални изображения за всеки нов екземпляр от икона в дизайна. (Това е чудесно за запазване на уебсайта и кода ви в леко тегло.)

Шрифтовете на иконите са векторни изображения, което означава, че са мащабируеми. Както при всеки друг шрифт, можете да ги направите толкова големи или малки, колкото искате. Използвайте шрифтове на икони сами като елементи на изкуството или дори разпръснати по други текстови полета.

Най-популярната и добре позната библиотека с икони за шрифтове е Font Awesome. Използва се за повече от 100 милиона уебсайта и включва здрава колекция от опции за икони. Работи с всички популярни инструменти, включително Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React и Ember.

Има и няколко други доста добре познати набора от икони на шрифтове.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Плюсовете и минусите на използването на иконките

Така че защо бихте използвали - или избягвате - шрифт на иконата? Ето някои от плюсовете и минусите на работата с този елемент на изкуството.

Плюсове на използването на Icon Fonts

• Иконите са лесни за мащабиране, стига да съществуват подходящите класове във вашия CSS
• Можете да получите големи библиотеки с икони с малко проблеми
• Промяната на свойствата на иконите е лесна, без значение какво сте използвали за изграждането на уебсайта си
• Лесно е да добавяте икони към всяка страница в уебсайта (просто въведете името на иконата)
• Има хиляди икони, от които да избирате във всички видове стилове
• Потребителите на WordPress могат да добавят шрифтове с икони с обикновен плъгин или чрез копиране на шрифтовата директория в кода (почти всеки интерфейс)
• Можете да създадете свой собствен шрифт на иконата, ако се нуждаете от нещо супер персонализирано

Недостатъци на използването на иконите за шрифтове

• Иконите са едноцветен или цветен градиент (в повечето случаи); някои повече премиум пакети променят това
• Няма добра резервна възможност, ако шрифтът на иконата не се зареди
• Може да не ви е необходим пълен набор от икони
• Някои екранни четци не знаят какво да правят с шрифтовете на иконите
• Може да не намерите опаковка, която да отговаря на вашите нужди

Как да използвате икони шрифтове

Въпреки че инструкциите за използване на шрифтове за икони могат да варират леко в зависимост от доставчика, който сте избрали, основната идея е същата.

Като цяло имате три възможности (освен ако не смятате сами да направите малко по-трудно кодиране):

• Използвайте плъгин, който инсталира всичко, така че трябва да извиквате само икони, които искате да използвате. (Супер лесно!)
• Използвайте вградени икони на шрифтове от вашия CMS или създател на уебсайт. Това работи чудесно, ако нямате персонализиран сайт или имате нужда / искате конкретен тип икона на шрифт. Повечето строители на уебсайтове идват с нещо „извън кутията“.
• Връзка ръчно към външен хост на шрифта на иконата. (По-сложната версия на използването на плъгин.)

Шрифтове на икони срещу SVG

По-големият дебат се превръща в това дали трябва (или бихте искали) да използвате шрифт на иконата спрямо SVG изображения за целите на вмъкването на малки изображения на вашия уебсайт. И двете опции са еднакво жизнеспособни и имат много общо с личните предпочитания.

Шрифтовете с икони обикновено са по-лесни за намиране и използване. SVG иконите са предпочитани от потребителите, които се нуждаят от повече контрол върху дизайна.

SVG (мащабируем вектор формат) файл може да ви даде малко повече гъвкавост в дизайна. (Не сте ограничени до един цвят). Малките мащабируеми файлове могат да бъдат качени директно във вашата медийна директория и са лесни за работа. Това е добър вариант, ако имате нужда само от шепа икони и не искате да се занимавате с библиотека.

SVG файловете са по-гъвкави с възможност за добавяне на повече цветове и анимация.

Шрифтовете с икони може да се зареждат по-бързо в дългосрочен план, защото са кеширани. Но разликата може да бъде съвсем минимална.

Шрифтовете за икони за позициониране могат да станат малко сложни, тъй като те са предмет на типични правила за шрифт, като размер, разстояние между линиите и вертикални подравнения. Само това е причината повечето хора, използващи шрифт на икони, да изберат утвърден доставчик, вместо да се опитват да направят своя собствена.

SVG файловете могат да включват елементи, които ги правят по-достъпни от шрифтовете с икони, които могат да попаднат като букви на букви на екраните четци.

Шрифтовете с икони обикновено са по-лесни за намиране и използване. Като цяло библиотеките са достъпни и не са трудни за разбиране. SVG иконите са предпочитани от потребителите, които искат повече възможности за контрол на дизайна и персонализиране.

И двете опции са често използвани и работят добре в повечето случаи. Избирането на един има много общо с това, което ви е най-удобно и какво съответства на вашия естетичен дизайн и потребителски интерфейс.

заключение

Една от шрифтовете за икони е толкова популярна е, че те са универсални и лесни за използване. Благодарение на мащабируем формат, който може да бъде инсталиран с няколко клика към повечето системи за управление на съдържанието, почти всеки може да започне бързо да използва шрифтове за икони.

Истинската полза за шрифта на иконата е, че елементът използва CSS и не е независим файл с изображения. Това е добре за създаване на постно уебсайт с елементи, които се зареждат бързо и във векторен формат (чудесно, ако трябва да промените размера по-късно).