Unicode-символы, которые можно использовать вместо иконок

Иногда необходимо добавить иконку в ваш дизайн, но вам не хочется вставлять дополнительные изображения или целый шрифт иконок, такой как Font Awesome? Тогда у нас есть для вас хорошие новости – есть обширная библиотека доступных иконок и символов уже в вашем браузере. Она называется Unicode, и это стандарт, который присваивает уникальные идентификаторы для постоянно растущего числа (в настоящее время более 110 000) символов и иконок.

Это не означает, что у вас есть выбор сотен тысяч икон, хотя. Это зависит от браузера, который рендерит их, и он использует шрифты, которые установлены в системе, чтобы сделать это. В этой статье мы собрали ряд наборов символов, которые доступны в Windows, Linux, OS X, Android и IOS. Вы можете использовать их в своем дизайне сегодня!

Совет: Существует хорошая статья, которая объясняет все, что нужно знать о кодировках и Unicode, которую мы рекомендуем для прочтения каждому разработчику ПО.

Как использовать эти иконки

Иконки, приведенные в таблицах ниже, являются обычными символами, которые Вы можете скопировать и вставить как если бы они являлись буквами алфавита. Но если кодировка, используемая для сохранения файлов HTML/CSS не UTF-8 они не будут отображаться. Именно поэтому мы ввели HTML escape-код, который будет работать всегда. Вот то, что вам нужно сделать, чтобы использовать эти иконки:

  • Найдите иконку, которая вам нравится. Мы предоставили малые и большие превью.
  • Скопируйте код.
  • Вставьте её в HTML, как обычный текст. В CSS вы можете использовать их как значение свойства content. В JS, PHP и других языках программирования, вы можете использовать их как обычный текст в строках.
  • Вы можете настроить иконки, установив размер шрифта, цвет, текст и тени, также как обычный текст.

Иконки

НазваниеПревьюКод
Smiley☺
Warning Sign⚠
Hot Springs♨
Wheelchair♿
Recycle♻
8-Ball➑
High Voltage⚡
White Star☆
Black Star★
White Heart♡
Black Heart❤
Coffee☕
Airplane✈
Hourglass⌛
Clock⌚
Black Scissors✂
White Scissors✄
Crown♕
Anchor⚓
Cross✝
Black-White Circle◑
Eight Note♪
Beamed Eighth Notes♫
Four Balloon-Spoked Asterisk✣
Circled White Star✪
White Star✰
White Four Pointed Star✧
Black Four Pointed Star✦
Ballot Box Check☑
Check Mark✔
Cross Mark✘
Pencil✎
Writing Hand✍
Female♀
Male♂
Black Telephone☎
White Telephone☏
Envelope✉
Telephone Location✆

Стрелки в юникоде

НазваниеПревьюКод
Leftwards Arrow←
Rightwards Arrow→
Upwards Arrow↑
Downwards Arrow↓
Left Right Arrow↔
Up Down Arrow↕
Right And Left Arrows⇄
Up And Down Arrows⇅
Down-Left 90deg Arrow↲
Down-Right 90deg Arrow↳
Up-Left 90deg Arrow↰
Up-Right 90deg Arrow↱
North West Arrow To Corner⇱
South East Arrow To Corner⇲
Leftwards Arrow To Bar⇤
Rightwards Arrow To Bar⇥
Anticlockwise Semicircle Arrow↶
Clockwise Semicircle Arrow↷
Anticlockwise Circle Arrow↺
Clockwise Circle Arrow↻
Wide-Headed Rightwards Arrow➔
Downwards Zigzag Arrow↯
North West Arrow↖
Heavy South East Arrow➘
Heavy Rightwards Arrow➙
Heavy North East Arrow➚
Dashed Rightwards Arrow➟
Dotted Leftwards Arrow⇠
Black Rightwards Arrowhead➤
Leftwards White Arrow⇦
Rightwards White Arrow⇨
Left Angle Quotation Mark«««
Right Angle Quotation Mark»»»
Right Black Pointer►
Left Black Pointer◀
Up Black Pointer▲
Down Black Pointer▼
Right White Pointer▷
Left White Pointer◁
Up White Pointer△
Down White Pointer▽
Bow Arrow➴

