Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

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

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

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

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

Genericons

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

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

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

Якщо ви не хочете інтегрувати шрифт з вашою темою, а волієте використовувати окремий плагін - ви можете використовувати плагін 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 9

Григорій Мочалін:

Хе, прикольна тема)) Мені вона стане в нагоді при створенні кнопок для тем на фотошопі)) Залік!

Dimox:

Жирний мінус таких іконок — у багатьох із них краї не згладжені, а драбинкою. Виглядає потворно.

Antony Bark:

Ви щось плутаєте: це вектор. За замовчуванням, у вектора «драбинки» ніякої не може бути. Хіба що «драбинка» задана як елемент стилю.

Dimox:

Нічого я не плутаю. Навіть у вас на першому зображенні ліворуч від назви поста майже на кожній іконці видно «драбинки». Абсолютно ніякої згладженості.

На великих іконках такого немає, але на маленьких — факт.

Antony Bark:

уфф.. :) значить там (я чесно кажучи, не зрозумів де) не вектор, або у Вас масштаб збільшений якось цікаво. Або іконки не векторні. Я в розгубленості. Бо за фактом у вектора кращий рендеринг, ніж у растра.

Dimox:

У вашій статті (в тексті над цими коментарями) є два зображення з іконками сервісу Genericons. І на обох видно цю проблему.

Antony Bark:

все зрозумів! :)

1. стаття не моя.

2. Усі ілюстрації у цій статті растрові, можливо, автор тут дав промах )

3. ось посилання на вектор, спробуйте побачити драбинку 1428.ru/1.svg пограйте Ctrl+-

Dimox:

Я знаю що таке векторна графіка. Мабуть, ви не розумієте, що я хочу донести (і взагалі чому тоді відповідає не автор статті?).

Суть у тому, що майже всі маленькі іконки, які на головному сайті http://genericons.com, з «драбинкою». Що на скринях у вашій статті, що на цьому сайті — те саме.

Якщо вони векторні, чому тоді виглядають так коряво?

Макс:

як у масиві виведення посилань під іконками дженериконс зробити збільшення розміру однієї окремо?

Додати коментар або відгук