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

Един от тях е, че така стигаме драстично намалете теглото, и следователно ускорява времето за зареждане на мрежата до 14%.

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

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

Как да започнете?

  • Първото нещо, което трябва да направите, е да създадете иконите си в Illustrator, Sketch, Photoshop или всяка друга програма за редактиране на вектор.
  • Уверете се, че всички щрихи са разширени (в Illustrator -> Object> Expand) и че няма маски или ефекти. Това трябва да е прост и чист обект с проследяване.
  • Експортирайте иконата като .SVG, векторен формат.

Iconvau ни позволява да изтеглим шаблон, за да създадем нашите икони още по-лесно.

Как да ги направя източник?

Има много безплатни уебсайтове които ви позволяват да компилирате вашите .SVG икони в един единствен формат. Препоръчваме три:

Iconvau

Фонтело

превърнете

Icomoon

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

Можете също да използвате Glyph, приставка за Photoshop, която ви позволява да правите същото като тези уебсайтове:

Как да използвам шрифта?

Толкова просто, колкото качването на шрифта чрез FTP в папка на вашия уебсайт (ние ще предположим, че в/шрифтове) и добавяне на следния код към вашия CSS файл, подобно на всеки друг шрифт:

@ font-face font-family: '40df';
src: url ('шрифтове/40df.eot');
src: url ('fonts/40df.eot? #iefix') формат ('embedded-opentype'),
url ('шрифтове/40df.woff') формат ('woff'),
url ('шрифтове/40df.ttf') формат ('truetype'),
url ('fonts/40df.svg # icomoon') формат ('svg');
тегло на шрифта: нормално;
стил на шрифта: нормален;
>

(Забележка: трябва да промените пътя и името на файловете на вашите)

Защо има различни формати? Просто поради несъвместимостта на браузърите. Ако дори забележите един и същ .EOT файл се извиква два пъти, това се дължи на проблем с по-старите версии на Internet Explorer. И накрая, включен е .SVG файл, за да поддържа iOS. Но не се притеснявайте, браузърът на потребителя ще изтегли само първия съвместим формат, така че включването на останалото не означава наднормено тегло.

Следващото нещо е да добавите класовете за да можете да извиквате иконите поотделно. В CSS файла ще включим нещо подобно на това:

.icon-twitter: преди съдържание: "\ e000";
>
.icon-facebook: преди съдържание: "\ e001";
>
.icon-dribbble: преди съдържание: "\ e002";
>

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

Извикването на иконите ви в HTML е толкова просто, колкото добавянето на страницата:

(Не забравяйте да включите интервал след затваряне на маркера)

Можете да използвате маркера "span" или "i" или "em", тъй като те са вградени маркери и не означават прекъсване на ред.

И накрая, в случай че искате да модифицирате конкретна икона, използвайте CSS, както бихте направили с всеки нормален шрифт:

a .icon-twitter цвят: # 41b7d8;
>
a: hover .icon-twitter цвят: # 005580;
размер: 40px;
>

Тези са Корпоративни цветове на основните социални мрежи, в случай че искате да ги използвате в съответните им икони (чрез: rubberkethings):

  • Twitter: # 41b7d8
  • Facebook: # 3b5997
  • Google: # d64937
  • LinkedIn: # 0073b2
  • Vimeo: # 388fc5
  • Flickr: # ff0084
  • Pinterest: # cb2027
  • Skype: # 00aff0
  • RSS: # e0812a

И вече го имате! Сега можете да променяте иконите си много по-лесно от преди и да променяте техния размер, без да губите резолюция. Всички са предимства.

@sickmonkeys

Треньор на пиксели или какво е същото, дигитален дизайнер. Историк на изкуството и визуалната култура. Сериефилски.