Css цифра в круге: css circle — цифры в круге на css3 - Блог сумасшедшего сисадмина

Содержание

html — Увеличение кругов на CSS3

При применении команды scale(n) в SVG происходит всё тоже самое, как и в CSS — чем больше увеличение, тем больше объект сдвигается от начального положения.

<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" />

Как известно начало координат у svg находится в левом, верхнем углу.
При cx=»40″ cy=»40″ центр окружности будет расположен правее на 40px и ниже на 40px от левого угла (0,0) вьюпорта svg. При применении scale(2) эти цифры умножаются на два. Только из-за этого круг сместится правее и ниже.
Новые координаты центра окружности будут cx=»80″ и cy=»80″.
Для наглядности смотрите анимацию процесса.
Здесь к розовому кругу последовательно применяется увеличение в 1-2-4 раза и обратно 4-2-1

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.  1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	 	 
          <text x="70" y="15">mouseover on pink circle</text>
		<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
		<circle cx="40px" cy="40px" r="20px" transform="scale(4)" fill="dodgerblue" stroke="none" opacity="0.9" />
		<text x="132" y="162">Scale(4)</text>
		<text x="52" y="82">Scale(2)</text>
		<circle cx="40px" cy="40px" r="20px" fill="violet" stroke="none" opacity="0.5">
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="circle1.mouseover" values="1;2;4" restart="whenNotActive"/>
		<animateTransform fill="freeze" attributeName="transform" begin="an1.end" type="scale" dur="1s"  begin="circle1.  mouseover"           values="4;4" restart="whenNotActive"/> 
		<animateTransform fill="freeze" attributeName="transform" begin="an2.end" type="scale" dur="2s"    begin="circle1.mouseover"           values="4;2;1" restart="whenNotActive"/>
		
		</circle>

	</svg>
 
 </body>

Вариант 1:

Как с этим бороться,- есть несколько вариантов:
Допустим необходимо увеличить объект максимум в 4 раза.
Считаем координаты центра: 40*4= 160px; И сразу располагаем центр окружности с этими координатами: cx=»160″ cx=»160″ Теперь у нас есть уверенность, что круг не выйдет при увеличении за пределы канвы SVG. см. пример ниже.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.  w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="70" y="15">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="81px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />				
		
		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r" fill="freeze"  begin="c1.mouseover"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		 <circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Следующий пример немного посложнее, с двумя кругами, попутно можно посмотреть, как взаимодействуют между собой две анимации.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.  1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >

	  <text x="70" y="15">mouseover on greenyellow circle</text>
	  
		<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="80px" fill="none" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />		

		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="freeze"  begin="c1.mouseover;an2.end+0.2s"  dur="4s"   values="20;80;20" restart="whenNotActive"/> 
		</circle>

		<circle cx="160px" cy="160px" r="20px"  fill="crimson" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="remove"  begin="an1.end"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		
		<circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.  9" /> 
		
	</svg>
 
 </body>

Вариант 2 Если вам нужно разместить окружность в углу канвы, но вы не хотите, чтобы она при увеличении уходила за границы канвы или убегала к центру по диагонали, делайте координаты центра окружности равными радиусу окружности.

<circle cx="20px" cy="20px" r="20px" />

<head>
  <meta charset="utf-8">
  <title>An expanding circle in the corner</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="20" y="185">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="80px" cy="80px" r="82px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.  9" />		
		
		<circle cx="20px" cy="20px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="c1.mouseover" values="1;2;4" restart="whenNotActive"/>
		</circle>
		 <circle cx="20px" cy="20px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Есть еще несколько способов для удержания, центрирования объекта при масштабировании. В ответах других участников уже всё хорошо объяснено. Спасибо за это всем участвующим.

① — Цифра один в круге: U+2460

U+2460

Нажмите, чтобы скопировать и вставить символ

Техническая информация

Название в Юникоде	Circled Digit One
Номер в Юникоде	U+2460
HTML-код	①
CSS-код	\2460
Раздел	Обрамлённые буквы и цифры
Версия Юникода:	1. 1 (1993)

Значение символа

Цифра один в круге. Обрамлённые буквы и цифры.

Символ «Цифра один в круге» был утвержден как часть Юникода версии 1.1 в 1993 г.

Свойства

Версия	1.1
Блок	Обрамлённые буквы и цифры
Тип парной зеркальной скобки (bidi)	Нет
Композиционное исключение	Нет
Изменение регистра	2460
Простое изменение регистра	2460

Кодировка

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	E2 91 A0	226 145 160	14848416	11100010 10010001 10100000
UTF-16BE	24 60	36 96	9312	00100100 01100000
UTF-16LE	60 24	96 36	24612	01100000 00100100
UTF-32BE	00 00 24 60	0 0 36 96	9312	00000000 00000000 00100100 01100000
UTF-32LE	60 24 00 00	96 36 0 0	1612972032	01100000 00100100 00000000 00000000

Цифры в кружочках символы HTML ❶ ③ ❺ ⑦ ❾

Коды HTML спецсимволов Цифры в кружочках — один два три четыре пять шесть семь восемь девять десять. ❶❷❸❹❺❻❼❽❾❿ ➀➁➂➃➄➅➆➇➈➉ 1 2 3 4 5 6 7 8 9 10. Цифры в кружочках до десяти 10, двадцати 20, тридцати 30, сорока 40, пятидесяти 50

Символ html	Код html	Знаки html (Описание)
Все Символы \| Знаки \| Коды \| HTML
Цифры в белых кружочках
⓪	⓪	Ноль в белом кружочке
①	①	Цифра в кружочке 1 светлая
②	②	В кружочке 2 светлая
③	③	В кружочке 3 светлая
④	④	В кружочке 4 светлая
⑤	⑤	В кружочке 5 светлая
⑥	⑥	В кружочке 6 светлая
⑦	⑦	В кружочке 7 светлая
⑧	⑧	В кружочке 8 светлая
⑨	⑨	В кружочке 9 светлая
⑩	⑩	В кружочке 10 светлая
⑪	⑪	Цифра 11 в светлом кружочке
⑫	⑫	Цифра 12 в светлом кружочке
⑬	⑬	Цифра 13 в светлом кружочке
⑭	⑭	Цифра 14 в светлом кружочке
⑮	⑮	Цифра 15 в светлом кружочке
⑯	⑯	Цифра 16 в светлом кружочке
⑰	⑰	Цифра 17 в светлом кружочке
⑱	⑱	Цифра 18 в светлом кружочке
⑲	⑲	Цифра 19 в светлом кружочке
⑳	⑳	Цифра 20 в светлом кружочке
Цифры в кружочках до 20
㉑	㉑	Цифра 21 в кружочке
㉒	㉒	Цифра 22 в кружочке
㉓	㉓	Цифра 23 в кружочке
㉔	㉔	Цифра 24 в кружочке
㉕	㉕	Цифра 25 в кружочке
㉖	㉖	Цифра 26 в кружочке
㉗	㉗	Цифра 27 в кружочке
㉘	㉘	Цифра 28 в кружочке
㉙	㉙	Цифра 29 в кружочке
㉚	㉚	Цифра 30 в кружочке
Цифры в кружочках до 30
㉛	㉛	Цифра 31 в кружочке
㉜	㉜	Цифра 32 в кружочке
㉝	㉝	Цифра 33 в кружочке
㉞	㉞	Цифра 34 в кружочке
㉟	㉟	Цифра 35 в кружочке
㊱	㊱	Цифра 36 в кружочке
㊲	㊲	Цифра 37 в кружочке
㊳	㊳	Цифра 38 в кружочке
㊴	㊴	Цифра 39 в кружочке
㊵	㊵	Цифра 40 в кружочке
Цифры в кружочках до 40
㊶	㊶	Цифра 41 в кружочке
㊷	㊷	Цифра 42 в кружочке
㊸	㊸	Цифра 43 в кружочке
㊹	㊹	Цифра 44 в кружочке
㊺	㊺	Цифра 45 в кружочке
㊻	㊻	Цифра 46 в кружочке
㊼	㊼	Цифра 47 в кружочке
㊽	㊽	Цифра 48 в кружочке
㊾	㊾	Цифра 49 в кружочке
㊿	㊿	Цифра 50 в кружочке
Цифры в кружочках до 50
Цифры в черных кружочках
⓿	⓿	Ноль в черном кружочке
➊	➊	Цифра в кружочке 1 темная
➋	➋	В кружочке 2 темная
➌	➌	В кружочке 3 темная
➍	➍	В кружочке 4 темная
➎	➎	В кружочке 5 темная
➏	➏	В кружочке 6 темная
➐	➐	В кружочке 7 темная
➑	➑	В кружочке 8 темная
➒	➒	В кружочке 9 темная
➓	➓	В кружочке 10 темная
⓫	⓫	Цифра 11 в черном кружочке
⓬	⓬	Цифра 12 в черном кружочке
⓭	⓭	Цифра 13 в черном кружочке
⓮	⓮	Цифра 14 в черном кружочке
⓯	⓯	Цифра 15 в черном кружочке
⓰	⓰	Цифра 16 в черном кружочке
⓱	⓱	Цифра 17 в черном кружочке
⓲	⓲	Цифра 18 в черном кружочке
⓳	⓳	Цифра 19 в черном кружочке
⓴	⓴	Цифра 20 в черном кружочке

Как сделать круги с помощью CSS3

Рекомендую этот хостинг в Украине. Всё очень доступно, цены низкие, и лояльная тех поддержка.

Здравствуйте, дорогие читатели блога. Сегодня хочется рассказать Вам как сделать самые обычные круги только при помощи CSS стилей. Я вот начал замечать, что всё чаще в построении шаблонов используют именно этот способ. Получается весьма интересно, тем более если добавлены самые разные эффекты. А так же огромным плюсом является то, что данные круги значительно быстрее загружаются чем тоже изображение.

В общем давайте, непосредственно, перейдём к практике, но для начала давайте рассмотрим некоторые важные моменты.

Важные моменты

Во всех случаях мы будем использовать следующее:

-webkit-border-radius — для правильного отображения в браузерах таких как Chrome и Safari.

-moz-border-radius — для правильного отображения кругов в браузере Firefox.

Хотелось бы сказать, что на данный момент почти все, с последним обновлением, браузеры поддерживают технологию CSS3, а также свойство border-radius (стандартное свойство для всех браузеров, которые поддерживают CSS3). Но лучше будем, так сказать, страховаться, потому что не все пользователи обновляются вовремя, или же вообще не обновляются и пользуются старыми версиями браузеров.

С помощью свойства border-radius можно делать любые круги любого размера, главное правильно подбирать радиус углов в пикселах, например, чем больше круг тем больше должен быть радиус углов, чтобы получился сам круг, если радиус будет не достаточно велик, то скорее всего получится не круг, а квадрат с загругленными углами.

Ну а теперь практика.

Круг с текстом внутри

Привет

CSS

.circle{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px; color:#fff;
 line-height:100px;
 text-align:center;
 background:#000

}

HTML

Чтобы вставить круг в то место где Вы хотите, нужно просто добавить следующее:

<div>привет</div>

И круг отобразится. Ух как всё просто 🙂

Привет

CSS

.button{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px; font-size:20px;
 color:#fff;
 line-height:100px;
 text-align:center;
 background:#000
 }

HTML

Чтобы получился такой круг с ссылкой нужно к коду ссылки присвоить класс:

<a href="#"  class="button">Привет</a>

Это свойство позволяет нам менять цвет при наведении.
Привет

CSS

.menu{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px;
 color:#fff;
 line-height:100px;
 text-decoration:none;
 text-align:center;
 background:#000
 }
 .menu:hover{
 color:#fff;
 text-decoration:none;
 background:#333
 }

HTML

<a href="#">Привет</a>

Ну а здесь Вы сможете добавить разные стили на Ваше усмотрение, например тень или бордюр. Вот, что у меня получилось:
Привет

CSS

