Мушу зізнатися, мені подобаються соціальні іконки. У мене буквально десятки наборів соціальних іконок, які я зібрав протягом останніх кількох років, я також створив кілька своїх наборів у спробі ідеально підігнати їх під конкретний проект. Але незабаром я виявив іконічні шрифти і вже давно не використовую старі іконки-зображення.
У цьому посібнику ми простою мовою постараємося розібратися, що таке шрифти-іконки, і чим вони кращі за іконки-зображення.
Дивіться також:
Що таке іконічні шрифти?
Уявіть різноманітні значки різного роду та стилю – соціальні іконки, іконки сайту, все, що завгодно! Тільки це не зображення: це шрифти.
Різниця істотна, оскільки з іконками-зображеннями у вас фактично статичні картинки. Ваc може мати кілька розмірів того ж зображення, але ви не можете робити з ним що-небудь.
Іконка, яка, по суті, є шрифтом — це зовсім інша історія. І хоча такі іконки виглядають простішими, вони компенсують свій мінімалізм своєю високою гнучкістю. З іконічним шрифтом можна легко змінювати розмір іконок та їх колір (як із звичайними текстовими шрифтами). Плюс іконічні шрифти мають прозорі фони, які дійсно працюють у старих версіях Internet Explorer, якщо вам це важливо.
Інша перевага в тому, що вони можуть замінити CSS спрайти зображень. Використання свого іконичного шрифту з обмеженою кількістю іконок у роботі схоже на спрайти зображень, але дає можливість стилізувати іконки за принципом тексту.
Що краще для вашого конкретного проекту - іконічний шрифт або іконки-зображення - вирішувати вам свої за і проти є в обох варіантів. Але для наших цілей ми припустимо, що ви готові спробувати іконічні шрифти і хочете дізнатися, як використовувати їх у WordPress темі.
Для нашого посібника ми зберемо невеликий набір іконічних шрифтів соціальних медіа для нашого гіпотетичного проекту. Нам знадобляться іконки для Facebook, Twitter та Pinterest, так що давайте приступимо.
Генератори іконічних шрифтів
Є невелика кількість онлайн генераторів іконічних шрифтівякі дозволять вам створювати свої набори шрифтів. Ви можете створити свої шрифти для кожного проекту, це так зручно! Тут ми будемо використовувати додаток-генератор Icomoonоскільки цей сервіс я використовував найчастіше.
Генератор шрифтів Icomoon кумедний і простий у використанні - ви можете вибирати з кількох безкоштовних шрифтів, решта є комерційними. Я вважаю якість пропонованих шрифтів дуже високою. Ви можете навіть завантажити іконічні шрифти, які ви знайшли в іншому місці, та використовувати їх у своєму шрифті. Дуже зручно.
Створимо наш власний шрифт іконок соціальних медіа. Я висловлю припущення, що ви ніколи раніше цього не робили, але не переживайте, якщо ви вже пройшли цю стадію. Ми наздоженемо.
Створення власного набору іконок
Відкрийте Icomoon app у вашому браузері, ви побачите наступне:
Безкоштовний набір базових шрифтів Icomoon завантажений, і ви можете бачити також кілька інших безкоштовних іконичних шрифтів. Я б рекомендував звернути увагу також на інші набори, які не були завантажені, можливо, вам щось сподобається. Щоб переглянути інші доступні набори, прокрутіть вниз і клацніть More Icon Sets.
На наступному екрані ви побачите кілька інших безкоштовних та комерційних шрифтів (просто для довідки, Entypo – гарний набір, який я часто використовую). Щоб додати будь-який з них до основного блоку, просто клацніть по кнопці додавати під набором.
Після того, як ви повернетеся на основний екран, якщо ви захочете видалити набір, клацніть піктограму меню вгорі праворуч і виберіть пункт Remove Set.
Додавання власного іконічного шрифту
Якщо у вас є власний іконічний шрифт, або ви отримали його від клієнта або завантажили з іншого сайту, ви можете підвантажити його, натиснувши кнопку Import Icons вгорі екрана вибору, а потім завантажити іконки у свій набір. Ви можете вибирати з цього набору так само, як із рідних наборів Icomoon.
Вибираємо потрібні іконки
Для наших проектів нам потрібні іконки для Facebook, Twitter та Pinterest. Багато доступних наборів містять деякі або всі ці іконки, так як же нам вибрати потрібні?
Вибір усіх іконок з одного набору – легке рішення, якщо набір, який вам подобається (і який підходить під дизайн вашого проекту) містить усі необхідні іконки – чудово. Використовуйте їх. Але інколи це не варіант. Наприклад, в наборі, що вам сподобався, немає іконки Pinterest або вам не подобається іконка YouTube.
У такому випадку вибирайте з різних наборів, але будьте обережні — Icomoon використовує базовий розмір сітки для кожного набору іконок. Для набору Icomoon Free розмір сітки 16. І найкращий результат (чіткий вигляд) у браузері ви отримаєте, якщо встановите розмір шрифту рівний або кратний 16.
Якщо ви подивитеся на згаданий мною раніше шрифт Ентипо, ви побачите, що його базовий розмір сітки 20, а значить вам потрібно буде встановити розмір шрифту рівний 20 або кратного значення 20, щоб отримати кращий результат.
Якщо ви захочете з'єднати іконки з наборів із різними базовими розмірами сітки, вам просто потрібно перевірити їх у браузері, щоб зрозуміти, чи влаштовує вас така якість зображення. Ви можете дізнатися розміри сітки для всіх шрифтів Icomoon, клацнувши по View More Fonts внизу головного вікна програми.
Зважаючи на це, ви можете використовувати інструмент пошуку вгорі програми, щоб знайти іконки на ім'я, так що ви зможете порівняти кілька версій іконки однієї і тієї ж соціальної мережі.
Звичайно, ви можете просто перебирати різні набори – це добрий спосіб убити годину часу. Коли закінчите, клацніть по кнопці шрифт внизу, і ви побачите всі ваші іконки, готові до завантаження. Клацніть по кнопці Завантажити, щоб отримати свій новий чудовий шрифт, там же ви побачите текстове поле, де ви можете дати ім'я своєму шрифту - зазвичай я називаю шрифт зрозуміло для клієнта, в даному випадку я назву його 'підручник'.
Повернення до вибору для вашого проекту
Що буде, якщо ви зробите цей шрифт, а потім наступного місяця клієнт вирішить, що вони хочуть додати до своїх соціальних мереж, скажімо, Vimeo чи Instagram. Починати все спочатку?
Ні.
У вас буде файл selection.json який зберігає всі ваші налаштування за проектом. Все, що вам потрібно зробити, це відкрити програму Icomoon, клацнути по Import Icons і підвантажити цей JSON файл - те, що ви вибрали, знову буде відображено. Ви додасте нові іконки, потім перестворіть шрифт і знову скачати його.
Ваш іконічний шрифт у WordPress-темі
Тепер ми приходимо до більш складних питань.
Завантажте чотири файли у папці /шрифти вашого шрифту в папку /шрифти вашої теми.
Відкрийте файл style.css вашого шрифту та скопіюйте фрагмент коду @ шрифт-обличчя, який виглядає приблизно так:
@font-face { font-family: 'tutorial'; src:url('fonts/tutorial.eot?6npck9'); src:url('fonts/tutorial.eot?#iefix6npck9') format('embedded-opentype'), url('fonts/tutorial.woff?6npck9') format('woff'), url('fonts/tutorial.ttf?6npck9') format('truetype'), url('fonts/tutorial.svg?6npck9#tutorial') format('svg'); font-weight: normal; font-style: normal; }
Потім вставте цей фрагмент у файл style.css вашої теми. Не забудьте змінити URL-адресу до місця в темі, де будуть знаходитися ваші шрифти, якщо ви використовуєте папку, відмінну від 'Шрифти'.
Вставляння окремих іконок у ваш код
Є два основні способи для цього: один використовує клас для кожної іконки, щоб додати їх як псевдо-елемент (я використовую цей метод), інший використовує атрибут, щоб додати їх як реальні елементи в HTML.
Ось приклад використання методу "клас для іконки" у списку. Припустимо, у нас буде функція, яка поміщає ряд соціальних іконок у шапку вашої теми — скріншоти показують кілька прикладів того, як це можна використовувати:
Перейдіть до файлу functions.php і додайте наступний код:
<?php function my_header_elements() { ?> <ul class="social"> <li><a href="#"><span class="icon-twitter"></span></a></li> <li><a href="#"><span class="icon-pinterest"></span></a></li> <li><a href="#"><span class="icon-facebook"></span></a></li> </ul> <?php } add_action( 'hybrid_header', 'my_header_elements' );
Потім поверніться у файл style.css вашого шрифту та скопіюйте наступний фрагмент:
[class^="icon-"], [class*=" icon-"] { font-family: 'tutorial'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-facebook:before { content: "e600"; } .icon-twitter:before { content: "e601"; } .icon-pinterest:before { content: "e602"; }
Вставте цей код у файл style.css вашої теми. Якщо все піде як треба, ви повинні побачити в шапці три іконки, також можете змінити колір, розмір та інші атрибути як для тексту.
Іноді Chrome має проблеми з відображенням іконічних шрифтів — якщо вони виглядають погано, спробуйте перебудувати ваш фрагмент @ шрифт-обличчя ось так, щоб SVG було після embedded-opentype:
@font-face { font-family: 'tutorial'; src:url('fonts/tutorial.eot?6npck9'); src:url('fonts/tutorial.eot?#iefix6npck9') format('embedded-opentype'), url('fonts/tutorial.svg?6npck9#tutorial') format('svg'), url('fonts/tutorial.woff?6npck9') format('woff'), url('fonts/tutorial.ttf?6npck9') format('truetype'); font-weight: normal; font-style: normal; }
Інший метод додавання іконок до вашої теми — використання атрибутів для вставлення їх як елементів. Мені не дуже подобається цей метод, оскільки він означає, що іконка буде вставлена в HTML. Але, можливо, вам цей метод сподобається більше, тому він.
В functions.php ви будете використовувати атрибути ось так:
<?php function my_header_elements() { ?> <ul> <li><a href="#"><span aria-hidden="true" data-icon="&#e601;"></span></a></li> <li><a href="#"><span aria-hidden="true" data-icon="&#e602;"></span></a></li> <li><a href="#"><span aria-hidden="true" data-icon="&#e600;"></span></a></li> </ul> <?php } add_action( 'hybrid_header', 'my_header_elements' );
І у файлі style.css вашої теми:
[data-icon]:before { font-family: 'tutorial'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }
Висновок
Тепер ви знаєте базові речі щодо створення та використання власних іконічних шрифтів у вашій WordPress темі — не так це й складно. Знайдіть іконки, які вам сподобаються, і спробуйте вставити їх у наступному проекті.
Коментарі до запису: 0