Використання шрифту Genericons на вашому сайті WordPress

Я вважаю, що іконічні шрифти – одна з найкращих ідей, що народилися в золоту еру веб-дизайну. Відмінні хлопці з Automattic, мабуть, думають також, тому що вони вирішили зробити гарний іконічний шрифт Genericons. У цій статті ми дізнаємося, наскільки крутими є іконічні шрифти, і як користуватися шрифтом Genericons.

Дивіться також:

• Додаємо шрифти для іконок у WordPress
• Як правильно додати шрифти Google Web Fonts у WordPress тему
• WordPress плагіни для додавання шрифтів Google Fonts

Важливість іконічних шрифтів

Як я вже казав, ми живемо у золоту еру веб-дизайну. Нові технології з'являються щодня, і браузери їх швидко приймають. На додаток до нових технологій, по всьому світу розвиваються нові техніки дизайну.

У цю золоту епоху адаптивний дизайн — одна з найпопулярніших концепцій. У світі, повному різними пристроями, здатними заходити в мережу – ноутбуками, планшетами, смартфонами – ми повинні враховувати в дизайні та верстці роздільну здатність екранів.

Для веб-дизайнерів вже стало звичкою переміщення елементів і масштабування зображень таким чином, щоб дизайн працював на різних пристроях - від 27-дюймових моніторів Apple до мобільних телефонів з екраном 3.5 дюйма.

Ось де дуже знадобляться іконічні шрифти!

Переваги використання іконічних шрифтів

Як наслідок адаптивного дизайну, іконічні шрифти використовуються для надання оптимізованих та масштабованих зображень для відвідувачів з будь-якими пристроями. До того ж, їхня крос-браузерна сумісність дозволяє нам змусити їх працювати навіть на старих браузерах, так що наші дідусі та бабусі теж зможуть насолодитися крутими новими іконками!

Але повернемось до серйозних речей. Є багато плюсів використання іконічного шрифту:

• Іконічні шрифти легко масштабуються. Це означає, що незалежно від того, якого розміру будуть ваші іконки, вам не доведеться йти на компроміс як зображення або розмір файлу.
• Можна змінити іконічні шрифти за допомогою CSS. Вам не потрібно відкривати редактор зображень, щоб змінити колір або додати тіні. Прозорість? Є. CSS-градієнт? Є. Поворот? Є. Ну ви зрозуміли. За допомогою кількох рядків CSS коду ви можете зробити практично все те, що ви можете зробити з текстом. Зрештою, технічно ці іконки є текстом.
• У іконічних шрифтів чудова підтримка браузерів. Оскільки це шрифти, а навіть Internet Explorer 7 підтримує шрифти, вам не потрібно переживати з приводу того, чи працюватимуть вони у старих браузерах.
• У іконічних шрифтів невеликий розмір файлу. Цей аргумент може бути суперечливим (оскільки набір іконок PNG може бути практично таким же маленьким за розміром, як іконічні шрифти), але ви можете побачити, що файл Genericons у WOFF форматі, наприклад, важить всього 11KB. Плюс, при використанні зображень для того, щоб відображати більше іконки, вам потрібно буде включити речі типу my-icon-2x.png . А ще іконічні шрифти створюють лише один HTTP запит.

Ви ще не повірили у крутість шрифтів-іконок? Просто подивіться цю демо-сторінку. Ну як?

Genericons

Genericons — добрий іконічний шрифт від творців WordPress — компанії Automattic. До кінця 2013 року шрифт включав 121 іконку і при цьому продовжує розширюватися. Він ліцензований GPL, тому ми можемо використовувати цей смачний набір іконок у всіх наших проектах з відкритим кодом із сумісними ліцензіями.

Якщо ви не використовуєте іконічний шрифт на вашому WordPress сайті, саме час увімкнути Genericons!

Додаємо шрифт у вашу тему

Якщо ви хочете використовувати цей іконічний шрифт у вашій темі, вам потрібно зробити лише кілька кроків:

1. Завантажте Genericons, натиснувши на величезну кнопку Download на сайті.
2. Завантажте папку шрифт у кореневій папці вашої теми. Якщо хочете, можете перейменувати папку та помістити її в іншу папку.
3. Скопіюйте вміст файлу genericons.css у файл style.css вашої теми. (Якщо ви змінили ім'я та шлях до папки шрифту, не забудьте змінити CSS, щоб шляхи до папок шрифту були робочі).

Ну ось. Тепер ваша тема на 100% сумісна з Genericons. Ви можете використовувати іконки у ваших HTML елементах, ось так:

<a class="genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>

Якщо ви хочете використовувати іконку як окремий елемент, вам потрібно використати HTML елементi> ось так:

<a href="http://tutsplus.com/"><i class="genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Зверніть увагу, що вам потрібно використовувати два CSS класи: genericon и genericon-{icon-name}

Я не вставлятиму в цю статтю імена іконок (бо в шрифт постійно додаються нові), але ви всередині файлу genericons.css ви можете побачити список назв іконок, розбитий за категоріями. Ну, або завітайте на сайт genericons.com і натисніть на потрібну іконку, щоб отримати її ім'я.

Використання шрифту за допомогою плагіна Genericon'd

Якщо ви не хочете інтегрувати шрифт з вашою темою, а волієте використовувати окремий плагін - ви можете використовувати плагін Genericon'd.

Принцип використання практично той же - вам просто потрібно додати ще один клас на ім'я genericond:

<a class="genericond genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>
<a href="http://tutsplus.com/"><i class="genericond genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Або використовувати шорткод:

<a href="http://tutsplus.com/">[genericon icon=tablet] This link has the tablet icon, too!</a>

Зауважте, що тепер вам потрібно буде використовувати тільки ім'я іконки.

Висновок

Іконічно шрифти популярні з кількох причин: масштабованість, простота використання, зворотна сумісність. Враховуючи невеликі розміри файлів, кожен веб-дизайнер та розробник зможе повною мірою скористатися цією гарною маленькою технікою.

Що ви думаєте про Genericons? Поділіться коментарями. А якщо вам сподобалася стаття, поділіться їй – нехай і ваші друзі дізнаються про Genericons!

Джерело: code.tutsplus.com