Спецсимволы в юникоде

NamePreviewCode
Numero№
Copyright©©©
Registered®®®
Trademark™
Estimated℮
Bullet•
Middle Dot···

Валюта в юникоде

НазваниеПревьюКод
Евро€
Рубль₽
Гривна₴
Казахстанский тенге₸
Фунт£££
Лира₤
Йена¥¥¥
Цент¢¢¢
Валютत¤

Иконки погоды

НазваниеПревьюКод
Degree°°°
Small Sun☀
Big Sun☼
Cloud☁
Umbrella☔
Snowflake 1❆
Snowflake 2❅
Snowflake 3❄

Указатели в юникоде

НазваниеПревьюКод
Pointer Left Black☚
Pointer Right Black☛
Pointer Left White☜
Pointer Up White☝
Pointer Right White☞
Pointer Down White☟

Знаки зодиака в юникоде

НазваниеПревьюКод
Овен♈
Телец♉
Близнецы♊
Рак♋
Лев♌
Дева♍
Весы♎
Скорпион♏
Стрелец♐
Козерог♑
Водолей♒
Рыбы♓

Карточные символы в юникоде

НазваниеПревьюКод
Clubs Black♠
Hearts Black♥
Diamonds Black♦
Spades Black♣
Clubs White♤
Hearts White♡
Diamonds White♢
Spades White♧

Шахматные фигуры в юникоде

НазваниеПревьюКод
King White♔
Queen White♕
Rook White♖
Bishop White♗
Knight White♘
Pawn White♙
King Black♚
Queen Black♛
Rook Black♜
Bishop Black♝
Knight Black♞
Pawn Black♟

Игра в кости

НазваниеПревьюКод
Dice Roll One⚀
Dice Roll Two⚁
Dice Roll Three⚂
Dice Roll Four⚃
Dice Roll Five⚄
Dice Roll Six⚅

Математические символы в юникоде

НазваниеПревьюКод
Infinity∞
Plus Minus±±±
Less-Than Or Equal To≤
More-Than Or Equal To≥
Not Equal To≠
Division÷÷÷
Multiplication x×××
Heavy Multiplication x✖
Superscript One¹¹¹
Superscript Two²²²
Superscript Three³³³
Circled Plus⊕
Circled Multiplication⊗
Logical AND∧
Logical OR∨
Delta∆
Pie∏
Sigma (SUM)∑
OmegaΩΩΩ
Empty Set∅
Angle∠
Parallel∥
Perpendicular⊥
Almost Equal To≈
Triangle△
Circle○
Square□

Дроби

НазваниеПревьюКод
One Quarter (1/4)¼¼¼
One Half (1/2)½½½
Three Quarters (3/4)¾¾¾
One Third (1/3)⅓
Two Thirds (2/3)⅔
One Eight (1/8)⅛
Three Eights (3/8)⅜
Five Eights (5/8)⅝
Seven Eights (7/8)⅞

Римские цифры в юникоде

НазваниеПревьюКод
Roman Numeral OneⅠ
Roman Numeral TwoⅡ
Roman Numeral ThreeⅢ
Roman Numeral FourⅣ
Roman Numeral FiveⅤ
Roman Numeral SixⅥ
Roman Numeral SevenⅦ
Roman Numeral EightⅧ
Roman Numeral NineⅨ
Roman Numeral TenⅩ
Roman Numeral ElevenⅪ
Roman Numeral TwelveⅫ

 

Есть некоторые различия рендеринга этих символов в различных операционных системах. Это вызвано различными семействами шрифтов, которые используются. Кроме того, iOS и Android заменяют некоторые символы Unicode на смайлики, так что не забудьте проверить добавленные символы, чтобы убедиться, что этого не произойдет и иконки показываются, как предполагалось.
Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.