Fontello дозволяє гнучкіше працювати з іконним шрифтом.
У Fontello можна додати тільки ті іконки, які потрібні. За рахунок цього файли шрифтів іконок вийдуть легкими і не створюватимуть додаткове навантаження.
Також іконки від Fontello можна встановити та впровадити у фотошоп, щоб дизайнер працював саме з певним набором іконок.
Додавання іконок Fontello до набору
Для вибору та додавання іконки до набору необхідно просто виділити її, клацнувши лівою кнопкою миші. Виділена іконка позначається рожевим обведенням.
Щоб знайти потрібну іконку, можна скористатися пошуком. Ключові слова слід вводити англійською, тобто. значення слів англійською.
Весь набір вибраних іконок можна переглянути у вкладці "Customize Names". Видалити іконку з набору можна, клацнувши по хрестику або клацнути повторно на виділеній іконці у вкладці «Select Icons». Також є ще одна вкладка під назвою "Customize Codes". Тут можyf отримати код іконки.
Коли набір готовий, можна завантажити архів файлів іконок. Для цього клікнути по рожевій кнопці «Download webfont» у верхньому правому кутку
Зберегти архів на комп'ютері та розпакувати.
Архів містить:
- Папка «css» — містить файли стилів.
- Папка "font" - у цій папці зберігаються шрифти іконок.
- Файл "config.json" - файл налаштувань іконок.
- Файл "demo.html" - можна відкрити демо-сторінку зібраних іконок подивитися їх у браузері.
- Файл "LICENSE.txt" - файл ліцензії, тобто. за якою ліцензією поширюються іконки.
- Файл README.txt — коротка документація англійською мовою щодо використання іконок Fontello
Папка «css» містить:
- fontello.css - основний файл стилів fontello animation.css - ці стилі відповідають за анімацію іконок, тобто. потрібно, якщо ви використовуєте анімовані іконки набору.
- fontello-codes.css — файл стилів містить лише коди іконок. Це зручно, коли іконки часто оновлюються. Потрібно просто замінити цей код на код з нового архіву іконок файлу fontello-codes.css.
- fontello-embedded.css — стилі з вбудованим шрифтом WOFF. Його необхідно використовувати, якщо потрібно уникнути проблем з CORS у Firefox та IE9
- fontello-ie7.css - основний файл стилів іконок для підтримки браузером ІЕ7 fontello-ie7-codes.css - коди іконок з підтримкою браузера ІЕ7
у HTML-файлі в голові сторінки підключити шрифт іконок:
Для того, щоб відобразити іконку в шаблоні, необхідно додати відповідний клас тегу i або span.
Який додати клас? Перейти на сайт fontello і переключитися у вкладку "Customize Names". Тут видно вибрані іконки та справа назви класів. Скопіювати клас та призначити його тегу з іконкою.
<i class="icon icon-emo-happy"></i>