Yroslav_Brago
Хз добрый или нет, но Специальный Администратор
- Сообщения
- 59
- Реакции
- 8
Данный пост предназначен для всех пользователей форума и объясняет, как правильно использовать Font Awesome иконки при оформлении сообщений, тем и гайдов на форуме XenForo.
Что такое Font Awesome
Font Awesome — это библиотека векторных иконок, которые используются как шрифт. Это позволяет:
масштабировать иконки без потери качества
менять цвет через CSS / настройки
использовать иконки как текстовые символы
Источник иконок
Все иконки берём ТОЛЬКО с официального сайта Font Awesome — https://fontawesome.com/v5/search
Перед выбором иконки:
Установите версию 5.15.4
Выберите пак classic
Выбор иконки
Найдите нужную иконку
Нажмите на неё
Скопируйте класс иконки (например): fas fa-wrench
Удалите всё лишнее — должно остаться только название иконки
Пример : =
Изменение размера иконки
Чтобы увеличить размер иконки, в конце добавляется:
fa-2x или fa-xs —
fa-3x или fa-sm —
fa-4x или fa-lg —
fa-5x —
Цвет иконок
Способ 1 — через параметры FA
Можно задать цвет прямо в коде —
Способ 2 — через стандартное окрашивание форума
Можно просто окрасить иконку как обычный текст —
Анимация иконок
Иконкам можно добавить анимацию:
fa-spin — вращение
fa-pulse — пульсация
Например :
—
—
Типы иконок
На сайте указаны разные типы:
fas — Solid
far — Regular
fab — Brands
Разницы в использовании почти нет, принцип одинаковый — меняется только стиль иконки.
Примеры использования
Профиль — Профиль
Настройки — Настройки
Выход — Выход
Иконка + текст = лучшая читаемость и аккуратный внешний вид.
Что такое Font Awesome
Font Awesome — это библиотека векторных иконок, которые используются как шрифт. Это позволяет:
масштабировать иконки без потери качества
менять цвет через CSS / настройки
использовать иконки как текстовые символы
Источник иконок
Все иконки берём ТОЛЬКО с официального сайта Font Awesome — https://fontawesome.com/v5/search
Перед выбором иконки:
Установите версию 5.15.4
Выберите пак classic
Выбор иконки
Найдите нужную иконку
Нажмите на неё
Скопируйте класс иконки (например): fas fa-wrench
Удалите всё лишнее — должно остаться только название иконки
Пример : =
Изменение размера иконки
Чтобы увеличить размер иконки, в конце добавляется:
fa-2x или fa-xs —
fa-3x или fa-sm —
fa-4x или fa-lg —
fa-5x —
Цвет иконок
Способ 1 — через параметры FA
Можно задать цвет прямо в коде —
Способ 2 — через стандартное окрашивание форума
Можно просто окрасить иконку как обычный текст —
Анимация иконок
Иконкам можно добавить анимацию:
fa-spin — вращение
fa-pulse — пульсация
Например :
—
—
Типы иконок
На сайте указаны разные типы:
fas — Solid
far — Regular
fab — Brands
Разницы в использовании почти нет, принцип одинаковый — меняется только стиль иконки.
Примеры использования
Профиль — Профиль
Настройки — Настройки
Выход — Выход
Иконка + текст = лучшая читаемость и аккуратный внешний вид.