Я использую Кнопки CSS с иконками, но без изображений. Значки создаются с использованием значений юникода.
В этом я столкнулись с проблемой, что некоторые браузеры не поддерживают некоторые значения unicode. Поэтому вместо правильной иконки отображается какой-то нежелательный символ.
Чтобы обеспечить поддержку Unicode в любом браузере, какие шаги мы должны выполнить?
Поддержка Unicode браузером
Ответ 1
Это прежде всего проблема с шрифтом, но если шрифты, перечисленные в вашем CSS, не покрывают какой-либо символ, тогда разные браузеры будут использовать резервные шрифты по-разному. Исправление состоит в том, чтобы попытаться найти список шрифтов, который, вероятно, охватывает все используемые вами символы. Трудность этого очень зависит от персонажей, которые вы используете. Использование недавно введенных символов в кнопках в основном бессмысленно, потому что изображения работают более надежно. Использование символов в тексте - другая проблема. Подробнее см. В Руководство по использованию специальных символов в HTML.
Ответ 2
Все браузеры, поддерживающие Unicode, поддерживают все коды символов, но не все шрифты имеют символьные глифы для всех символов Юникода.
Итак, чтобы получить поддержку символов, которые вы хотите, вам нужно будет загрузить шрифт, который имеет эти символы, в форматах, используемых всеми различными операционными системами.
Ответ 3
Вы можете создавать свои собственные шрифты с помощью инструментов, таких как Icomoon App.
Приложение Icomoon позволяет выполнять следующие действия:
- Получить один или несколько значков из нескольких популярных шрифтов значков
- Загрузите другие шрифты, которые могут быть значками шрифтов, а также обычные шрифты
- Объединить любое количество значков из любого количества доступных шрифтов
- Установите шестнадцатеричное значение UNICODE для любых символов, которые вам нужны.
- Экспорт и/или сохранение созданного вами шрифта
Я использовал приложение Icomoon для создания
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}