Unicode-символы, которые можно использовать вместо иконок
Иногда необходимо добавить иконку в ваш дизайн, но вам не хочется вставлять дополнительные изображения или целый шрифт иконок, такой как Font Awesome? Тогда у нас есть для вас хорошие новости - есть обширная библиотека доступных иконок и символов уже в вашем браузере. Она называется Unicode, и это стандарт, который присваивает уникальные идентификаторы для постоянно растущего числа (в настоящее время более 110 000) символов и иконок.
Это не означает, что у вас есть выбор сотен тысяч икон, хотя. Это зависит от браузера, который рендерит их, и он использует шрифты, которые установлены в системе, чтобы сделать это. В этой статье мы собрали ряд наборов символов, которые доступны в Windows, Linux, OS X, Android и IOS. Вы можете использовать их в своем дизайне сегодня!
Совет: Существует хорошая статья, которая объясняет все, что нужно знать о кодировках и Unicode, которую мы рекомендуем для прочтения каждому разработчику ПО.
Как использовать эти иконки
Иконки, приведенные в таблицах ниже, являются обычными символами, которые Вы можете скопировать и вставить как если бы они являлись буквами алфавита. Но если кодировка, используемая для сохранения файлов HTML/CSS не UTF-8 они не будут отображаться. Именно поэтому мы ввели HTML escape-код, который будет работать всегда. Вот то, что вам нужно сделать, чтобы использовать эти иконки:
Найдите иконку, которая вам нравится. Мы предоставили малые и большие превью.
Скопируйте код.
Вставьте её в HTML, как обычный текст. В CSS вы можете использовать их как значение свойства content. В JS, PHP и других языках программирования, вы можете использовать их как обычный текст в строках.
Вы можете настроить иконки, установив размер шрифта, цвет, текст и тени, также как обычный текст.
Есть некоторые различия рендеринга этих символов в различных операционных системах. Это вызвано различными семействами шрифтов, которые используются. Кроме того, iOS и Android заменяют некоторые символы Unicode на смайлики, так что не забудьте проверить добавленные символы, чтобы убедиться, что этого не произойдет и иконки показываются, как предполагалось.
Подробнее...