В настоящее время в FontAwesome нет такого класса (со значком), как fa-number-1, fa-number-2, fa-number-3 и т.д., которые позволяют вам создать значок с номером. Но почему ? Ну в основном потому что вам не нужен собственный шрифт для отображения только цифры, написать немного HTML и CSS для этого. Однако обернуть некоторое число в иконку FontAwesome можно и может быть действительно полезно.
Для достижения этого мы будем использовать подход с fa-stack класс FontAwesome. Обычно для того, чтобы сложить несколько значков, вы можете использовать fa-stack class на родительском объекте, затем назначьте некоторый класс stack-xSize на значке, чтобы указать размер значка, и fa-stack-2x для большего значка. Например, значок твиттера внутри квадрата можно получить с помощью следующей разметки:
Это должно генерировать следующий значок:
Вы можете использовать тот же трюк, чтобы установить какой-либо пользовательский контент внутри любого значка, если родитель не заполнен.
Числа внутри значков
Как уже упоминалось, вам нужно будет создать контейнерный промежуток с классом fa-stack. Этот узел будет содержать еще 2 элемента, еще один диапазон с fa класс, значок класс fa- и fa-stack- класс и сильный элемент с fa-stack- снова класс, внутри сильного узла вы установите желаемое число в виде простого текста. Размер стека элемента, который будет находиться внутри иконки, должен быть явно меньше размера контейнера:
2
Предыдущая разметка создаст следующий значок:
Так же, как вы изменяете размеры иконок с помощью fa fa-sizexвы можете изменить содержимое элементов стека, используя вместо этого fa-stack-2x, fa-stack-3x, fa-stack-4x, или же fa-stack-5x классы. Кроме того, вы можете проверить с другими значками, чтобы получить потрясающие результаты. Например, следующая разметка:
25%
Будет создан значок батареи с пользовательским содержимым, отображающий доступный процент батареи:
Вы можете поиграть со следующей скрипкой, которая включает в себя последнюю версию Font Awesome, чтобы проводить тесты онлайн:
Удачного проектирования!
