Как да превърнете иконите си в шрифт
Има много причини, поради които преобразуването на иконите на уебсайта ви в един шрифт е много добра идея.
Един от тях е, че така стигаме драстично намалете теглото, и следователно ускорява времето за зареждане на мрежата до 14%.
Друга причина е гъвкавостта, която предполага при разработването на мрежата, тъй като добавянето на икона се свежда до въвеждането на прост ред на HTML и ви предлага също всички предимства на третирането на тази икона като шрифт в CSS, като можете да промените размера или цвета по всяко време, без да се налага да качвате изображения чрез FTP отново и отново.
И последно, и може би най-важната причина, защо простота при катерене иконите, от мобилен екран до 40-инчов, без загуба на резолюция, тъй като, накратко, говорим за вектори а не растерни изображения, както би било в случая с нормален png.
Как да започнете?
- Първото нещо, което трябва да направите, е да създадете иконите си в Illustrator, Sketch, Photoshop или всяка друга програма за редактиране на вектор.
- Уверете се, че всички щрихи са разширени (в Illustrator -> Object> Expand) и че няма маски или ефекти. Това трябва да е прост и чист обект с проследяване.
- Експортирайте иконата като .SVG, векторен формат.
Iconvau ни позволява да изтеглим шаблон, за да създадем нашите икони още по-лесно.
Как да ги направя източник?
Има много безплатни уебсайтове които ви позволяват да компилирате вашите .SVG икони в един единствен формат. Препоръчваме три:
Iconvau
Фонтело
Icomoon
По принцип и тримата правят същото, те ви позволяват да качите свои собствени икони или да изберете от каталог на вашите собствени безплатни икони и да изтеглите файла с източниците и всички необходими материали, за да ги инсталирате на вашия уебсайт.
Можете също да използвате Glyph, приставка за Photoshop, която ви позволява да правите същото като тези уебсайтове: