Использование Unicode и Font Awesome в CSS :before
Быстрый ответ
Чтобы вставить Unicode символ в HTML с помощью CSS, необходимо присвоить шестнадцатеричный код символа свойству content
. Ниже приведен пример с использованием символа сердца:
.element:before {
content: "\2665";
}
Замените значение "\2665"
на выбранный вами Unicode код в шестнадцатеричном формате, и символ появится перед выбранным элементом.
Экранирование с изяществом (и обратной косой чертой)
Когда вставляете Unicode символы через CSS, не забывайте про экранирование. Добавьте обратную косую черту (\
) перед шестнадцатеричным кодом символа. Это своего рода "пароль" для CSS, позволяющий работать не с текстом, а с символами.
.icon:before {
content: "\f007"; /* Вот наш секретный код */
}
В данном случае, \f007
– это иконка пользователя в Font Awesome 4. Теперь мы на одном языке с Unicode!
Диалог иконок: особенности Font Awesome
Чтобы использовать иконки из Font Awesome, важно указать правильное семейство шрифтов и Unicode код. Вот несколько советов для разных версий:
Для FontAwesome 4 или старше это будет выглядеть следующим образом:
CSSСкопировать код.fa:before { font-family: 'FontAwesome'; /* Имена семейства шрифтов */ content: "\f007"; /* Символика иконок */ }
В FontAwesome 5 детали имеют большое значение:
CSSСкопировать код.fas:before { font-family: 'Font Awesome 5 Free'; /* Учет деталей */ content: "\f007"; /* Символика иконок */ }
Версия FontAwesome 5 требует учета различных начертаний и стилей (Solid
, Regular
, Light
), и Brands
, для каждого из которых необходимо указать свое название семейства шрифтов.
Праздник с предосторожностью: особенности Unicode
Празднуя союз Unicode и CSS, не забывайте о следующем:
- Без подключения CSS-файла Font Awesome или других библиотек иконок к вашему HTML файлу праздник не получится.
- Некоторые Unicode коды являются VIP, т.е. они представляют собой кодовые точки для личного использования; убедитесь, что они поддерживаются вашим шрифтом.
- Используйте ресурс Fileformat.info для поиска корректных Unicode кодов.
- Убедитесь, что иконки отображаются корректно на всех платформах и в браузерах.
Справляемся со страхом сцены: распространенные ошибки
Вот с чем вы можете столкнуться в процессе работы:
- Неверно отображаются иконки: Проверьте поддержку браузерами на CanIUse.
- Неправильно указано семейство шрифтов: Убедитесь, что выбранные символы поддерживаются вашим шрифтом.
- Символы для личного использования: Используйте только общедоступные символы.
Визуализация
Представьте процесс использования Unicode символов с помощью CSS :before
как художника, который использует палитру цветов для создания шедевра.
CSS художник 🎨: .icon-heart::before
Палитра: ♥️ // Unicode код для сердца
Результат:
До творческого процесса: [❓, 📰, 🗂️]
После: [♥️, 📰, 🗂️]
Художник (в роли CSS) выбирает цвета (Unicode символы) и рисует (:before
) на своем холсте (элементе), создавая уникальное произведение искусства (веб-страницу).
/* Применяем краски (Unicode символы) */
.icon-heart::before {
content: "\2665"; // Сердечко добавляем на наш "холст"
}
Благодаря мастерству CSS, процесс рисования становится настоящим искусством!
Альтернативы Font Awesome: другие библиотеки иконок
Если Font Awesome вам не подходит, не беспокойтесь! Есть и другие библиотеки иконок:
- Material Icons
- Ionicons
- Bootstrap Icons
Они предлагают множество уникальных иконок, которые могут гармонично дополнить оформление вашего проекта.
Полезные материалы
- ::before / ::after | CSS-Tricks — обстоятельное руководство.
- ::before – CSS: Cascading Style Sheets | MDN — инструкция по использованию селектора
::before
от Mozilla. - CSS ::before Selector — учебник по использованию псевдоэлемента
::before
. - Selectors Level 3 — официальные спецификации W3C.
- unicode-range – CSS: Cascading Style Sheets | MDN — разъяснение диапазонов Unicode.
- Discover Unicode Character Entities & Symbols | AmpWhat — поиск и преобразование Unicode символов.
- SYMBL (◕‿◕) Symbols, Emojis, Characters, Scripts, Alphabets, Hieroglyphs and the entire Unicode — ресурс, посвященный Unicode символам.