.stylish{
 width:100px;
 height:100px;
 display:block;
 border-radius:66px;
 -moz-border-radius:66px;
 -webkit-border-radius:66px;
 -khtml-border-radius:66px;
 border:#ccc 4px double;
 font-size:20px;
 color:#888;
 line-height:100px;
 text-shadow:0 1px 0 #fff;
 text-decoration:none;
 text-align:center;
 background:#ddd}

.stylish:hover{
 border:#bbb 4px double;
 color:#aaa;
 text-decoration:none;
 background:#e6e6e6
 }

HTML

<a href="#">Hello</a>

Как видите, в принципе, здесь ничего сложного нет, главное понять что за что отвечает и экспериментировать, и тогда всё обязательно получится.

Обычный круг

.krug {
 width: 100px;
 height: 100px;
 background: #70B4CF;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 }

Овал

. oval {
 width: 180px;
 height: 90px;
 background: #70B4CF;
 -moz-border-radius: 90px/45px;
 -webkit-border-radius: 90px/45px;
 border-radius: 90/45px;
 }

Полукруг

.half-circle{
 background: orange;
 height: 50px;
 width: 100px;
 -moz-border-radius: 100px 100px 0 0;
 -webkit-border-radius: 100px 100px 0 0;
 border-radius: 100px 100px 0 0;
 }

Обрезанный круг

.quartercircle{
 background: #E4A7E8;
 height: 100px;
 width: 100px;
 -moz-border-radius: 100px 0 0 0;
 -webkit-border-radius: 100px 0 0 0;
 border-radius: 100px 0 0 0;
 }

Вот и всё, дорогие друзья. Надеюсь с этой статьи Вы что нибудь узнали для себя новое и полезное. И прошу Вас если что то будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

100+ Юникод символов, которые можно использовать в HTML/CSS/JS/PHP

В этой заметке речь пойдет об универсальных Unicode-символах. Иконках, которые понимают все браузеры и системы.

Для того чтобы использовать иконки в HTML коде (верстке), обычно устанавливаются пакеты иконок на базе шрифтов, например Font Awesome. Однако, часто удобнее вставить известный браузеру Unicode-символ и не подключать лишние шрифты. Рассмотрим такие символы в этой заметке.

В браузерах есть встроенные библиотеки доступных иконок и иероглифов. Доступны они в Unicode формате — это стандарт, который присваивает уникальный идентификатор для каждого специального символа. Число таких символов (иконок, значков) постоянно растет и сегодня их более 110 000. Но не все браузеры понимают все такие символы. Браузеры работают на базе иконок которые доступны в вашей системе: Windows, Linux, OS X, Android и iOS. В этой заметке собраны иконки, которые установлены во всех таких системах, а значит можно сказать что они универсальные и их в 99% случаев поймет и отобразит любой браузер.

Ищите символы на сайте G r a p h e m i c a
Ищите символы на сайте w3schools. com

Заметка: статья о кодировках символов и Юникоде (англ).

Читайте также Заметки по SVG — это безграничное число иконок.

Как использовать Unicode символы

Значки, приведенные в таблицах ниже, являются обычными символами, которые можно копировать и вставлять, как если бы они были буквами текста. Однако, если кодировка файла (HTML/CSS) куда вставляется скопированный значок не UTF-8 вставленный значок отображаться не будет, более того — он потеряется. Для таких случаев в таблице приведён HTML код знака.

Что нужно сделать, чтобы использовать иконки:

Найти нужный значок.
Скопировать иконку или её код.
Вставить скопированное в HTML/JS/PHP как обычный текст. В CSS его можно использовать в качестве значения свойства content:'★';, или так если используется код content:'\2605';.

Использование кода иконки в разных языках. Например UTF8 код ◑ = 25D1, тогда:

CSS                      \25D1
JavaScript / JSON        \u25D1
C / C++ / Java / Python  \u25D1
Perl                     \x{25D1}
Ruby                     \u{25D1}

Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т. д.

Оглавление:

Иконки

Иконка	Decimal	Entity	css	Название
☺	`☺`		`\263A`	Улыбка
♨	`♨`		`\2668`	Хот-спрингс
➑	`➑`		`\2791`	8-мяч
☆	`☆`		`\2606`	Белая звезда
★	`★`		`\2605`	Черная звезда
✪	`✪`		`\272A`	Белая звезда обведенная
✰	`✰`		`\2730`	Белая звезда
✧	`✧`		`\2727`	Белая четырехконечная звезда
✦	`✦`		`\2726`	Черная четырехконечная звезда
♡	`♡`		`\2661`	Белое сердце
❤	`❤`		`\2764`	Черное сердце
✈	`✈`		`\2708`	Самолет
✂	`✂`		`\2702`	Черные ножницы
✄	`✄`		`\2704`	Белые ножницы
♕	`♕`		`\2655`	Корона
✝	`✝`		`\271D`	Крест
†	`†`	`&dagger;`	`\2020`	Кинжал
‡	`‡`	`&Dagger;`	`\2021`	Двойной Кинжал
◑	`◑`		`\25D1`	Черно-белый круг
♪	`♪`		`\266A`	Нота
♫	`♫`		`\266B`	Ноты
✣	`✣`		`\2723`	Четыре звездочки с шарами
☑	`☑`		`\2611`	Чекбокс с галочкой
✔	`✔`		`\2714`	Галочка
✘	`✘`		`\2718`	Крестик
╳	`╳`	—	`\2573`	Квадратный крестик
✎	`✎`		`\270E`	Карандаш
✍	`✍`		`\270D`	Пишущая рука
♀	`♀`		`\2640`	Женщина
♂	`♂`		`\2642`	Мужчина
☎	`☎`		`\260E`	Черный телефон
☏	`☏`		`\260F`	Белый телефон
✉	`✉`		`\2709`	Конверт
✆	`✆`		`\2706`	Знак телефона

Стрелки

Иконка	Decimal	Entity	css	Название
←	`←`	`←`	`\2190`	Стрелка влево
→	`→`	`→`	`\2192`	Стрелка вправо
↑	`↑`	`↑`	`\2191`	Стрелка вверх
↓	`↓`	`↓`	`\2193`	Стрелка вниз
↔	`↔`	`↔`	`\2194`	Стрелка влево вправо
↕	`↕`	—	`\2195`	Стрелка вверх вниз
⇄	`⇄`	—	`\21C4`	Стрелки вправо и влево
⇅	`⇅`	—	`\21C5`	Стрелки вверх и вниз
↲	`↲`	—	`\21B2`	Вниз-влево 90 градусов
↳	`↳`	—	`\21B3`	Стрелка вниз-вправо 90 градусов
↱	`↱`	—	`\21B1`	Стрелка вверх-вправо 90 градусов
⇤	`⇤`	—	`\21E4`	Стрелка влево к полосе
↶	`↶`	—	`\21B6`	Полукруг против часовой стрелки
↷	`↷`	—	`\21B7`	Полукруг по часовой стрелке
↺	`↺`	—	`\21BA`	Круг против часовой стрелки
↻	`↻`	—	`\21BB`	Круг по часовой стрелке
➔	`➔`	—	`\2794`	Широкоугольная стрелка вправо
↯	`↯`	—	`\21AF`	Зигзагообразная стрелка вниз
↖	`↖`	—	`\2196`	Стрелка Северо-Запада
➘	`➘`	—	`\2798`	Тяжелая юго-восточная стрела
➙	`➙`	—	`\2799`	Тяжелая стрелка вправо
➚	`➚`	—	`\279A`	Тяжелая северо-восточная стрела
➟	`➟`	—	`\279F`	Пунктирная стрелка вправо
⇠	`⇠`	—	`\21E0`	Пунктирная стрелка влево
➤	`➤`	—	`\27A4`	Черная стрелка вправо
▶	`▶`	—	`\25B6`	Стрелка вправо (max)
◀	`◀`	—	`\25C0`	Стрелка влево (max)
▲	`▲`	—	`\25B2`	Стрелка вверх (max)
▼	`▼`	—	`\25BC`	Стрелка вниз (max)
▸	`▸`	—	`\25B8`	Стрелка вправо (min)
◂	`◂`	—	`\25C2`	Стрелка влево (min)
▴	`▴`	—	`\25B4`	Стрелка вверх (min)
▾	`▾`	—	`\25BE`	Стрелка вниз (min)
►	`►`	—	`\25BA`	Стрелка вправо (удлиненная)
◄	`◄`	—	`\25C4`	Стрелка влево (удлиненная)
▷	`▷`	—	`\25B7`	Белый указатель вправо
◁	`◁`	—	`\25C1`	Белый указатель влево
△	`△`	—	`\25B3`	Белый указатель вверх
▽	`▽`	—	`\25BD`	Белый указатель вниз
⇦	`⇦`	—	`\21E6`	Белая стрелка влево
⇨	`⇨`	—	`\21E8`	Белая стрелка вправо
⇒	`⇒`	`⇒`	`\21D2`	Двойная стрелка вправо
⇐	`⇐`	`⇐`	`\21D0`	Двойная стрелка влево
⇑	`⇑`	`&uArr;`	`\21D1`	Двойная стрелка вверх
⇓	`⇓`	`&dArr;`	`\21D3`	Двойная стрелка вниз
⇔	`⇔`	`⇔`	`\21D4`	Двойная стрелка влево-вправо
↵	`↵`	`&crarr;`	`\21B5`	Возврат каретки

Кавычки

Иконка	Decimal	Entity	css	Название
«	`«`	`«`	`\00AB`	Кавычки слева
»	`»`	`»`	`\00BB`	Кавычек справа
‘	`‘`	`‘`	`\2018`	Открывающая одинарная кавычка
’	`’`	`’`	`\2019`	Закрывающая одинарная кавычка
‚	`‚`	`&sbquo;`	`\201A`	Нижняя одинарная кавычка
“	`“`	`“`	`\201C`	Открывающая двойная кавычка
”	`”`	`”`	`\201D`	Закрывающая двойная кавычка
„	`„`	`&bdquo;`	`\201E`	Нижняя двойная кавычка
′	`′`	`′`	`\2032`	Штрих, минуты, лапка
″	`″`	`″`	`\2033`	Двойной штрих
‴	`‴`	—	`\2034`	Тройной штрих

Специальные

Иконка	Decimal	Entity	css	Название
№	`№`	—	`\2116`	Номер
©	`©`	`©`	`\00A9`	Авторское право
®	`®`	`®`	`\00AE`	Зарегистрированный
™	`™`	`™`	`\2122`	Товарный знак
℮	`℮`	—	`\212E`	Предполагаемый
·	`·`	`·`	`\00B7`	Средняя Точка (Маркер списка)
•	`•`	`•`	`\2022`	Точка
■	`■`	—	`\25A0`	Черный квадрат
□	`□`	—	`\25A1`	Белый квадрат
—	`—`	`—`	`\2014`	Длинное тире
‰	`‰`	`&permil;`	`\2030`	Знак промилле
…	`…`	`…`	`\2026`	Многоточие
¶	`¶`	`¶`	`\00B6`	Знак абзаца

Валюта

Иконка	Decimal	Entity	css	Название
₽	`₽`	—	`\0020BD`	Рубль (правый Alt+8)
€	`€`	`€`	`\0020AC`	Евро
£	`£`	`£`	`\00A3`	Фунт
₤	`₤`	—	`\20A4`	Лира
¥	`¥`	`¥`	`\00A5`	Иена
¢	`¢`	`¢`	`\00A2`	Цент
¤	`¤`	`¤`	`\00A4`	Валюта

Погода

Иконка	Decimal	Entity	css	Название
°	`°`	`°`	`\00B0`	Градус
☀	`☀`	—	`\2600`	Солнце маленькое
☼	`☼`	—	`\263C`	Солнце большое
☁	`☁`	—	`\2601`	Облако
❆	`❆`	—	`\2746`	Снежинка 1
❅	`❅`	—	`\2745`	Снежинка 2
❄	`❄`	—	`\2744`	Снежинка 3

Указатели

Иконка	Decimal	Entity	css	Название
☚	`☚`	—	`\261A`	Указатель Влево черный
☛	`☛`	—	`\261B`	Указатель Вправо черный
☜	`☜`	—	`\261C`	Указатель Левый белый
☝	`☝`	—	`\261D`	Указатель Вверх белый
☞	`☞`	—	`\261E`	Указатель Вправо белый
☟	`☟`	—	`\261F`	Указатель Вниз белый

Фракции

Иконка	Decimal	Entity	css	Название
½	`½`	`½`	`\00BD`	Половина (1/2)
¼	`¼`	`¼`	`\00BC`	Четверть (1/4)
¾	`¾`	`¾`	`\00BE`	Три четверти (3/4)
⅓	`⅓`	—	`\2153`	Одна треть (1/3)
⅔	`⅔`	—	`\2154`	Две трети (2/3)
⅛	`⅛`	—	`\215B`	Одна восьмая (1/8)
⅜	`⅜`	—	`\215C`	Три восьмых (3/8)
⅝	`⅝`	—	`\215D`	Пять восьмых (5/8)
⅞	`⅞`	—	`\215E`	Семь восьмых (7/8)

Римские цифры

Иконка	Decimal	Entity	css	Название
Ⅰ	`Ⅰ`	—	`\2160`	Один (римская цифра)
Ⅱ	`Ⅱ`	—	`\2161`	Два (римская цифра)
Ⅲ	`Ⅲ`	—	`\2162`	Три (римская цифра)
Ⅳ	`Ⅳ`	—	`\2163`	Четыре (римская цифра)
Ⅴ	`Ⅴ`	—	`\2164`	Пять (римская цифра)
Ⅵ	`Ⅵ`	—	`\2165`	Шесть (римская цифра)
Ⅶ	`Ⅶ`	—	`\2166`	Семь (римская цифра)
Ⅷ	`Ⅷ`	—	`\2167`	Восемь (римская цифра)
Ⅸ	`Ⅸ`	—	`\2168`	Девять (римская цифра)
Ⅹ	`Ⅹ`	—	`\2169`	Десять (римская цифра)
Ⅺ	`Ⅺ`	—	`\216A`	Одиннадцать (римская цифра)
Ⅻ	`Ⅻ`	—	`\216B`	Двенадцать (римская цифра)

Математика

Иконка	Decimal	Entity	css	Название
∞	`∞`	`∞`	`\221E`	Бесконечность
±	`±`	`±`	`\00B1`	Плюс-минус
≅	`≅`	`&cong;`	`\2245`	Приблизительно равно
≈	`≈`	`≈`	`\2248`	Асимптотически равно
≠	`≠`	`≠`	`\2260`	Не равно
≡	`≡`	`&equiv;`	`\2261`	Тождественно равно
≤	`≤`	`≤`	`\2264`	Меньше или равно
≥	`≥`	`≥`	`\2265`	Больше или равно
÷	`÷`	`÷`	`\00F7`	Деление
×	`×`	`×`	`\00D7`	Умножение х
✖	`✖`	—	`\2716`	Тяжелое умножение x
¹	`¹`	`¹`	`\00B9`	Один (верхний индекс)
²	`²`	`²`	`\00B2`	Два (верхний индекс)
³	`³`	`³`	`\00B3`	Три (верхний индекс)
⊕	`⊕`	`&oplus;`	`\2295`	Прямая сумма
⊗	`⊗`	`&otimes;`	`\2297`	Векторное произведение
∏	`∏`	`∏`	`\220F`	N-арное произведение
∑	`∑`	`∑`	`\2211`	N-арная сумма (Сигма)
∅	`∅`	`∅`	`\2205`	Пустое множество. Диаметр.
∠	`∠`	`&ang;`	`\2220`	Угол
∥	`∥`	—	`\2225`	Параллельно
⊥	`⊥`	`&perp;`	`\22A5`	Перпендикулярно
△	`△`	—	`\25B3`	Треугольник
○	`○`	—	`\25CB`	Круг
□	`□`	—	`\25A1`	Квадрат
‾	`‾`	`&oline;`	`\203E`	Надчеркивание
⁄	`⁄`	`&frasl;`	`\2044`	Дробная черта

Иконка	Decimal	Entity	css	Название
√	`√`	`√`	`\221A`	Радикал
∝	`∝`	`&prop;`	`\221D`	Пропорционально
∩	`∩`	`∩`	`\2229`	Пересечение
∪	`∪`	`∪`	`\222A`	Объединение
∫	`∫`	`∫`	`\222B`	Интеграл
∴	`∴`	`&there4;`	`\2234`	Следовательно
∼	`∼`	`&sim;`	`\223C`	Оператор тильда
⊂	`⊂`	`⊂`	`\2282`	Подмножество
⊃	`⊃`	`⊃`	`\2283`	Надмножество
⊄	`⊄`	`&nsub;`	`\2284`	Не подмножество
⊆	`⊆`	`&sube;`	`\2286`	Подмножество или равно
⊇	`⊇`	`&supe;`	`\2287`	Надмножество или равно
∧	`∧`	`&and;`	`\2227`	Логичское И
∨	`∨`	`&or;`	`\2228`	Логичское ИЛИ

Иконка	Decimal	Entity	css	Название
ℑ	`ℑ`	`&image;`	`\2111`	Мнимая часть числа
ℜ	`ℜ`	`&real;`	`\211C`	Действительная часть числа
ℵ	`ℵ`	`&alefsym;`	`\2135`	Алеф

Иконка	Decimal	Entity	css	Название
∀	`∀`	`∀`	`\2200`	Квантор всеобщности
∃	`∃`	`∃`	`\2203`	Квантор существования
∂	`∂`	`∂`	`\2202`	Дифференциал
∇	`∇`	`∇`	`\2207`	Набла
∈	`∈`	`∈`	`\2208`	Принадлежит множеству
∉	`∉`	`∉`	`\2209`	Не принадлежит множеству
∋	`∋`	`&ni;`	`\220B`	Является членом

Иконка	Decimal	Entity	css	Название
Δ	`Δ`	`Δ`	`\0394`	Дельта (прописная)
ƒ	`ƒ`	`&fnof;`	`\0192`	Курсивное f
Α	`Α`	`Α`	`\0391`	Альфа (прописная)
Β	`Β`	`Β`	`\0392`	Бета (прописная)
Γ	`Γ`	`Γ`	`\0393`	Гамма (прописная)
Ε	`Ε`	`Ε`	`\0395`	Эпсилон (прописной)
Ζ	`Ζ`	`Ζ`	`\0396`	Дзета (прописная)
Η	`Η`	`Η`	`\0397`	Эта (прописная)
Θ	`Θ`	`Θ`	`\0398`	Тета (прописная)
Ι	`Ι`	`Ι`	`\0399`	Иота (прописная)
Κ	`Κ`	`Κ`	`\039A`	Каппа (прописная)
Λ	`Λ`	`Λ`	`\039B`	Ламбда (прописная)
Μ	`Μ`	`Μ`	`\039C`	Мю (прописная)
Ν	`Ν`	`Ν`	`\039D`	Ню (прописная)
Ξ	`Ξ`	`Ξ`	`\039E`	Кси (прописная)
Ο	`Ο`	`Ο`	`\039F`	Омикрон (прописной)
Π	`Π`	`Π`	`\03A0`	Пи (прописная)
Ρ	`Ρ`	`Ρ`	`\03A1`	Ро (прописная)
Σ	`Σ`	`Σ`	`\03A3`	Сигма (прописная)
Τ	`Τ`	`Τ`	`\03A4`	Тау (прописная)
Υ	`Υ`	`Υ`	`\03A5`	Ипсилон (прописная)
Φ	`Φ`	`Φ`	`\03A6`	Фи (прописная)
Χ	`Χ`	`Χ`	`\03A7`	Хи (прописная)
Ψ	`Ψ`	`Ψ`	`\03A8`	Пси (прописная)
Ω	`Ω`	`Ω`	`\03A9`	Омега (прописная)
α	`α`	`α`	`\03B1`	Альфа (строчная)
β	`β`	`β`	`\03B2`	Бета (строчная)
γ	`γ`	`γ`	`\03B3`	Гамма (строчная)
δ	`δ`	`δ`	`\03B4`	Дельта (строчная)
ε	`ε`	`ε`	`\03B5`	Эпсилон (строчная)
ζ	`ζ`	`ζ`	`\03B6`	Дзета (строчная)
η	`η`	`η`	`\03B7`	Эта (строчная)
θ	`θ`	`θ`	`\03B8`	Тета (строчная)
ι	`ι`	`ι`	`\03B9`	Иота (строчная)
κ	`κ`	`κ`	`\03BA`	Каппа (строчная)
λ	`λ`	`λ`	`\03BB`	Ламбда (строчная)
μ	`μ`	`μ`	`\03BC`	Мю (строчная)
ν	`ν`	`ν`	`\03BD`	Ню (строчная)
ξ	`ξ`	`ξ`	`\03BE`	Кси (строчная)
ο	`ο`	`ο`	`\03BF`	Омикрон (строчный)
π	`π`	`π`	`\03C0`	Пи (строчная)
ρ	`ρ`	`ρ`	`\03C1`	Ро (строчная)
ς	`ς`	`&sigmaf;`	`\03C2`	Сигма конечная (строчная)
σ	`σ`	`σ`	`\03C3`	Сигма (строчная)
τ	`τ`	`τ`	`\03C4`	Тау (строчная)
υ	`υ`	`υ`	`\03C5`	Ипсилон (строчная)
φ	`φ`	`φ`	`\03C6`	Фи (строчная)
χ	`χ`	`χ`	`\03C7`	Хи (строчная)
ψ	`ψ`	`ψ`	`\03C8`	Пси (строчная)
ω	`ω`	`ω`	`\03C9`	Омега (строчная)
ϑ	`ϑ`	`&thetasym;`	`\03D1`	Тета (строчная)
ϒ	`ϒ`	`&upsih;`	`\03D2`	Ипсилон с крючком
ϖ	`ϖ`	`ϖ`	`\03D6`	Пи

Карты

Иконка	Decimal	Entity	css	Название
♠	`♠`	`&spades;`	`\2660`	Пики черные
♥	`♥`	`&hearts;`	`\2665`	Сердце черные
♦	`♦`	`&diams;`	`\2666`	Буби черные
♣	`♣`	`&clubs;`	`\2663`	Крести черные
♤	`♤`	—	`\2664`	Пики белые
♡	`♡`	—	`\2661`	Сердце белые
♢	`♢`	—	`\2662`	Буби белые
♧	`♧`	—	`\2667`	Крести белые

Шахматы

Иконка	Decimal	Entity	css	Название
♔	`♔`	—	`\2654`	Король белый
♕	`♕`	—	`\2655`	Ферзь белый
♖	`♖`	—	`\2656`	Ладья белая
♗	`♗`	—	`\2657`	Слон белый
♘	`♘`	—	`\2658`	Конь белый
♙	`♙`	—	`\2659`	Пешка белая
♚	`♚`	—	`\265A`	Король черный
♛	`♛`	—	`\265B`	Ферзь черный
♜	`♜`	—	`\265C`	Ладья черная
♝	`♝`	—	`\265D`	Слон черный
♞	`♞`	—	`\265E`	Конь черный
♟	`♟`	—	`\265F`	Пешка черная

Дерево папок

Иконка	Decimal	Entity	css
├	`├`	—	`\251C`
└	`└`	—	`\2514`
│	`│`	—	`\2502`
┬	`┬`	—	`\252C`
─	`─`	—	`\2500`

Всегда показвать иконки как текст

Как заставить браузеры показыать иконки как текст, а не как Emoji.

Для этого нужно дописать к иконке Вариативный селектор 15 (VARIATION SELECTOR-15 — VS15) — U+FE0E. Тогда обе эти иконки будут рендерится как один глиф.

Например:

🔒
🔒︎ = 🔒&#xFE0E;
☝
☝︎ = ☝&#xFE0E;
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍&#xFE0E;

Подробнее:

https://stackoverflow.com/questions/32915485/
https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

Интересные видео

Полезные знаки и символы.

Полезные знаки и символы

Описание символа	HTML-код	CSS-код	Вид
Конверт	✉	2709	✉
Обратная сторона конверта	🖂	1F582	🖂
Телефон	☎	260E	☎
Белый телефон	☏	260F	☏
Знак телефона	✆	2706	✆
Телефонная трубка	📞		📞
Телефонная трубка левосторонняя	🕻		🕻
Телефонная трубка правосторонняя	🕽		🕽
Черный телефон	🕿		🕿
Мобильный телефон	📱		📱
Карандаш, направленный вправо-вниз	✎	270E	✎
Карандаш	✏	270F	✏
Карандаш, направленный вправо-вверх	✐	2710	✐
Закрашенное острие пера	✒	2712	✒
Незакрашенное острие пера	✑	2711	✑
Солнце	&9788;	263C	☼
Закрашенное солнце с лучами	☀	2600	☀
Облака	☁	2601	☁
Зонтик	☂	2602	☂
Незакрашенный флаг	⚐	2690	⚐
Закрашенный флаг	⚑	2691	⚑
Галочка в квадрате	☑	2611	☑
Жирная галочка в квадрате	🗹		🗹
Крестик в квадрате	☒	2612	☒
Снежинка	❄	2744	❄
Жирная остроугольная снежинка	❆	2746	❆
Зажатая трилистниками снежинка	❅	2745	❅
Лупа (наклонённая влево)	🔍		🔍
Лупа (наклонённая вправо)	🔎		🔎
Дискета	💾		💾
Молоток и гаечный ключ, настройка	🛠		🛠
Урна	🗑		🗑
Запрещено	🛇		🛇
Средний незакрашенный круг	⚪	26AA	⚪
Средний закрашенный круг	⚫	26AB	⚫
Колокольчик	🔔		🔔
Колокольчик перечеркнутый	🔕		🔕
Замок закрыт	🔒		🔒
Замок открыт	🔓		🔓
Вход запрещен (кирпич)	⛔	26D4	⛔
Огонь	🔥		🔥
Будильник	⏰		⏰
Наручные часы	⌚		⌚
Песочные часы	⌛		⌛
Песочные часы	⏳		⏳
Каминные часы	🕰		🕰
Волнистая линия	⌇	2307	⌇
Клавиатура	⌨	2328	⌨
Символ атома	⚛	2698	⚛
Символ переработки	♺	267A	♺
Пишущая рука	✍	270D	✍
Якорь	⚓	2693	⚓
Триграмма	☰	2630	☰
Закрашенный цветок	✿	273f	✿
Незакрашенный цветок	❀	2740	❀
Цветок с шестью лепестками	✾	273E	✾
Закрашенный обведённый цветок	❁	2741	❁
Номер 1	❶	2776	❶
Номер 2	❷	2777	❷
Номер 3	❸	2778	❸
Номер 4	❹	2779	❹
Номер 5	❺	277A	❺
Номер 6	❻	277B	❻
Номер 7	❼	277C	❼
Номер 8	❽	277D	❽
Номер 9	❾	277E	❾
Номер 10	❿	277F	❿
Номер 1	➀	2780	➀
Номер 2	➁	2781	➁
Номер 3	➂	2782	➂
Номер 4	➃	2783	➃
Номер 5	➄	2784	➄
Номер 6	➅	2785	➅
Номер 7	➆	2786	➆
Номер 8	➇	2787	➇
Номер 9	➈	2788	➈
Номер 10	➉	2789	➉
Закрашенная звезда	★	2605	★
Незакрашенная звезда	☆	2506	☆
Незакрашенная звезда в закрашенном круге	✪	272A	✪
Закрашенная звезда с незакрашенным кругом внутри	✫	272B	✫
Выпуклая звезда	✯	272F	✯
Звёздочка с незакрашенным центром	✲	2732	✲
Звёздочка с шарообразными окончаниями	❉	2749	❉
Начерченная белая звезда	⚝	269D	⚝
Три звездочки	⁂	2042	⁂
Паром, переправа, судно, корабль	⛴	26F4	⛴
Незакрашенный квадрат с правой нижней тенью	❑	2751	❑
Незакрашенный квадрат с правой верхней тенью	❒	2752	❒
Алмаз в оправе	◈	25C8	◈
Круг с левой закрашенной половиной	◐	25D0	◐
Круг с закрашенной правой половиной	◑	25D1	◑
Круг с нижней закрашенной половиной	◒	25D2	◒
Круг с закрашенной нверхней половиной	◓	25D1	◓
Треугольная стрелка вверх	▲	25B2	▲
Треугольная стрелка вниз	▼	25BC	▼
Треугольная стрелка вправо	►	25BA	►
Треугольная стрелка влево	◄	25C4	◄
Галочка	✓	2713	✓
Жирная галочка	✔	2714	✔
Круг	○	25CB	○
Круг закрашенный	●	25CF	●
Квадрат	□	25A1	□
Квадрат закрашенный	■	25A0	■
Растущий месяц	☽	263D	☽
Убывающий месяц	☾	263E	☾
Череп и кости	☠	2620	☠
Мусульманский символ	☪	262A	☪
Серп и молот	☭	262D	☭
Инь и янь	☯	262F	☯
Звезда Давида	✡	2721	✡
Мальтийский крест	✠	2720	✠
Анх	☥	2625	☥
Самолет	✈	2708	✈
Черные ножницы	✂	2702	✂
Белые ножницы	✄	2704	✄
Гора	⛰	26F0	⛰
Зонт на земле	⛱	26F1	⛱
Двойная открывающаяся кавычка	❝	275D	❝
Двойная закрывающаяся кавычка	❞	275E	❞
Наконечник стрелы	➤	27A4	➤
Круглая стрелка с наконечником против часовой стрелки	↺	21BA	↺
Круглая стрелка с наконечником против часовой стрелки	↻	21BB	↻
Белый восклицательный знак	❕	2755	❕
Красный восклицательный знак	❗	2757	❗
Белый вопросительный знак	❔	2754	❔
Красный вопросительный знак	❓	2753	❓
Неразрывный пробел		00A0
Место возможного переноса		00AD
Женщина	♀	2640	♀
Мужчина	♂	2642	♂
Радиоактивно	☢	2622	☢
Отрывной календарь	📆		📆
Символ градус Цельсия	℃		℃
Символ Градус Фаренгейта	℉		℉
Знак торговой марки	™		™
Зарегистрированная торговая марка	®		®
Посох Асклепия	⚕		⚕

HTML и CSS коды.

Математические коды

Описание символа	HTML-код	Вид
Плюс-минус	±	±
Меньше или равно	≤	≤
Больше или равно	≥	≥
Пи	π	π
Корень квадратный	√	√
Слэш, дробная черта	⁄	⁄
Отрицание	¬	¬
Тождественное равенство	≡	≡
Угол	∠	∠
Градус	°	°
Оператор тильда	∼	∼
Геометрическая эквивалентность	≅	≅
Приблизительное равенство	≈	≈
Не равно	≠	≠
Верхний индекс «2»	²	²
Верхний индекс «3»	³	³
Бесконечность	∞	∞
Пропорционально	∝	∝
Перпендикулярно	⊥	⊥
Функция	ƒ	ƒ
Интеграл	∫	∫
Для всех	∀	∀
Существует	∃	∃
Сумма последовательности	∑	∑
Логическое И (конъюнкция)	∧	∧
Логическое ИЛИ (дизъюнкция)	∨	∨
Диаметр	∅	∅
Принадлежит	∈	∈
Не принадлежит	∉	∉
Содержит	∋	∋
Пересечение	∩	∩
Объединение	∪	∪
Является подмножеством	⊂	⊂
Не является подмножеством	⊄	⊄

HTML и CSS коды.

Римские цифры

Описание символа	HTML-код	CSS-код	Вид
Римская цифра один	Ⅰ	2160	Ⅰ
Римская цифра два	Ⅱ	2161	Ⅱ
Римская цифра три	Ⅲ	2162	Ⅲ
Римская цифра четыре	Ⅳ	2163	Ⅳ
Римская цифра пять	Ⅴ	2164	Ⅴ
Римская цифра шесть	Ⅵ	2165	Ⅵ
Римская цифра семь	Ⅶ	2166	Ⅶ
Римская цифра восемь	Ⅷ	2167	Ⅷ
Римская цифра девять	Ⅸ	2168	Ⅸ
Римская цифра десять	Ⅹ	2169	Ⅹ
Римская цифра одиннадцать	Ⅺ	216A	Ⅺ
Римская цифра двенадцать	Ⅻ	216B	Ⅻ
Римская цифра пятьдесят	&;#8556;	216C	Ⅼ
Римская цифра сто	Ⅽ	216D	Ⅽ
Римская цифра пятьсот	Ⅾ	216E	Ⅾ
Римская цифра тысяча	Ⅿ	216F	Ⅿ

HTML и CSS коды.

Знаки зодиака

Описание символа	HTML-код	CSS-код	Вид
Овен	♈	2648	♈
Телец	♉	2649	♉
Близнецы	♊	264A	♊
Рак	♋	264B	♋
Лев	♌	264C	♌
Дева	♍	264D	♍
Весы	♎	264E	♎
Скорпион	♏	264F	♏
Стрелец	♐	2650	♐
Козерог	♑	2651	♑
Водолей	♒	2652	♒
Рыбы	♓	2653	♓

HTML и CSS коды. Транспорт.

Описание символа	HTML-код	CSS-код	Вид
Корабль	⛴	26F4	⛴
Парусник	⛵	26F5	⛵
Ракета	🚀		🚀
Вертолет	🚁		🚁
Паравоз	🚂		🚂
Вагон	🚃		🚃
Скоростной поезд	🚅		🚅
Поезд	🚆		🚆
Метро	🚇		🚇
Велосипед	🚲		🚲
Автомобиль	🚗		🚗
Грузовик	🚚		🚚
Тягач	🚛		🚛
Автобус	🚌		🚌
Скорая помощь	🚑		🚑
	🚒	1F692	🚒
	🚓	1F693	🚓
	🚔	1F694	🚔
	🚕	1F695	🚕
	🚖	1F696	🚖
	🚗	1F697	🚗
	🚘	1F698	🚘
	🚙	1F699	🚙
	🚚	1F69A	🚚
	🚛	1F69B	🚛
	🚜	1F69C	🚜
	🚢	1F6A2	🚢
	🚣	1F6A3	🚣
	🚤	1F6A4	🚤
	🚉	1F689	🚉
	🚊	1F68A	🚊
	🚍	1F68D	🚍
	🚋	1F68B	🚋
	🚎	1F68E	🚎
	🚐	1F690	🚐
	🚈	1F688	🚈
	🚄	1F684	🚄
	🚴	1F6B4	🚴
	🛦	1F6E6	🛦
	🛧	1F6E7	🛧
	🛨	1F6E8	🛨
	🛩	1F6E9	🛩
	🛪	1F6EA	🛪
	🛵	1F6F5	🛵

HTML и CSS коды.

Смайлики.

HTML-код	CSS-код	Вид
☹	2639	☹
☺	263A	☺
☻	263B	☻
👼	1F47C	👼
👽	1F47D	👽
👿	1F47F	👿
😀	1F600	😀
😁	1F601	😁
😂	1F602	😂
😃	1F603	😃
😄	1F604	😄
😅	1F605	😅
😆	1F606	😆
😇	1F607	😇
😈	1F608	😈
😉	1F609	😉
😊	1F60A	😊
😋	1F60B	😋
😌	1F60C	😌
😍	1F60D	😍
😎	1F60E	😎
😏	1F60F	😏
😐	1F610	😐
😑	1F611	😑
😒	1F612	😒
😓	1F613	😓
😔	1F614	😔
😕	1F615	😕
😖	1F616	😖
😗	1F617	😗
😘	1F618	😘
😙	1F619	😙
😚	1F61A	😚
😛	1F61B	😛
😜	1F61C	😜
😝	1F61D	😝
😞	1F61E	😞
😟	1F61F	😟
😠	1F620	😠
😡	1F621	😡
😢	1F622	😢
😣	1F623	😣
😤	1F624	😤
😥	1F625	😥
😦	1F626	😦
😧	1F627	😧
😨	1F628	😨
😩	1F629	😩
😪	1F62A	😪
😫	1F62B	😫
😬	1F62C	😬
😭	1F62D	😭
😮	1F62E	😮
😯	1F62F	😯
😰	1F630	😰
😱	1F631	😱
😲	1F632	😲
😳	1F633	😳
😴	1F634	😴
😵	1F635	😵
😶	1F636	😶
😷	1F637	😷
🙁	1F641	🙁
🙂	1F642	🙂
🙃	1F643	🙃
🙄	1F644	🙄
🤐	1F910	🤐
🤑	1F911	🤑
🤒	1F912	🤒
🤓	1F913	🤓
🤔	1F914	🤔
🤕	1F915	🤕
🤖	1F916	🤖
🤗	1F917	🤗
🤠	1F920	🤠
🤡	1F921	🤡
🤢	1F922	🤢
🤣	1F923	🤣
🤤	1F924	🤤
🤥	1F925	🤥
🤧	1F927	🤧
🤨	1F928	🤨
🤩	1F929	🤩
🤪	1F92A	🤪
🤫	1F92B	🤫
🤬	1F92C	🤬
🤭	1F92D	🤭
🤮	1F92E	🤮
🤯	1F92F	🤯
🥰	1F970	🥰
🥳	1F973	🥳
🥴	1F974	🥴
🥵	1F975	🥵
🥶	1F976	🥶
🥺	1F97A	🥺

HTML и CSS коды.

Животные.

HTML-код	CSS-код	Вид
𓃒	130D2	𓃒
𓃓	130D3	𓃓
𓃔	130D4	𓃔
𓃖	130D6	𓃖
𓃗	130D7	𓃗
𓃘	130D8	𓃘
𓃙	130D9	𓃙
𓃚	130DA	𓃚
𓃛	130DB	𓃛
𓃝	130DD	𓃝
𓃞	130DE	𓃞
𓃟	130DF	𓃟
𓃠	130E0	𓃠
𓃡	130E1	𓃡
𓃥	130E5	𓃥
𓃦	130E6	𓃦
𓃧	130E7	𓃧
𓃩	130E9	𓃩
𓃪	130EA	𓃪
𓃫	130EB	𓃫
𓃬	130EC	𓃬
𓃮	130EE	𓃮
𓃯	130EF	𓃯
𓃰	130F0	𓃰
𓃱	130F1	𓃱
𓃲	130F2	𓃲
𓃴	130F4	𓃴
𓃵	130F5	𓃵
𓃶	130F6	𓃶
𓃷	130F7	𓃷
𓃸	130F8	𓃸
𓃹	130F9	𓃹
𓄚	1311A	𓄚
𓄿	1313F	𓄿
𓅀	13140	𓅀
𓅘	13158	𓅘
🐀	1F400	🐀
🐁	1F401	🐁
🐃	1F403	🐃
🐄	1F404	🐄
🐂	1F402	🐂
🐅	1F405	🐅
🐆	1F406	🐆
🐇	1F407	🐇
🐈	1F408	🐈
🐉	1F409	🐉
🐊	1F40A	🐊
🐋	1F40B	🐋
🐌	1F40C	🐌
🐍	1F40D	🐍
🐎	1F40E	🐎
🐏	1F40F	🐏
🐐	1F410	🐐
🐑	1F411	🐑
🐒	1F412	🐒
🐓	1F413	🐓
🐔	1F414	🐔
🐕	1F415	🐕
🐖	1F416	🐖
🐗	1F417	🐗
🐘	1F418	🐘
🐙	1F419	🐙
🐚	1F41A	🐚
🐛	1F41B	🐛
🐜	1F41C	🐜
🐝	1F41D	🐝
🐞	1F41E	🐞
🐟	1F41F	🐟
🐠	1F420	🐠
🐡	1F421	🐡
🐢	1F422	🐢
🐣	1F423	🐣
🐤	1F424	🐤
🐥	1F425	🐥
🐦	1F426	🐦
🐧	1F427	🐧
🐨	1F428	🐨
🐩	1F429	🐩
🐪	1F42A	🐪
🐫	1F42B	🐫
🐬	1F42C	🐬
🐭	1F42D	🐭
🐮	1F42E	🐮
🐯	1F42F	🐯
🐰	1F430	🐰
🐱	1F431	🐱
🐲	1F432	🐲
🐳	1F433	🐳
🐴	1F434	🐴
🐵	1F435	🐵
🐶	1F436	🐶
🐷	1F437	🐷
🐸	1F438	🐸
🐹	1F439	🐹
🐺	1F43A	🐺
🐻	1F43B	🐻
🐼	1F43C	🐼
🦁	1F981	🦁
🦃	1F983	🦃
🦄	1F984	🦄
🦅	1F985	🦅
🦆	1F986	🦆
🦇	1F987	🦇
🦈	1F988	🦈
🦉	1F989	🦉
🦊	1F98A	🦊
🦋	1F98B	🦋
🦌	1F98C	🦌
🦍	1F98D	🦍
🦎	1F98E	🦎
🦏	1F98F	🦏
🦐	1F990	🦐
🦑	1F991	🦑
🦒	1F992	🦒
🦓	1F993	🦓
🦔	1F994	🦔
🦕	1F995	🦕
🦖	1F996	🦖
🦗	1F997	🦗
🦘	1F998	🦘
🦙	1F999	🦙
🦚	1F99A	🦚
🦛	1F99B	🦛
🦜	1F99C	🦜
🦝	1F99D	🦝
🦞	1F99E	🦞
🦟	1F99F	🦟
🦡	1F9A1	🦡
🦢	1F9A2	🦢
🦀	1F980	🦀

HTML и CSS коды.

Стрелки.

HTML-код	CSS-код	Вид
ᛎ	16CE	ᛎ
ᛏ	16CF	ᛏ
ᛨ	16E8	ᛨ
⃪	20EA	⃪
←	2190	←
↑	2191	↑
→	2192	→
↓	2193	↓
↔	2194	↔
↕	2195	↕
↖	2196	↖
↗	2197	↗
↘	2198	↘
↙	2199	↙
↜	219C	↜
↝	219D	↝
↢	21A2	↢
↣	21A3	↣
↤	21A4	↤
↥	21A5	↥
↦	21A6	↦
↧	21A7	↧
↩	21A9	↩
↪	21AA	↪
↫	21AB	↫
↬	21AC	↬
↯	21AF	↯
↰	21B0	↰
↱	21B1	↱
↲	21B2	↲
↳	21B3	↳
↴	21B4	↴
↵	21B5	↵
↶	21B6	↶
↷	21B7	↷
↺	21BA	↺
↻	21BB	↻
⇄	21C4	⇄
⇅	21C5	⇅
⇆	21C6	⇆
⇇	21C7	⇇
⇈	21C8	⇈
⇉	21C9	⇉
⇊	21CA	⇊
⇐	21D0	⇐
⇑	21D1	⇑
⇒	21D2	⇒
⇓	21D3	⇓
⇔	21D4	⇔
⇕	21D5	⇕
⇖	21D6	⇖
⇗	21D7	⇗
⇘	21D8	⇘
⇙	21D9	⇙
⇚	21DA	⇚
⇛	21DB	⇛
⇜	21DC	⇜
⇝	21DD	⇝
⇠	21E0	⇠
⇡	21E1	⇡
⇢	21E2	⇢
⇣	21E3	⇣
⇦	21E6	⇦
⇧	21E7	⇧
⇨	21E8	⇨
⇩	21E9	⇩
⇪	21EA	⇪
⇫	21EB	⇫
⇬	21EC	⇬
⇭	21ED	⇭
⇮	21EE	⇮
⇯	21EF	⇯
⇰	21F0	⇰
⇱	21F1	⇱
⇲	21F2	⇲
⇳	21F3	⇳
⇵	21F5	⇵
⇶	21F6	⇶
⇽	21FD	⇽
⇾	21FE	⇾
⇿	21FF	⇿
⏎	23CE	⏎
⏩	23E9	⏩
⏪	23EA	⏪
⏫	23EB	⏫
⏬	23EC	⏬
➔	2794	➔
➘	2798	➘
➙	2799	➙
➚	279A	➚
➛	279B	➛
➜	279C	➜
➝	279D	➝
➞	279E	➞
➟	279F	➟
➠	27A0	➠
➡	27A1	➡
➢	27A2	➢
➣	27A3	➣
➤	27A4	➤
➥	27A5	➥
➦	27A6	➦
➧	27A7	➧
➨	27A8	➨
➩	27A9	➩
➪	27AA	➪
➫	27AB	➫
➬	27AC	➬
➭	27AD	➭
➮	27AE	➮
➯	27AF	➯
➱	27B1	➱
➳	27B3	➳
➴	27B4	➴
➵	27B5	➵
➶	27B6	➶
➷	27B7	➷
➸	27B8	➸
➹	27B9	➹
➺	27BA	➺
➻	27BB	➻
➼	27BC	➼
➽	27BD	➽
➾	27BE	➾
⟀	27C0	⟀
⟰	27F0	⟰
⟱	27F1	⟱
⟲	27F2	⟲
⟳	27F3	⟳
⟵	27F5	⟵
⟶	27F6	⟶
⟷	27F7	⟷
⟸	27F8	⟸
⟹	27F9	⟹
⟺	27FA	⟺
⟻	27FB	⟻
⟼	27FC	⟼
⟽	27FD	⟽
⟾	27FE	⟾
⟿	27FF	⟿
⤆	2906	⤆
⤇	2907	⤇
⤊	290A	⤊
⤋	290B	⤋
⤌	290C	⤌
⤍	290D	⤍
⤎	290E	⤎
⤏	290F	⤏
⤐	2910	⤐
⤑	2911	⤑
⤒	2912	⤒
⤓	2913	⤓
⤔	2914	⤔
⤕	2915	⤕
⤝	291D	⤝
⤞	291E	⤞
⤡	2921	⤡
⤢	2922	⤢
⤣	2923	⤣
⤤	2924	⤤
⤥	2925	⤥
⤦	2926	⤦
⤧	2927	⤧
⤨	2928	⤨
⤩	2929	⤩
⤪	292A	⤪
⤳	2933	⤳
⤴	2934	⤴
⤵	2935	⤵
⤶	2936	⤶
⤷	2937	⤷
⤸	2938	⤸
⤹	2939	⤹
⤺	293A	⤺
⤻	293B	⤻
⤼	293C	⤼
⤽	293D	⤽
⤾	293E	⤾
⤿	293F	⤿
⥀	2940	⥀
⥁	2941	⥁
⥂	2942	⥂
⥃	2943	⥃
⥄	2944	⥄
⥅	2945	⥅
⥆	2946	⥆
⥢	2962	⥢
⥣	2963	⥣
⥤	2964	⥤
⥥	2965	⥥
⬀	2B00	⬀
⬁	2B01	⬁
⬂	2B02	⬂
⬃	2B03	⬃
⬄	2B04	⬄
⬅	2B05	⬅
⬆	2B06	⬆
⬇	2B07	⬇
⬈	2B08	⬈
⬉	2B09	⬉
⬊	2B0A	⬊
⬋	2B0B	⬋
⬌	2B0C	⬌
⬍	2B0D	⬍
⬎	2B0E	⬎
⬏	2B0F	⬏
⬐	2B10	⬐
⬑	2B11	⬑
⬳	2B33	⬳
⭅	2B45	⭅
⭆	2B46	⭆
⭚	2B5A	⭚
⭛	2B5B	⭛
⭜	2B5C	⭜
⭝	2B5D	⭝
⭞	2B5E	⭞
⭟	2B5F	⭟
⭠	2B60	⭠
⭡	2B61	⭡
⭢	2B62	⭢
⭣	2B63	⭣
⭤	2B64	⭤
⭥	2B65	⭥
⭦	2B66	⭦
⭧	2B67	⭧
⭨	2B68	⭨
⭩	2B69	⭩
⭪	2B6A	⭪
⭫	2B6B	⭫
⭬	2B6C	⭬
⭭	2B6D	⭭
⭮	2B6E	⭮
⭯	2B6F	⭯
⭰	2B70	⭰
⭱	2B71	⭱
⭲	2B72	⭲
⭳	2B73	⭳
⭶	2B76	⭶
⭷	2B77	⭷
⭸	2B78	⭸
⭹	2B79	⭹
⭺	2B7A	⭺
⭻	2B7B	⭻
⭼	2B7C	⭼
⭽	2B7D	⭽
⭾	2B7E	⭾
⭿	2B7F	⭿
⮀	2B80	⮀
⮁	2B81	⮁
⮂	2B82	⮂
⮃	2B83	⮃
⮄	2B84	⮄
⮅	2B85	⮅
⮆	2B86	⮆
⮇	2B87	⮇
⮈	2B88	⮈
⮉	2B89	⮉
⮊	2B8A	⮊
⮋	2B8B	⮋
⮌	2B8C	⮌
⮍	2B8D	⮍
⮎	2B8E	⮎
⮏	2B8F	⮏
⮐	2B90	⮐
⮑	2B91	⮑
⮒	2B92	⮒
⮓	2B93	⮓
⮕	2B95	⮕
⮘	2B98	⮘
⮙	2B99	⮙
⮚	2B9A	⮚
⮛	2B9B	⮛
⮜	2B9C	⮜
⮝	2B9D	⮝
⮞	2B9E	⮞
⮟	2B9F	⮟
⮠	2BA0	⮠
⮡	2BA1	⮡
⮢	2BA2	⮢
⮣	2BA3	⮣
⮤	2BA4	⮤
⮥	2BA5	⮥
⮦	2BA6	⮦
⮧	2BA7	⮧
⮨	2BA8	⮨
⮩	2BA9	⮩
⮪	2BAA	⮪
⮫	2BAB	⮫
⮬	2BAC	⮬
⮭	2BAD	⮭
⮮	2BAE	⮮
⮯	2BAF	⮯
⮰	2BB0	⮰
⮱	2BB1	⮱
⮲	2BB2	⮲
⮳	2BB3	⮳
⮴	2BB4	⮴
⮵	2BB5	⮵
⮶	2BB6	⮶
⮷	2BB7	⮷
⮸	2BB8	⮸
⯬	2BEC	⯬
⯭	2BED	⯭
⯮	2BEE	⯮
⯯	2BEF	⯯
￩	FFE9	￩
￪	FFEA	￪
￫	FFEB	￫
￬	FFEC	￬
𐰸	10C38	𐰸
𐰹	10C39	𐰹
🠀	1F800	🠀
🠁	1F801	🠁
🠂	1F802	🠂
🠃	1F803	🠃
🠄	1F804	🠄
🠅	1F805	🠅
🠆	1F806	🠆
🠇	1F807	🠇
🠈	1F808	🠈
🠉	1F809	🠉
🠊	1F80A	🠊
🠔	1F814	🠔
🠕	1F815	🠕
🠖	1F816	🠖
🠗	1F817	🠗
🠘	1F818	🠘
🠙	1F819	🠙
🠚	1F81A	🠚
🠛	1F81B	🠛
🠜	1F81C	🠜
🠝	1F81D	🠝
🠞	1F81E	🠞
🠟	1F81F	🠟
🠬	1F82C	🠬
🠭	1F82D	🠭
🠮	1F82E	🠮
🠯	1F82F	🠯
🠰	1F830	🠰
🠱	1F831	🠱
🠲	1F832	🠲
🠳	1F833	🠳
🠴	1F834	🠴
🠵	1F835	🠵
🠶	1F836	🠶
🠷	1F837	🠷
🠸	1F838	🠸
🠹	1F839	🠹
🠺	1F83A	🠺
🠻	1F83B	🠻
🠼	1F83C	🠼
🠽	1F83D	🠽
🠾	1F83E	🠾
🠿	1F83F	🠿
🡀	1F840	🡀
🡁	1F841	🡁
🡂	1F842	🡂
🡃	1F843	🡃
🡄	1F844	🡄
🡅	1F845	🡅
🡆	1F846	🡆
🡇	1F847	🡇
🡐	1F850	🡐
🡑	1F851	🡑
🡒	1F852	🡒
🡓	1F853	🡓
🡔	1F854	🡔
🡕	1F855	🡕
🡖	1F856	🡖
🡗	1F857	🡗
🡘	1F858	🡘
🡙	1F859	🡙
🡠	1F860	🡠
🡡	1F861	🡡
🡢	1F862	🡢
🡣	1F863	🡣
🡤	1F864	🡤
🡥	1F865	🡥
🡦	1F866	🡦
🡧	1F867	🡧
🡨	1F868	🡨
🡩	1F869	🡩
🡪	1F86A	🡪
🡫	1F86B	🡫
🡬	1F86C	🡬
🡭	1F86D	🡭
🡮	1F86E	🡮
🡯	1F86F	🡯
🡰	1F870	🡰
🡱	1F871	🡱
🡲	1F872	🡲
🡳	1F873	🡳
🡴	1F874	🡴
🡵	1F875	🡵
🡶	1F876	🡶
🡷	1F877	🡷
🡸	1F878	🡸
🡹	1F879	🡹
🡺	1F87A	🡺
🡻	1F87B	🡻
🡼	1F87C	🡼
🡽	1F87D	🡽
🡾	1F87E	🡾
🡿	1F87F	🡿
🢀	1F880	🢀
🢁	1F881	🢁
🢂	1F882	🢂
🢃	1F883	🢃
🢄	1F884	🢄
🢅	1F885	🢅
🢆	1F886	🢆
🢇	1F887	🢇
🢘	1F898	🢘
🢙	1F899	🢙
🢚	1F89A	🢚
🢛	1F89B	🢛
🢠	1F8A0	🢠
🢡	1F8A1	🢡
🢢	1F8A2	🢢
🢣	1F8A3	🢣
🢤	1F8A4	🢤
🢥	1F8A5	🢥
🢦	1F8A6	🢦
🢧	1F8A7	🢧
🢨	1F8A8	🢨
🢩	1F8A9	🢩
🢪	1F8AA	🢪
🢫	1F8AB	🢫

HTML и CSS коды.

Музыка.

HTML-код	CSS-код	Вид
♩	2669	♩
♪	266A	♪
♫	266B	♫
♬	266C	♬
♭	266D	♭
♮	266E	♮
♯	266F	♯
𝄞	1D11E	𝄞
𝄟	1D11F	𝄟
𝄠	1D120	𝄠
𝄢	1D122	𝄢
𝄣	1D123	𝄣
𝄤	1D124	𝄤
𝅗𝅥	1D15E	𝅗𝅥
𝅘𝅥	1D15F	𝅘𝅥
𝅘𝅥𝅮	1D160	𝅘𝅥𝅮
𝅘𝅥𝅯	1D161	𝅘𝅥𝅯
𝅘𝅥𝅰	1D162	𝅘𝅥𝅰
𝅘𝅥𝅱	1D163	𝅘𝅥𝅱
𝅘𝅥𝅲	1D164	𝅘𝅥𝅲
𝆔	1D194	𝆔
𝆕	1D195	𝆕
🎜	1F39C	🎜
🎝	1F39D	🎝
🎵	1F3B5	🎵
🎶	1F3B6	🎶
🎷	1F3B7	🎷
🎸	1F3B8	🎸
🎹	1F3B9	🎹
🎺	1F3BA	🎺
🎼	1F3BC	🎼

HTML и CSS коды.

Цифры.

HTML-код	CSS-код	Вид
①	2460	①
②	2461	②
③	2462	③
④	2463	④
⑤	2464	⑤
⑥	2465	⑥
⑦	2466	⑦
⑧	2467	⑧
⑨	2468	⑨
⑩	2469	⑩
⑪	246A	⑪
⑫	246B	⑫
⑬	246C	⑬
⑭	246D	⑭
⑮	246E	⑮
⑯	246F	⑯
⑰	2470	⑰
⑱	2471	⑱
⑲	2472	⑲
⑳	2473	⑳
⒈	2488	⒈
⒉	2489	⒉
⒊	248A	⒊
⒋	248B	⒋
⒌	248C	⒌
⒍	248D	⒍
⒎	248E	⒎
⒏	248F	⒏
⒐	2490	⒐
⒑	2491	⒑
⒒	2492	⒒
⒓	2493	⒓
⒔	2494	⒔
⒕	2495	⒕
⒖	2496	⒖
⒗	2497	⒗
⒘	2498	⒘
⒙	2499	⒙
⒚	249A	⒚
⒛	249B	⒛
⓫	24EB	⓫
⓬	24EC	⓬
⓭	24ED	⓭
⓮	24EE	⓮
⓯	24EF	⓯
⓰	24F0	⓰
⓱	24F1	⓱
⓲	24F2	⓲
⓳	24F3	⓳
⓴	24F4	⓴
⓵	24F5	⓵
⓶	24F6	⓶
⓷	24F7	⓷
⓸	24F8	⓸
⓹	24F9	⓹
⓺	24FA	⓺
⓻	24FB	⓻
⓼	24FC	⓼
⓽	24FD	⓽
⓾	24FE	⓾
⓿	24FF	⓿
❶	2776	❶
❷	2777	❷
❸	2778	❸
❹	2779	❹
❺	277A	❺
❻	277B	❻
❼	277C	❼
❽	277D	❽
❾	277E	❾
❿	277F	❿
➀	2780	➀
➁	2781	➁
➂	2782	➂
➃	2783	➃
➄	2784	➄
➅	2785	➅
➆	2786	➆
➇	2787	➇
➈	2788	➈
➉	2789	➉
➊	278A	➊
➋	278B	➋
➌	278C	➌
➍	278D	➍
➎	278E	➎
➏	278F	➏
➐	2790	➐
➑	2791	➑
➒	2792	➒
➓	2793	➓
㉈	3248	㉈
㉉	3249	㉉
㉊	324A	㉊
㉋	324B	㉋
㉌	324C	㉌
㉍	324D	㉍
㉎	324E	㉎
㉏	324F	㉏
㉑	3251	㉑
㉒	3252	㉒
㉓	3253	㉓
㉔	3254	㉔
㉕	3255	㉕
㉖	3256	㉖
㉗	3257	㉗
㉘	3258	㉘
㉙	3259	㉙
㉚	325A	㉚
㉛	325B	㉛
㉜	325C	㉜
㉝	325D	㉝
㉞	325E	㉞
㉟	325F	㉟
㊱	32B1	㊱
㊲	32B2	㊲
㊳	32B3	㊳
㊴	32B4	㊴
㊵	32B5	㊵
㊶	32B6	㊶
㊷	32B7	㊷
㊸	32B8	㊸
㊹	32B9	㊹
㊺	32BA	㊺
㊻	32BB	㊻
㊼	32BC	㊼
㊽	32BD	㊽
㊾	32BE	㊾
㊿	32BF	㊿

HTML и CSS коды.

Учения, религии, направленя.

HTML-код	CSS-код	Вид
†	2020	†
☤	2624	☤
☥	2625	☥
☦	2626	☦
☩	2629	☩
☪	262A	☪
☭	262D	☭
☯	262F	☯
✞	271E	✞
✟	271F	✟
✠	2720	✠
✡	2721	✡
🕆	1F546	🕆
🕇	1F547	🕇
🕈	1F548	🕈
🕊	1F54A	🕊
🕌	1F54C	🕌
🕍	1F54D	🕍
🕎	1F54E	🕎
🜊	1F70A	🜊
🜋	1F70B	🜋
🟌	1F7CC	🟌
🟍	1F7CD	🟍

HTML и CSS коды.

Погода.

HTML-код	CSS-код	Вид
☀	2600	☀
☁	2601	☁
☂	2602	☂
☼	263C	☼
⛅	26C5	⛅
⛈	26C8	⛈
🌞	1F31E	🌞
🌤	1F324	🌤
🌥	1F325	🌥
🌦	1F326	🌦
🌧	1F327	🌧
🌩	1F329	🌩

HTML и CSS коды. Треугольники.

HTML-код	CSS-код	Вид
ߜ	7DC	ߜ
ߡ	7E1	ߡ
ᐁ	1401	ᐁ
ᐃ	1403	ᐃ
ᐅ	1405	ᐅ
ᐊ	140A	ᐊ
‣	2023	‣
⃤	20E4	⃤
∆	2206	∆
∇	2207	∇
⊿	22BF	⊿
⏴	23F4	⏴
⏵	23F5	⏵
⏶	23F6	⏶
⏷	23F7	⏷
▲	25B2	▲
△	25B3	△
▴	25B4	▴
▵	25B5	▵
▶	25B6	▶
▷	25B7	▷
▸	25B8	▸
▹	25B9	▹
►	25BA	►
▻	25BB	▻
▼	25BC	▼
▽	25BD	▽
▾	25BE	▾
▿	25BF	▿
◀	25C0	◀
◁	25C1	◁
◂	25C2	◂
◃	25C3	◃
◄	25C4	◄
◅	25C5	◅
◢	25E2	◢
◣	25E3	◣
◤	25E4	◤
◥	25E5	◥
◬	25EC	◬
◭	25ED	◭
◮	25EE	◮
◸	25F8	◸
◹	25F9	◹
◺	25FA	◺
◿	25FF	◿
⛛	26DB	⛛
⟁	27C1	⟁
⧨	29E8	⧨
⧩	29E9	⧩
⯅	2BC5	⯅
⯆	2BC6	⯆
⯇	2BC7	⯇
⯈	2BC8	⯈
ⵠ	2D60	ⵠ
𐊅	10285	𐊅
𐰶	10C36	𐰶
𐰷	10C37	𐰷
🔺	1F53A	🔺
🔻	1F53B	🔻
🔼	1F53C	🔼
🔽	1F53D	🔽
🛆	1F6C6	🛆
🜂	1F702	🜂
🜄	1F704	🜄
🞀	1F780	🞀
🞁	1F781	🞁
🞂	1F782	🞂
🞃	1F783	🞃

HTML и CSS коды.

Шахматы, шашки, карты, домино, кости.

HTML-код	CSS-код	Вид
♔	2654	♔
♕	2655	♕
♖	2656	♖
♗	2657	♗
♘	2658	♘
♙	2659	♙
♚	265A	♚
♛	265B	♛
♜	265C	♜
♝	265D	♝
♞	265E	♞
♟	265F	♟
♠	2660	♠
♡	2661	♡
♢	2662	♢
♣	2663	♣
♤	2664	♤
♥	2665	♥
♦	2666	♦
♧	2667	♧
⚀	2680	⚀
⚁	2681	⚁
⚂	2682	⚂
⚃	2683	⚃
⚄	2684	⚄
⚅	2685	⚅
⛀	26C0	⛀
⛂	26C2	⛂
🀱	1F031	🀱
🀲	1F032	🀲
🀳	1F033	🀳
🀴	1F034	🀴
🀵	1F035	🀵
🀶	1F036	🀶
🀷	1F037	🀷
🀸	1F038	🀸
🀹	1F039	🀹
🀺	1F03A	🀺
🀻	1F03B	🀻
🀼	1F03C	🀼
🀽	1F03D	🀽
🀾	1F03E	🀾
🀿	1F03F	🀿
🁀	1F040	🁀
🁁	1F041	🁁
🁂	1F042	🁂
🁃	1F043	🁃
🁄	1F044	🁄
🁅	1F045	🁅
🁆	1F046	🁆
🁇	1F047	🁇
🁈	1F048	🁈
🁉	1F049	🁉
🁊	1F04A	🁊
🁋	1F04B	🁋
🁌	1F04C	🁌
🁍	1F04D	🁍
🁎	1F04E	🁎
🁏	1F04F	🁏
🁐	1F050	🁐
🁑	1F051	🁑
🁒	1F052	🁒
🁓	1F053	🁓
🁔	1F054	🁔
🁕	1F055	🁕
🁖	1F056	🁖
🁗	1F057	🁗
🁘	1F058	🁘
🁙	1F059	🁙
🁚	1F05A	🁚
🁛	1F05B	🁛
🁜	1F05C	🁜
🁝	1F05D	🁝
🁞	1F05E	🁞
🁟	1F05F	🁟
🁠	1F060	🁠
🁡	1F061	🁡
🁣	1F063	🁣
🁤	1F064	🁤
🁥	1F065	🁥
🁦	1F066	🁦
🁧	1F067	🁧
🁨	1F068	🁨
🁩	1F069	🁩
🁪	1F06A	🁪
🁫	1F06B	🁫
🁬	1F06C	🁬
🁭	1F06D	🁭
🁮	1F06E	🁮
🁯	1F06F	🁯
🁰	1F070	🁰
🁱	1F071	🁱
🁲	1F072	🁲
🁳	1F073	🁳
🁴	1F074	🁴
🁵	1F075	🁵
🁶	1F076	🁶
🁷	1F077	🁷
🁸	1F078	🁸
🁹	1F079	🁹
🁺	1F07A	🁺
🁻	1F07B	🁻
🁼	1F07C	🁼
🁽	1F07D	🁽
🁾	1F07E	🁾
🁿	1F07F	🁿
🂀	1F080	🂀
🂁	1F081	🂁
🂂	1F082	🂂
🂃	1F083	🂃
🂄	1F084	🂄
🂅	1F085	🂅
🂆	1F086	🂆
🂇	1F087	🂇
🂈	1F088	🂈
🂉	1F089	🂉
🂊	1F08A	🂊
🂋	1F08B	🂋
🂌	1F08C	🂌
🂍	1F08D	🂍
🂎	1F08E	🂎
🂏	1F08F	🂏
🂐	1F090	🂐
🂑	1F091	🂑
🂒	1F092	🂒
🂓	1F093	🂓
🂡	1F0A1	🂡
🂢	1F0A2	🂢
🂣	1F0A3	🂣
🂤	1F0A4	🂤
🂥	1F0A5	🂥
🂦	1F0A6	🂦
🂧	1F0A7	🂧
🂨	1F0A8	🂨
🂩	1F0A9	🂩
🂪	1F0AA	🂪
🂱	1F0B1	🂱
🂲	1F0B2	🂲
🂳	1F0B3	🂳
🂴	1F0B4	🂴
🂵	1F0B5	🂵
🂶	1F0B6	🂶
🂷	1F0B7	🂷
🂸	1F0B8	🂸
🂹	1F0B9	🂹
🂺	1F0BA	🂺
🃁	1F0C1	🃁
🃂	1F0C2	🃂
🃃	1F0C3	🃃
🃄	1F0C4	🃄
🃅	1F0C5	🃅
🃆	1F0C6	🃆
🃇	1F0C7	🃇
🃈	1F0C8	🃈
🃉	1F0C9	🃉
🃊	1F0CA	🃊
🃏	1F0CF	🃏
🃑	1F0D1	🃑
🃒	1F0D2	🃒
🃓	1F0D3	🃓
🃔	1F0D4	🃔
🃕	1F0D5	🃕
🃖	1F0D6	🃖
🃗	1F0D7	🃗
🃘	1F0D8	🃘
🃙	1F0D9	🃙
🃚	1F0DA	🃚

HTML и CSS коды.

Общеизвестные символы.

HTML-код	CSS-код	Вид
℃	2103	℃
⏚	23DA	⏚
☎	260E	☎
☏	260F	☏
☑	2611	☑
☠	2620	☠
☢	2622	☢
☣	2623	☣
☸	2638	☸
♀	2640	♀
♂	2642	♂
♻	267B	♻
♿	267F	♿
⚒	2692	⚒
⚔	2694	⚔
⚖	2696	⚖
⚛	269B	⚛
⛏	26CF	⛏
⛔	26D4	⛔
⛪	26EA	⛪
❌	274C	❌
🆏	1F18F	🆏
🆒	1F192	🆒
🆓	1F193	🆓
🆕	1F195	🆕
🆗	1F197	🆗
🌈	1F308	🌈
🌍	1F30D	🌍
🌎	1F30E	🌎
🌏	1F30F	🌏
🌐	1F310	🌐
🍹	1F379	🍹
🍺	1F37A	🍺
🍿	1F37F	🍿
🎓	1F393	🎓
🎤	1F3A4	🎤
🎦	1F3A6	🎦
🎧	1F3A7	🎧
🎪	1F3AA	🎪
🎬	1F3AC	🎬
🎭	1F3AD	🎭
🎲	1F3B2	🎲
💀	1F480	💀
💎	1F48E	💎
💬	1F4AC	💬
💵	1F4B5	💵
💶	1F4B6	💶
💾	1F4BE	💾
📆	1F4C6	📆
📈	1F4C8	📈
📉	1F4C9	📉
📊	1F4CA	📊
📌	1F4CC	📌
📕	1F4D5	📕
📖	1F4D6	📖
📜	1F4DC	📜
📝	1F4DD	📝
📞	1F4DE	📞
📧	1F4E7	📧
🔀	1F500	🔀
🔁	1F501	🔁
🔂	1F502	🔂
🔃	1F503	🔃
🔄	1F504	🔄
🔇	1F507	🔇
🔈	1F508	🔈
🔉	1F509	🔉
🔊	1F50A	🔊
🔋	1F50B	🔋
🔍	1F50D	🔍
🔎	1F50E	🔎
🔏	1F50F	🔏
🔑	1F511	🔑
🔒	1F512	🔒
🔓	1F513	🔓
🔔	1F514	🔔
🔕	1F515	🔕
🔙	1F519	🔙
🔚	1F51A	🔚
🔛	1F51B	🔛
🔜	1F51C	🔜
🔝	1F51D	🔝
🔞	1F51E	🔞
🔦	1F526	🔦
🔧	1F527	🔧
🔨	1F528	🔨
🔪	1F52A	🔪
🕨	1F568	🕨
🕩	1F569	🕩
🕪	1F56A	🕪
🕮	1F56E	🕮
🕯	1F56F	🕯
🕸	1F578	🕸
🕾	1F57E	🕾
🕿	1F57F	🕿
🖀	1F580	🖀
🖂	1F582	🖂
🖃	1F583	🖃
🗀	1F5C0	🗀
🗁	1F5C1	🗁
🗊	1F5CA	🗊
🗋	1F5CB	🗋
🗍	1F5CD	🗍
🗐	1F5D0	🗐
🗑	1F5D1	🗑
🚭	1F6AD	🚭
🚮	1F6AE	🚮
🛒	1F6D2	🛒
🛠	1F6E0	🛠
🧲	1F9F2	🧲
🧵	1F9F5	🧵
🧹	1F9F9	🧹
🧻	1F9FB	🧻

HTML и CSS коды.

Время.

HTML-код	CSS-код	Вид
⌚	231A	⌚
⌛	231B	⌛
⏰	23F0	⏰
⏱	23F1	⏱
⏲	23F2	⏲
⏳	23F3	⏳
🕐	1F550	🕐
🕑	1F551	🕑
🕒	1F552	🕒
🕓	1F553	🕓
🕔	1F554	🕔
🕕	1F555	🕕
🕖	1F556	🕖
🕗	1F557	🕗
🕘	1F558	🕘
🕙	1F559	🕙
🕚	1F55A	🕚
🕛	1F55B	🕛
🕜	1F55C	🕜
🕝	1F55D	🕝
🕞	1F55E	🕞
🕟	1F55F	🕟
🕠	1F560	🕠
🕡	1F561	🕡
🕢	1F562	🕢
🕣	1F563	🕣
🕤	1F564	🕤
🕥	1F565	🕥
🕦	1F566	🕦
🕧	1F567	🕧

HTML и CSS коды.

Спорт.

HTML-код	CSS-код	Вид
⚽	26BD	⚽
⚾	26BE	⚾
🎾	1F3BE	🎾
🎾	1F3BE	🎾
🏀	1F3C0	🏀
🏃	1F3C3	🏃
🏅	1F3C5	🏅
🏆	1F3C6	🏆
🏈	1F3C8	🏈
🏉	1F3C9	🏉
🏊	1F3CA	🏊
🏋	1F3CB	🏋
🏐	1F3D0	🏐
🏑	1F3D1	🏑
🏒	1F3D2	🏒
🏓	1F3D3	🏓
🏸	1F3F8	🏸

HTML и CSS коды.

Квадраты.

HTML-код	CSS-код	Вид
⃞	20DE	⃞
⃟	20DF	⃟
⃟	20DF	⃟
⊞	229E	⊞
⊟	229F	⊟
⊠	22A0	⊠
⊡	22A1	⊡
⋄	22C4	⋄
⏹	23F9	⏹
▄	2584	▄
▖	2596	▖
▗	2597	▗
▘	2598	▘
■	25A0	■
□	25A1	□
▣	25A3	▣
▤	25A4	▤
▥	25A5	▥
▦	25A6	▦
▧	25A7	▧
▨	25A8	▨
▩	25A9	▩
▪	25AA	▪
▫	25AB	▫
◇	25C7	◇
◈	25C8	◈
◘	25D8	◘
◙	25D9	◙
◧	25E7	◧
◨	25E8	◨
◩	25E9	◩
◪	25EA	◪
◫	25EB	◫
◰	25F0	◰
◱	25F1	◱
◲	25F2	◲
◳	25F3	◳
◻	25FB	◻
◼	25FC	◼
◽	25FD	◽
◾	25FE	◾
☐	2610	☐
☑	2611	☑
☒	2612	☒
⛋	26CB	⛋
⛝	26DD	⛝
⛞	26DE	⛞
❏	274F	❏
❐	2750	❐
❑	2751	❑
❒	2752	❒
⧄	29C4	⧄
⧅	29C5	⧅
⧆	29C6	⧆
⧇	29C7	⧇
⧈	29C8	⧈
⧉	29C9	⧉
⧠	29E0	⧠
⬒	2B12	⬒
⬓	2B13	⬓
⬔	2B14	⬔
⬕	2B15	⬕
⬖	2B16	⬖
⬗	2B17	⬗
⬘	2B18	⬘
⬙	2B19	⬙
⬚	2B1A	⬚
⬛	2B1B	⬛
⬜	2B1C	⬜
⬞	2B1E	⬞
⬥	2B25	⬥
⬦	2B26	⬦
⬩	2B29	⬩
⮽	2BBD	⮽
⯀	2BC0	⯀
⯁	2BC1	⯁
⿰	2FF0	⿰
⿱	2FF1	⿱
⿲	2FF2	⿲
⿳	2FF3	⿳
⿴	2FF4	⿴
⿵	2FF5	⿵
⿶	2FF6	⿶
⿷	2FF7	⿷
⿸	2FF8	⿸
⿹	2FF9	⿹
⿺	2FFA	⿺
⿻	2FFB	⿻
〼	303C	〼
￭	FFED	￭
𝅆	1D146	𝅆
𝅇	1D147	𝅇
🔲	1F532	🔲
🔳	1F533	🔳
🔶	1F536	🔶
🔷	1F537	🔷
🔸	1F538	🔸
🔹	1F539	🔹
🞑	1F791	🞑
🞒	1F792	🞒
🞓	1F793	🞓
🞔	1F794	🞔
🞕	1F795	🞕
🞖	1F796	🞖
🞚	1F79A	🞚
🞛	1F79B	🞛
🞜	1F79C	🞜

HTML и CSS коды.

Круги.

HTML-код	CSS-код	Вид
০	9E6	০
੦	A66	੦
๐	E50	๐
໐	ED0	໐
ဝ	101D	ဝ
ᐤ	1424	ᐤ
⃘	20D8	⃘
⃝	20DD	⃝
⊕	2295	⊕
⊖	2296	⊖
⊗	2297	⊗
⊘	2298	⊘
⊙	2299	⊙
⊚	229A	⊚
⊛	229B	⊛
⊜	229C	⊜
⊝	229D	⊝
⏺	23FA	⏺
◉	25C9	◉
○	25CB	○
◍	25CD	◍
◎	25CE	◎
●	25CF	●
◐	25D0	◐
◑	25D1	◑
◒	25D2	◒
◓	25D3	◓
◔	25D4	◔
◕	25D5	◕
◯	25EF	◯
◴	25F4	◴
◵	25F5	◵
◶	25F6	◶
◷	25F7	◷
⚪	26AA	⚪
⚫	26AB	⚫
⚬	26AC	⚬
❍	274D	❍
⦿	29BF	⦿
⧀	29C0	⧀
⧁	29C1	⧁
⨀	2A00	⨀
⨁	2A01	⨁
⨂	2A02	⨂
⨷	2A37	⨷
⨸	2A38	⨸
⬤	2B24	⬤
⭕	2B55	⭕
⭗	2B57	⭗
⭘	2B58	⭘
⭙	2B59	⭙
⮾	2BBE	⮾
⮿	2BBF	⮿
ⵔ	2D54	ⵔ
ⵙ	2D59	ⵙ
〇	3007	〇
〪	302A	〪
㊀	3280	㊀
￮	FFEE	￮
𒊹	122B9	𒊹
𝇇	1D1C7	𝇇
𝇈	1D1C8	𝇈
🔴	1F534	🔴
🔵	1F535	🔵
🔾	1F53E	🔾
🔿	1F53F	🔿
🞅	1F785	🞅
🞇	1F787	🞇
🞉	1F789	🞉
🧿	1F9FF	🧿

HTML и CSS коды.

Руки.

HTML-код	CSS-код	Вид
☚	261A	☚
☛	261B	☛
☜	261C	☜
☝	261D	☝
☞	261E	☞
☟	261F	☟
✊	270A	✊
✋	270B	✋
✌	270C	✌
👆	1F446	👆
👇	1F447	👇
👈	1F448	👈
👉	1F449	👉
👉	1F449	👉
👍	1F44D	👍
👎	1F44E	👎
🖏	1F58F	🖏
🖐	1F590	🖐
🖑	1F591	🖑
🖒	1F592	🖒
🖓	1F593	🖓
🖔	1F594	🖔
🖕	1F595	🖕
🖖	1F596	🖖
🖗	1F597	🖗
🖘	1F598	🖘
🖙	1F599	🖙
🖚	1F59A	🖚
🖛	1F59B	🖛
🖜	1F59C	🖜
🖝	1F59D	🖝
🖞	1F59E	🖞
🖟	1F59F	🖟
🖠	1F5A0	🖠
🖡	1F5A1	🖡
🖢	1F5A2	🖢
🖣	1F5A3	🖣
🤘	1F918	🤘
🤙	1F919	🤙
🤚	1F91A	🤚
🤛	1F91B	🤛
🤜	1F91C	🤜
🤝	1F91D	🤝
🤞	1F91E	🤞
🤟	1F91F	🤟

HTML и CSS
корректный

Circled Numbers — Номер символы

Circled Numbers

Symbol

HTML Code

HTML Entity

CSS CODE

HEX CODE

HOUNICODE

Описание

①

9001 HTMODE

Описание

①

9001 HTMODE

㊿

ОБЪЕКТ

КОД CSS

\32BF

Шестнадцатеричный код

㊿

UNICODE

U+032BF

число пятьдесят в кружке

Ссылки

Консорциум Unicode
Список символов Юникода
База данных Юникод — UnicodeData

Циркулярные изображения с помощью CSS — WebFX

В этом руководстве мы рассмотрим некоторые приемы CSS для рендеринга кругового изображения элемента. Основное свойство CSS, отвечающее за эффект, — border-radius . Хотя применить эффект к квадратным изображениям довольно просто, прямоугольные изображения потребуют немного больше дополнительной работы.

Посмотреть демо Скачать исходный код

Квадратные изображения

Для идеально квадратного элемента img требуется всего одна строка CSS. Этот метод лучше всего работает с квадратными изображениями. HTML

CSS

 .circular--square {  border-radius: 50%;  }

Приведенное выше правило стиля является сокращением:

 .circular--square { border-top-left-radius: 50% 50%; граница-верхний-правый-радиус: 50% 50%; граница-нижний-правый-радиус: 50% 50%; граница-нижний-левый-радиус: 50% 50%; }

Установив для всех свойств border-radius значение 50% от ширины/высоты квадратного элемента img , мы в конечном итоге сформируем img элемента в круг:

Прямоугольные изображения

Прямоугольные изображения немного сложнее. Чтобы визуализировать круг, изображение должно начинаться как квадрат. Чтобы обойти эту проблему, мы можем обернуть элемент img в квадратный элемент div .

Затем мы «вырезаем» те части элемента img , которые выходят за пределы квадратной оболочки div . Мы можем выполнить это, установив для свойства overflow оболочки div значение 9.1231 скрытый . Так что объект фотографии с меньшей вероятностью будет обрезан, мы также должны относиться к пейзажным фотографиям (которые представляют собой горизонтально ориентированные прямоугольники) иначе, чем к портретным фотографиям (которые представляют собой вертикально ориентированные прямоугольники).

Изображения, ориентированные на ландшафт

HTML

9000 43434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343434343. 1243. ландшафт { дисплей: встроенный блок; положение: родственник; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } .circular—альбомное изображение { ширина: авто; высота: 100%; поле слева: -50px; }
Значения свойств width и height должны быть одинаковыми , чтобы оболочка div ( .circular--landscape ) отображалась как квадрат. Кроме того, значения свойств width и height должны быть меньше или равны height img . Это гарантирует, что элемент img сможет занять оболочку div , не растягиваясь.
Как правило, объект пейзажных фотографий — но не всегда — располагается около центр композиции. Чтобы дать нам больше шансов не обрезать объект фотографии, мы можем горизонтально отцентрировать элемент img в обертке div , подтолкнув элемент img влево, чтобы компенсировать смещение кадрирования влево. Величина, на которую мы сдвигаем элемент img , равна 25% ширины / высоты обертки div .
В этом случае мы сдвинем изображение на 50 пикселей (25% от 200 пикселей составляет 50 пикселей) влево. Мы можем добиться этого, установив margin-left свойство элемента img в отрицательное значение:
margin-left: -50px;
Предположение о том, что объект фотографии будет находиться близко к центру композиции, не всегда будет верным . Лучше всего помнить об этом предположении, когда вы выбираете (или редактируете) изображения для этой техники.
Портретно-ориентированные изображения
HTML

CSS
.circular--portrait { position: relative; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } . circular--портретное изображение { ширина: 100%; высота: авто; }
Предположение, которое мы сделаем для портретно-ориентированных изображений, состоит в том, что объект фотографии находится в центре верхней части композиции. Опять же, это не будет иметь место на каждой портретной фотографии. Подобно пейзажным фотографиям, обертка div портретной ориентации 9Элементы 1231 img должны иметь одинаковые значения свойств width и height , чтобы обертка была идеальным квадратом.
На этот раз значение свойства width / height должно быть меньше или равно width элемента img , чтобы изображение могло покрыть оболочку div , не растягиваясь. Для изображений с портретной ориентацией мы назначаем высоту auto и ширину 100%. (Мы сделали обратное для изображений с альбомной ориентацией.) Нам не нужно перемещать элемент img , потому что мы ожидаем, что объект фотографии находится в центре верхней части композиции.
Резюме
Эту технику лучше всего использовать на квадратных элементах img , когда объект находится в центре фотографии. Но мы живем не в идеальном мире, поэтому при необходимости можно использовать обертку div для прямоугольного img элемента. Основным свойством CSS, отвечающим за круглую форму, является свойство border-radius .
Если радиус углов равен 50% от ширины/высоты, получается круг.
Чтобы регулярно получать советы по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более 200 000 других маркетологов:
Revenue Weekly.
Зарегистрируйтесь сегодня
Связанный контент
Адаптивное полное фоновое изображение с использованием CSS Как создавать призрачные кнопки CSS Создание адаптивных изображений с помощью CSS
Джейкоб Губе — основатель Six Revisions. Он фронтенд-разработчик. Свяжитесь с ним в Твиттере.
Как нарисовать круг, используя свойство CSS Border Radius
Блог Hubspot
HubSpot.com
Загрузка
О нет! Мы не смогли найти ничего подобного.
Попробуйте еще раз поискать, и мы постараемся.
Анна Фицджеральд
Обновлено: 20 апреля 2022 г.
Опубликовано: 04 июня 2021 г.
Просматривая несколько ваших любимых веб-сайтов, что вы замечаете в первую очередь? Возможно, сначала изображения, а затем цвета и типографика. Как насчет форм?
Формы повсюду в веб-дизайне. Квадраты и прямоугольники являются наиболее распространенными, потому что они максимизируют пространство на прямоугольных устройствах, на которых они отображаются (рабочие столы, планшеты, мобильные устройства и даже смарт-образцы). Но если вы хотите, чтобы ваш сайт выделялся и привлекал внимание посетителей, вы можете попробовать использовать круги. Вот смехотворно крутой пример кругового дизайна:
Источник изображения
Теперь, когда мы понимаем некоторые преимущества включения кругов в дизайн вашего веб-сайта, давайте рассмотрим, как создать круг, круговой контейнер div и овал с помощью CSS.
Как сделать идеальный круг с радиусом границы в CSS
Добавьте элемент HTML.
Назначьте ему одинаковую ширину и высоту.
Задайте для свойства CSS border-radius значение 50%.
Шаг 1. Добавьте элемент HTML.
Допустим, вы хотите превратить изображение в идеальный круг. В этом случае вы должны добавить элемент изображения с атрибутами alt и source в HTML.
Вот пример:

2.1&auto=format&fit=crop&w=1500&q=80" alt="distressed Italian wall in pink и оттенки серого">

Шаг 2: Назначьте ему одинаковую ширину и высоту.
Чтобы превратить элемент в идеальный круг, он должен иметь фиксированную и одинаковую ширину и высоту. Поэтому установите для ширины и высоты одно и то же значение в CSS.
Шаг 3: Установите для свойства CSS border-radius значение 50%.
Свойство border-radius можно использовать для создания прямоугольников с закругленными краями, эллипсов и других форм, включая идеальный круг. Чтобы создать идеальный круг, укажите для свойства border-radius значение 50%.
Вот CSS и результат:
См. Pen Ellipsis Кристины Перриконе (@hubspot) на CodePen.
Как создать круглый элемент Div с помощью CSS Border-Radius
Чтобы создать круглый элемент в CSS, выполните те же действия, что и выше. Добавьте div в HTML. Затем установите ширину и высоту элемента на одно и то же значение. Наконец, укажите значение свойства border-radius на 50%.
Вот пример:
См. Pen Как создать круг Div с помощью CSS Border-Radius от Кристины Перриконе (@hubspot) на CodePen.
Обратите внимание, что я сделал div контейнером flex, чтобы я мог поместить текст внутри div и центрировать его, используя свойства align-items и justify-content.
Чтобы узнать больше об этом процессе, ознакомьтесь с 11 способами центрирования Div или текста в Div в CSS.
Как сделать овал с радиусом границы в CSS
Процесс создания овала почти идентичен созданию идеального круга. Вы добавляете элемент HTML. Но вместо того, чтобы назначать ему одинаковую ширину и высоту, установите их разными. Затем установите для свойства CSS border-radius значение 50%. В результате получится овал.
Вот пример:
См. Pen Как сделать овал с радиусом границы в CSS от Кристины Перриконе (@hubspot) на CodePen.
Рисование кругов в CSS
Создание и добавление кругов на ваш веб-сайт или в приложение поможет привлечь внимание посетителей и улучшит ваш дизайн. Лучшая часть? Круги легко создавать с помощью свойства CSS border-radius. Вам просто нужно знать основы HTML и CSS, чтобы создать эту уникальную форму.
Темы: Начальная загрузка и CSS
Не забудьте поделиться этим постом!
Связанные статьи
com/website/best-html-css-editor»>
14 лучших редакторов кода HTML и CSS на 2022 год
31 августа 2022 г.
Базовое пошаговое руководство по блочной модели CSS
31 августа 2022 г.
Как использовать область просмотра CSS
29 августа, 2022 г.
Как центрировать текст и заголовки в CSS с помощью свойства Text-Align
24 августа 2022 г.
Что такое рем? (и как их использовать в CSS)
23 августа 2022 г.
Свойство CSS Position: все, что вам нужно знать
17 августа 2022 г.
Вот разница между Flexbox, CSS Grid и Bootstrap
16 августа 2022 г.
hubspot.com/website/center-div-css»>
11 способов центрировать Div или текст в Div в CSS
09 августа 2022 г.
Что такое файл нормализованного CSS и как его использовать?
01 августа 2022 г.
hubspot.com/website/tailwind-css-vs-bootstrap»>
TailWind CSS против Bootstrap: в чем разница и какой из них лучше?
01 августа 2022 г.
кругов CSS — Cloud Four
Я постоянный эксперт Облака Четыре по кругам.
Не планировал. Некоторое время назад мы работали над проектом, в котором было много кругов… круглые контейнеры, круглые миниатюры, круглые кнопки. Прежде чем я это понял, я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.
Но открою вам секрет: знать не так уж и много. К концу этой статьи у меня есть ощущение, что вы тоже станете экспертом.
Существует несколько методов определения динамических круглых фигур в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот несколько, с которыми я экспериментировал чаще всего, от самых распространенных до наименее.
Самый распространенный способ — скруглить все углы на 50% . Это самый простой способ применения, и он очень широко поддерживается. Свойство border-radius также повлияет на границы, тени и целевой размер касания/щелчка элемента.
Если вы хотите, чтобы круг растянулся до формы пилюли, установите border-radius на половину высоты элемента вместо 50% . Если высота неизвестна, выберите произвольно большое значение (например, 99номер ).
SVG могут включать элемент , стиль которого может быть аналогичен любому другому пути. Они очень хорошо поддерживаются и эффективны для анимации, но требуют большей разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина его ширины обводки, если есть) немного меньше, чем viewBox SVG .
Пути обрезки — это новый метод. Поддержка приличная, но менее постоянная. Пути обрезки не влияют на макет элемента, что означает, что они не повлияют на границы и, скорее всего, скроют внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.
Мы можем использовать фоновое изображение и радиальный градиент , чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его макет (включая целевой размер касания/щелчка) не изменится. Это мой наименее любимый метод, потому что края круга могут казаться зубчатыми или нечеткими в зависимости от браузера, но он может хорошо подходить для тонких фоновых акцентов.
Можно использовать практически любую технику центрирования с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит немного смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему особенно заметной.
Сравнение способов центрирования элементов разного размера в Safari. Обратите внимание, что некоторые методы имеют более заметное дрожание положения значка относительно его контейнера.
Это связано с тем, как браузеры вычисляют субпиксели. Каждый раз, когда мы используем относительные единицы, единицы области просмотра или значения из модульной шкалы, скорее всего, мы просим браузер вычислить дробные значения, такие как 22.78125px . Когда-то эта проблема нарушала наши сети или вызывала другие фундаментальные проблемы. В наши дни браузеры очень стараются варьировать свои вычисления в зависимости от элемента, свойства и контекста, но это не идеально.
По моему опыту, самый устойчивый и гибкий метод центрирования использует комбинацию абсолютного позиционирования (для установки центральной точки на основе макета родительского элемента) и преобразования (для размещения дочернего элемента с более нечеткой математикой):
Центрирование это хорошо и все такое, но что, если мы хотим, чтобы изображения заполнили круг?
Мы можем обрезать элемент в круг, используя border-radius :
Однако у этого есть некоторые ограничения:
Элемент не отвечает своему контейнеру.
Мы не можем применять какие-либо внутренние тени, чтобы сместить изображение от фона (кроме самого изображения).
Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.
Вот более сложный пример. Он использует элемент-оболочку для установки поля соотношения сторон для оперативного сохранения квадратных пропорций, он улучшает обработку неквадратных изображений с помощью @supports , и он применяет прозрачную внутреннюю тень, чтобы сместить изображение от фона:
Мы можем сделать то же самое, используя SVG:
Но поскольку элементы SVG image не поддерживают размеры srcset или , это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.
Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить некоторые просачивающиеся субпиксельные артефакты:
Фрагмент высококонтрастного круга со светлыми пикселями вдоль края, где фон непреднамеренно выходит за пределы внутренней границы.
К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от метода, используемого для рисования границы или отображения изображения, и в той или иной степени это происходит в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, сообщите мне об этом в комментариях!
Текст! Это основа сети. Он копает прямоугольники и разбивается на новые строки. Что мы можем с этим поделать?
Вы можете сделать так, чтобы внешний текст обтекал плавающую круглую фигуру, используя свойство shape-outside :
Стоп! Это наверное плохая идея! Откликнуться практически невозможно! Просто подождите, пока у нас не появится свойство форма-внутри !
Не убеждены? Ладно, хорошо, Джонатан Скит приготовил для нас хитрый лайфхак. Он использует псевдоэлементы, чтобы установить shape-outside по обе стороны от текстового содержимого:
Мы можем установить текст на кривую траекторию с помощью SVG и :
К сожалению, не поддерживается для во всех браузерах, но преобразование в не слишком сложно.
Вы сделали это! Вы нашли слишком длинную статью на действительно скучную тему, прошли через минные поля вложенных заголовков и повторяющихся демонстраций и вышли победителем с обременительным знанием кругов как вашей единственной наградой! Иди вперед, бесстрашный читатель, и побеждай всех бескрайних зверей впереди. Ты можешь это сделать! Я верю в тебя! 🙌
20 круговых меню CSS
Коллекция бесплатных примеров кода кругового меню HTML и CSS из codepen и других ресурсов. Обновление коллекции апреля 2019 года. 6 новых предметов.
Меню CSS
Раскрывающиеся меню CSS
Мобильные меню CSS
Меню боковой панели CSS
Горизонтальные меню CSS
Полноэкранные меню CSS
Скользящие меню CSS
Переключаемые меню CSS
CSS Off-Canvas меню
О коде
Круговые ссылки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Круговое меню
Использование радиуса границы и обтравочных контуров для создания круглого веерообразного меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Круговое меню
Красивое круговое меню на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Круговое меню
Круговое меню на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Круговое меню
Круговое меню на чистом HTML и CSS. 0 JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Концепция навигации по кольцам
Звенья абсолютно расположены друг над другом, образуя несколько колец.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Навигация по круговому меню
Навигация по круговому меню на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Всплывающее меню красочного цветка
Это цветочное всплывающее меню, вдохновленное мобильными устройствами, представляет собой красочный забавный проект, над которым я экспериментирую. Не стесняйтесь использовать его, как вам нравится.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: font-awesome.css
О коде
Круговая панель навигации
Вдохновленный Google Material Design и Circles.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Радиальное 3D-меню на чистом CSS
Супер действие радиального меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Круговое меню
Круговое меню/навигация, гамбургер, Материал.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Круговое меню
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Меню круга на чистом CSS
Круговое меню с переключателем, созданное только с помощью CSS. Вы можете настроить размер меню, количество элементов, цвет переключателя и значков ссылок.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Радиальное меню CSS
Наведите курсор на гамбургер, чтобы развернуть круговое меню. Только CSS с переходами и трансформами. Система радиального меню реагирует в соответствии с высотой/шириной области просмотра.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Круговое меню
Круговое меню на чистом CSS. Наведите, чтобы показать меню!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Липкое меню CSS
Gooey меню с фильтрами CSS и SVG.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Анимированное круговое/круглое меню
Круговое меню, созданное с помощью CSS3 и JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome. css
О коде
Круговое меню ссылок
Отзывчивое меню круговых ссылок.
О коде
Круговая навигация с CSS
Учебник о том, как создать круговую навигацию с помощью преобразований CSS.
О коде
Меню «Spin-Out» на чистом CSS
Наведите курсор на меню, и все его пункты вспыхнут!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
CSS Half Circle
Каскадная таблица стилей играет важную роль в разработке и добавлении эффектов к содержимому HTML. Наряду с тегами HTML, CSS является важным тегом для создания любой веб-страницы, статической или динамической. Более того, все пользовательские веб-сайты, которые мы видим в Интернете, разработаны с использованием HTML и его строительных блоков CSS. Этот стиль может быть разных типов: встроенный, внутренний или внешний. Но в этой статье мы будем следить за внутренним стилем. Будет создан полукруг, который будет оформлен в соответствии с фрагментом HTML и тегами CSS. Пользователь должен знать основы открывающих и закрывающих тегов HTML, а также объявления CSS по классам и идентификаторам. При этом становится легче понять создание круга.
Реализация полукруга
Простая реализация последовательности тегов HTML и CSS применяется вместе со свойством CSS border-radius. Откройте текстовый редактор и используйте следующий код, чтобы нарисовать полукруг на веб-странице. Для реализации полукруга в HTML и CSS мы использовали внутренний CSS, объявленный внутри тега с открывающим и закрывающим тегами

Css цифра в круге: css circle — цифры в круге на css3

html — Увеличение кругов на CSS3

① — Цифра один в круге: U+2460

U+2460

Нажмите, чтобы скопировать и вставить символ

Техническая информация

Значение символа

Свойства

Похожие символы

Кодировка

Цифры в кружочках символы HTML ❶ ③ ❺ ⑦ ❾

Все Символы | Знаки | Коды | HTML

Как сделать круги с помощью CSS3

Важные моменты

Круг с текстом внутри

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

100+ Юникод символов, которые можно использовать в HTML/CSS/JS/PHP

Как использовать Unicode символы

Иконки

Стрелки

Кавычки

Специальные

Валюта

Погода

Указатели

Фракции

Римские цифры

Математика

Карты

Шахматы

Дерево папок

Всегда показвать иконки как текст

Интересные видео

Полезные знаки и символы.

Полезные знаки и символы

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды. Транспорт.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды. Треугольники.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

HTML и CSS коды.

Circled Numbers — Номер символы

Circled Numbers

СУЩНОСТЬ

КОД CSS

ШЕСТНАДЦАТЕРИЧНЫЙ КОД

UNICODE

КОД HTML

СУЩНОСТЬ

КОД CSS

ШЕСТНАДЦАТЕРИЧНЫЙ КОД

UNICODE

КОД HTML

СУЩНОСТЬ

КОД CSS

ШЕСТНАДЦАТЕРИЧНЫЙ КОД

UNICODE

КОД HTML

СУЩНОСТЬ

КОД CSS