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 на смайлики, так что не забудьте проверить добавленные символы, чтобы убедиться, что этого не произойдет и иконки показываются, как предполагалось.
Источник