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

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

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

Можешь почитать и вот эту статейку "Немного о кнопках"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element