Skip to main content

Іконки

Навігація

Іконки

За замовчуванням Techno4 містить досить обмежений набір іконок, які використовуються внутрішньо, наприклад, іконки «Назад», «Вперед», «Попередня» та «Далі»:
<i class="icon icon-back"></i>
<i class="icon icon-forward"></i>
<i class="icon icon-prev"></i>
<i class="icon icon-next"></i>
Ці кілька значків допомагають підтримувати узгодженість основних елементів навігації між темами iOS і Material.

Шрифт іконок Techno4

У вашому додатку, звичайно, може знадобитися набагато більше піктограм для представлення вашого вмісту. Для цього випадку ми розробили шрифт Techno4 Icons для використання з темою iOS Techno4. За замовчуванням він не включений у пакет Techno4, а останню версію шрифту можна завантажити в репозиторії піктограм Techno4.
Для теми MD ми наполегливо рекомендуємо використовувати добре розроблений шрифт Material Icons.

Як встановити шрифт

1. Завантажте та розпакуйте пакет шрифтів зі сховища значків Techno4

2. Скопіюйте Techno4-icons.css у свій проєкт

3. Скопіюйте папку шрифтів fonts у свій проєкт

4. Переконайтеся, що URL-адреси шрифтів у Techno4-icons.css правильно посилаються на шлях шрифтів у вашому проєкті

5. Додайте посилання на файл Techno4-icons.css, де ви посилаєтеся на таблиці стилів програми: 

<link rel="stylesheet" href="path/to/techno4-icons.css">

Шпаргалка

Ви можете скористатися наведеною нижче шпаргалкою,(посилання) щоб легко знайти потрібну піктограму.

Приклад HTML

До вашої веб-сторінки легко додати іконки. Ось невеликий приклад:
<i class="t4-icons">house</i>
У цьому прикладі використовується типографічна функція під назвою лігатури, яка дозволяє відтворювати гліф значка просто за допомогою його текстового імені. Заміна виконується автоматично веб-браузером і забезпечує більш читабельний код, ніж еквівалентне посилання на числові символи.

Іконки для стилізації

Розміри
Піктограми Techno4 найкраще виглядають із розміром 28 пікселів, але якщо піктограму потрібно відображати в альтернативному розмірі, просто скористайтеся правилом розміру шрифту CSS:
.size-22 { font-size: 22px }
.size-25 { font-size: 25px }
.size-29 { font-size: 29px }
.size-50 { font-size: 50px }

<i class="t4-icons size-22">house</i>
<i class="t4-icons size-25">house</i>
<i class="t4-icons size-29">house</i>
<i class="t4-icons size-50">house</i>
Забарвлення
Використання шрифту піктограми дозволяє легко оформляти піктограму будь-яким кольором за замовчуванням або власним кольором.
.color-custom { color: #ff0000 }

<i class="icon t4-icons color-red">house</i>
<i class="icon t4-icons color-yellow">house</i>
<i class="icon t4-icons color-custom">house</i>

Використання піктограм T4 і піктограм MD

Щоб зберегти найкращі практики, краще використовувати шрифт t4 Icons для теми iOS і шрифт Material Icons для теми MD. Але що робити, якщо ви розробляєте свій додаток як для тем MD, так і для iOS?

У цьому випадку ми можемо використовувати допоміжні класи маршрутизатора {theme}-only і if-{theme} і if-not-{theme}, щоб мати піктограму t4 у темі iOS і піктограми Material у темі MD: 

<i class="t4-icons if-not-md">house</i>
<i class="material-icons md-only">house</i>
У цьому випадку ми матимемо лише <i class="t4-icons if-not-md">house</i>, коли програма працює з темами iOS або Aurora, і лише <i class="material-icons md-only"> house</i>, коли програма знаходиться в темі MD.

Techno4 Framework