Символы-иконоки Unicode

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

Перевод статьи

 

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


Защитный код
Обновить