Існує багато причин, чому перетворення піктограм веб-сайту в один шрифт є дуже гарною ідеєю.
Один з них полягає в тому, що так ми отримуємо різко зменшити вагу, і, отже, пришвидшити час завантаження Інтернету до 14%.
Іншою причиною є універсальність, яку він передбачає при розробці Інтернету, оскільки додавання піктограми зводиться до введення простого рядка HTML, а також пропонує вам усі переваги обробки цієї піктограми як шрифту в CSS, можливість змінити розмір або колір у будь-який час, без необхідності завантажувати зображення за допомогою FTP знову і знову.
І остання, і, мабуть, найважливіша причина, чому простота при підйомі піктограм, від мобільного екрану до 40-дюймового без втрати роздільної здатності, оскільки, словом, ми говоримо про вектори а не растрові зображення, як це було б у випадку із звичайним png.
Як розпочати?
- Перше, що вам слід зробити, це створити свої іконки в Illustrator, Sketch, Photoshop або будь-якому іншому програма для редагування векторних.
- Переконайтеся, що всі штрихи розгорнуті (в Illustrator -> Object> Expand) та відсутність масок або ефектів. Це повинен бути простий і чистий обведений об’єкт.
- Експортуйте піктограму як .SVG, векторний формат.
Iconvau дозволяє нам завантажувати шаблон для створення наших ікон ще простіше.
Як зробити їх джерелом?
Існує багато безкоштовних веб-сайтів які дозволяють компілювати ваші піктограми .SVG в один файл вихідного формату. Ми рекомендуємо три:
Іконавау
Фонтелло
Icomoon
В основному всі троє роблять те саме, вони дозволяють завантажувати власні значки або вибирати з каталогу власні безкоштовні значки та завантажувати файл із джерелами та всі необхідні матеріали, щоб встановити їх на своєму веб-сайті.
Ви також можете використовувати Glyph, плагін Photoshop, який дозволяє робити те саме, що і ці веб-сайти:
Як користуватися шрифтом?
Просто, як завантажити шрифт за допомогою FTP у папку на вашому веб-сайті (ми вгадаємо, що в/шрифти) і додати наступний код у ваш файл CSS, подібний до будь-якого іншого шрифту:
@ font-face font-family: '40df';
src: url ('fonts/40df.eot');
src: формат url ('шрифти/40df.eot? #iefix') ('embedded-opentype'),
url ('шрифти/40df.woff') формат ('woff'),
url ('fonts/40df.ttf') format ('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, як і з будь-яким звичайним шрифтом:
Колір .icon-Twitter: # 41b7d8;
>
a: hover .icon-twitter color: # 005580;
розмір: 40px;
>
Це такі Корпоративні кольори основних соціальних мереж, якщо ви хочете використовувати їх у відповідних значках (через: rubberkethings):
- Twitter: # 41b7d8
- Facebook: # 3b5997
- Google: # d64937
- LinkedIn: # 0073b2
- Vimeo: # 388fc5
- Flickr: # ff0084
- Pinterest: # cb2027
- Skype: # 00aff0
- RSS: # e0812a
І у вас це вже є! Тепер ви можете змінювати свої значки набагато простіше, ніж раніше, і змінювати їх розмір, не втрачаючи роздільної здатності. Всі переваги.
@sickmonkeys
Піксельний тренажер, або те саме, цифровий дизайнер. Історик мистецтва та візуальної культури. Серіофільський.