slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 30637
Теги: html, special, unicode, :before, :after, content

В этой статье содержиться перечень всех кодов специальных символов. А так же инструкции о том, как использовать эти символы в HTML или CSS.

Инструкция для HTML

Для вставки спец-символов в HTML код вы можете использовать любое из значений столбиков "Обозначение", "10-ный код" или "16-ный код"

Пример добавления специальных символов

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
</head>
<body>
	&#x21D2;&#x21D2;&#x21D2;&#x21D2;&#x21D2;  <!-- Шестнадцатиричный код -->
	&#8659;&#8659;&#8659;&#8659;&#8659;  <!-- Десятичный код -->
	&hArr;&hArr;&hArr;&hArr;&hArr;  <!-- Обозначение -->
</body>
</html>

 Вот как это будет выглядеть на странице:

⇒⇒⇒⇒⇒ ⇓⇓⇓⇓⇓ ⇔⇔⇔⇔⇔

Инструкция для CSS

Для вставки специальных символов через CSS код можно использовать только 16-ный код и не в том виде, что он дан в таблице.

Каждый 16-ный символ в таблице кодируется так - &#x"Шестнадцитиричный код";

Если вы хотите добавить символ, то вам нужно скоппировать этот "Шестнадцитиричный код", поставить перед ним вот такой слеш \ и добавить его при помощи свойства content.

Чаше всего так же для использования свойства content применяют псевдоклассы :before или :after.

Пример добавления спец-символа через CSS:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<p>Стрелка вправо</p>
</body>
</html>
	p:after {
		content: '\8594';
	}

Вот как это будет выглядеть на странице:

Стрелка вправо

Таблица с кодами специальных символов

Описание символаОбозначение10-ный код16-ный кодВид
неразрывный пробел &nbsp; &#160; &#xA0;  
перевернутый восклицательный знак &iexcl; &#161; &#xA1; ¡
цент &cent; &#162; &#xA2; ¢
фунт стерлингов &pound; &#163; &#xA3; £
знак денежной единицы &curren; &#164; &#xA4; ¤
йена &yen; &#165; &#xA5; ¥
вертикальная черта &brvbar; &#166; &#xA6; ¦
параграф &sect; &#167; &#xA7; §
диереза &uml; &#168; &#xA8; ¨
знак авторского права &copy; &#169; &#xA9; ©
показатель женского рода &ordf; &#170; &#xAA; ª
открывающая двойная угловая кавычка &laquo; &#171; &#xAB; «
знак отрицания &not; &#172; &#xAC; ¬
мягкий перенос &shy; &#173; &#xAD;  
охраняемый знак &reg; &#174; &#xAE; ®
надчеркивание &macr; &#175; &#xAF; ¯
градус &deg; &#176; &#xB0; °
плюс-минус &plusmn; &#177; &#xB1; ±
вторая степень &sup2; &#178; &#xB2; ²
третья степень &sup3; &#179; &#xB3; ³
острое ударение &acute; &#180; &#xB4; ´
знак микро &micro; &#181; &#xB5; µ
конец абзаца &para; &#182; &#xB6;
средняя точка &middot; &#183; &#xB7; ·
седиль &cedil; &#184; &#xB8; ¸
единица в верхнем индексе &sup1; &#185; &#xB9; ¹
показатель мужского рода &ordm; &#186; &#xBA; º
закрывающая двойная угловая кавычка &raquo; &#187; &#xBB; »
одна четвертая &frac14; &#188; &#xBC; ¼
одна вторая &frac12; &#189; &#xBD; ½
три четверти &frac34; &#190; &#xBE; ¾
перевернутый вопросительный знак &iquest; &#191; &#xBF; ¿
A с тупым ударением &Agrave; &#192; &#xC0; À
A с острым ударением &Aacute; &#193; &#xC1; Á
A с циркумфлексом &Acirc; &#194; &#xC2; Â
A с тильдой &Atilde; &#195; &#xC3; Ã
A с диерезой &Auml; &#196; &#xC4; Ä
A с кружком &Aring; &#197; &#xC5; Å
лигатура AE &AElig; &#198; &#xC6; Æ
C с седилем &Ccedil; &#199; &#xC7; Ç
E с тупым ударением &Egrave; &#200; &#xC8; È
E с острым ударением &Eacute; &#201; &#xC9; É
E с циркумфлексом &Ecirc; &#202; &#xCA; Ê
E с диерезой &Euml; &#203; &#xCB; Ë
I с тупым ударением &Igrave; &#204; &#xCC; Ì
I с острым ударением &Iacute; &#205; &#xCD; Í
I с циркумфлексом &Icirc; &#206; &#xCE; Î
I с диерезой &Iuml; &#207; &#xCF; Ï
ETH &ETH; &#208; &#xD0; Ð
N с тильдой &Ntilde; &#209; &#xD1; Ñ
O с тупым ударением &Ograve; &#210; &#xD2; Ò
O с острым ударением &Oacute; &#211; &#xD3; Ó
O с циркумфлексом &Ocirc; &#212; &#xD4; Ô
O с тильдой &Otilde; &#213; &#xD5; Õ
O с диерезой &Ouml; &#214; &#xD6; Ö
знак умножения &times; &#215; &#xD7; ×
O перечеркнутое &Oslash; &#216; &#xD8; Ø
U с тупым ударением &Ugrave; &#217; &#xD9; Ù
U с острым ударением &Uacute; &#218; &#xDA; Ú
U с циркумфлексом &Ucirc; &#219; &#xDB; Û
U с диерезой &Uuml; &#220; &#xDC; Ü
Y с острым ударением &Yacute; &#221; &#xDD; Ý
THORN &THORN; &#222; &#xDE; Þ
двойное s &szlig; &#223; &#xDF; ß
a с тупым ударением &agrave; &#224; &#xE0; à
a с острым ударением &aacute; &#225; &#xE1; á
a с циркумфлексом &acirc; &#226; &#xE2; â
a с тильдой &atilde; &#227; &#xE3; ã
a с диерезой &auml; &#228; &#xE4; ä
a с кружком &aring; &#229; &#xE5; å
лигатура ae &aelig; &#230; &#xE6; æ
c с седилем &ccedil; &#231; &#xE7; ç
e с тупым ударением &egrave; &#232; &#xE8; è
e с острым ударением &eacute; &#233; &#xE9; é
e с циркумфлексом &ecirc; &#234; &#xEA; ê
e с диерезой &euml; &#235; &#xEB; ë
i с тупым ударением &igrave; &#236; &#xEC; ì
i с острым ударением &iacute; &#237; &#xED; í
i с циркумфлексом &icirc; &#238; &#xEE; î
i с диерезой &iuml; &#239; &#xEF; ï
eth &eth; &#240; &#xF0; ð
n с тильдой &ntilde; &#241; &#xF1; ñ
o с тупым ударением &ograve; &#242; &#xF2; ò
o с острым ударением &oacute; &#243; &#xF3; ó
o с циркумфлексом &ocirc; &#244; &#xF4; ô
o с тильдой &otilde; &#245; &#xF5; õ
o с диерезой &ouml; &#246; &#xF6; ö
знак деления &divide; &#247; &#xF7; ÷
o перечеркнутое &oslash; &#248; &#xF8; ø
u с тупым ударением &ugrave; &#249; &#xF9; ù
u с острым ударением &uacute; &#250; &#xFA; ú
u с циркумфлексом &ucirc; &#251; &#xFB; û
u с диерезой &uuml; &#252; &#xFC; ü
y с острым ударением &yacute; &#253; &#xFD; ý
thorn &thorn; &#254; &#xFE; þ
y с диерезой &yuml; &#255; &#xFF; ÿ
кавычка &quot; &#34; &#x22; "
амперсанд &amp; &#38; &#x26; &
левая угловая скобка &lt; &#60; &#x3C; <
правая угловая скобка &gt; &#62; &#x3E; >
лигатура OE &OElig; &#338; &#x152; Œ
лигатура oe &oelig; &#339; &#x153; œ
S с птичкой &Scaron; &#352; &#x160; Š
s с птичкой &scaron; &#353; &#x161; š
Y с диерезой &Yuml; &#376; &#x178; Ÿ
циркумфлекс &circ; &#710; &#x2C6; ˆ
малая тильда &tilde; &#732; &#x2DC; ˜
короткий пробел &ensp; &#8194; &#x2002;
длинный пробел &emsp; &#8195; &#x2003;
узкий пробел &thinsp; &#8201; &#x2009;
разделитель нулевой ширины &zwnj; &#8204; &#x200C;
соединитель нулевой ширины &zwj; &#8205; &#x200D;
указатель слева направо &lrm; &#8206; &#x200E;
указатель справа налево &rlm; &#8207; &#x200F;
короткое тире &ndash; &#8211; &#x2013;
длинное тире &mdash; &#8212; &#x2014;
открывающая одинарная кавычка &lsquo; &#8216; &#x2018;
закрывающая одинарная кавычка &rsquo; &#8217; &#x2019;
нижняя одинарная кавычка &sbquo; &#8218; &#x201A;
открывающая двойная кавычка &ldquo; &#8220; &#x201C;
закрывающая двойная кавычка &rdquo; &#8221; &#x201D;
нижняя двойная кавычка &bdquo; &#8222; &#x201E;
кинжал &dagger; &#8224; &#x2020;
двойной кинжал &Dagger; &#8225; &#x2021;
знак промилле &permil; &#8240; &#x2030;
открывающая угловая кавычка &lsaquo; &#8249; &#x2039;
закрывающая угловая кавычка &rsaquo; &#8250; &#x203A;
евро &euro; &#8364; &#x20AC;
курсивное f &fnof; &#402; &#x192; ƒ
прописная альфа &Alpha; &#913; &#x391; Α
прописная бета &Beta; &#914; &#x392; Β
прописная гамма &Gamma; &#915; &#x393; Γ
прописная дельта &Delta; &#916; &#x394; Δ
прописной эпсилон &Epsilon; &#917; &#x395; Ε
прописная дзета &Zeta; &#918; &#x396; Ζ
прописная эта &Eta; &#919; &#x397; Η
прописная тета &Theta; &#920; &#x398; Θ
прописная иота &Iota; &#921; &#x399; Ι
прописная каппа &Kappa; &#922; &#x39A; Κ
прописная ламбда &Lambda; &#923; &#x39B; Λ
прописная мю &Mu; &#924; &#x39C; Μ
прописная ню &Nu; &#925; &#x39D; Ν
прописная кси &Xi; &#926; &#x39E; Ξ
прописной омикрон &Omicron; &#927; &#x39F; Ο
прописная пи &Pi; &#928; &#x3A0; Π
прописная ро &Rho; &#929; &#x3A1; Ρ
прописная сигма &Sigma; &#931; &#x3A3; Σ
прописная тау &Tau; &#932; &#x3A4; Τ
прописная ипсилон &Upsilon; &#933; &#x3A5; Υ
прописная фи &Phi; &#934; &#x3A6; Φ
прописная хи &Chi; &#935; &#x3A7; Χ
прописная пси &Psi; &#936; &#x3A8; Ψ
прописная омега &Omega; &#937; &#x3A9; Ω
строчная альфа &alpha; &#945; &#x3B1; α
строчная бета &beta; &#946; &#x3B2; β
строчная гамма &gamma; &#947; &#x3B3; γ
строчная дельта &delta; &#948; &#x3B4; δ
строчная эпсилон &epsilon; &#949; &#x3B5; ε
строчная дзета &zeta; &#950; &#x3B6; ζ
строчная эта &eta; &#951; &#x3B7; η
строчная тета &theta; &#952; &#x3B8; θ
строчная иота &iota; &#953; &#x3B9; ι
строчная каппа &kappa; &#954; &#x3BA; κ
строчная ламбда &lambda; &#955; &#x3BB; λ
строчная мю &mu; &#956; &#x3BC; μ
строчная ню &nu; &#957; &#x3BD; ν
строчная кси &xi; &#958; &#x3BE; ξ
строчный омикрон &omicron; &#959; &#x3BF; ο
строчная пи &pi; &#960; &#x3C0; π
строчная ро &rho; &#961; &#x3C1; ρ
строчная сигма конечная &sigmaf; &#962; &#x3C2; ς
строчная сигма &sigma; &#963; &#x3C3; σ
строчная тау &tau; &#964; &#x3C4; τ
строчная ипсилон &upsilon; &#965; &#x3C5; υ
строчная фи &phi; &#966; &#x3C6; φ
строчная хи &chi; &#967; &#x3C7; χ
строчная пси &psi; &#968; &#x3C8; ψ
строчная омега &omega; &#969; &#x3C9; ω
символ строчная тета &thetasym; &#977; &#x3D1; ϑ
ипсилон с крючком &upsih; &#978; &#x3D2; ϒ
символ пи &piv; &#982; &#x3D6; ϖ
маркер списка &bull; &#8226; &#x2022;
многоточие &hellip; &#8230; &#x2026;
знак прим &prime; &#8242; &#x2032;
знак двойной прим &Prime; &#8243; &#x2033;
надчеркивание &oline; &#8254; &#x203E;
дробная черта &frasl; &#8260; &#x2044;
рукописная P &weierp; &#8472; &#x2118;
мнимая часть числа &image; &#8465; &#x2111;
действительная часть числа &real; &#8476; &#x211C;
торговая марка &trade; &#8482; &#x2122;
алеф &alefsym; &#8501; &#x2135;
стрелка влево &larr; &#8592; &#x2190;
стрелка вверх &uarr; &#8593; &#x2191;
стрелка вправо &rarr; &#8594; &#x2192;
стрелка вниз &darr; &#8595; &#x2193;
стрелка влево-вправо &harr; &#8596; &#x2194;
возврат каретки &crarr; &#8629; &#x21B5;
двойная стрелка влево &lArr; &#8656; &#x21D0;
двойная стрелка вверх &uArr; &#8657; &#x21D1;
двойная стрелка вправо &rArr; &#8658; &#x21D2;
двойная стрелка вниз &dArr; &#8659; &#x21D3;
двойная стрелка влево-вправо &hArr; &#8660; &#x21D4;
квантор всеобщности &forall; &#8704; &#x2200;
знак дифференциала &part; &#8706; &#x2202;
квантор существования &exist; &#8707; &#x2203;
пустое множество &empty; &#8709; &#x2205;
набла &nabla; &#8711; &#x2207;
принадлежит множеству &isin; &#8712; &#x2208;
не принадлежит множеству &notin; &#8713; &#x2209;
является членом &ni; &#8715; &#x220B;
n-арное произведение &prod; &#8719; &#x220F;
n-арная сумма &sum; &#8721; &#x2211;
знак минус &minus; &#8722; &#x2212;
оператор звездочка &lowast; &#8727; &#x2217;
радикал &radic; &#8730; &#x221A;
пропорционально &prop; &#8733; &#x221D;
бесконечность &infin; &#8734; &#x221E;
угол &ang; &#8736; &#x2220;
логическое И &and; &#8743; &#x2227;
логическое ИЛИ &or; &#8744; &#x2228;
пересечение &cap; &#8745; &#x2229;
объединение &cup; &#8746; &#x222A;
интеграл &int; &#8747; &#x222B;
следовательно &there4; &#8756; &#x2234;
оператор тильда &sim; &#8764; &#x223C;
приблизительно равно &cong; &#8773; &#x2245;
асимптотически равно &asymp; &#8776; &#x2248;
не равно &ne; &#8800; &#x2260;
тождественно равно &equiv; &#8801; &#x2261;
меньше или равно &le; &#8804; &#x2264;
больше или равно &ge; &#8805; &#x2265;
подмножество &sub; &#8834; &#x2282;
надмножество &sup; &#8835; &#x2283;
не подмножество &nsub; &#8836; &#x2284;
подмножество или равно &sube; &#8838; &#x2286;
надмножество или равно &supe; &#8839; &#x2287;
прямая сумма &oplus; &#8853; &#x2295;
векторное произведение &otimes; &#8855; &#x2297;
перпендикулярно &perp; &#8869; &#x22A5;
оператор точка &sdot; &#8901; &#x22C5;
левый верхний угол &lceil; &#8968; &#x2308;
правый верхний угол &rceil; &#8969; &#x2309;
левый нижний угол &lfloor; &#8970; &#x230A;
правый нижний угол &rfloor; &#8971; &#x230B;
левая угловая скобка &lang; &#9001; &#x2329; (
правая угловая скобка &rang; &#9002; &#x232A; )
ромб &loz; &#9674; &#x25CA;
пики &spades; &#9824; &#x2660;
трефы &clubs; &#9827; &#x2663;
червы &hearts; &#9829; &#x2665;
бубны &diams; &#9830; &#x2666;

Другие символы:

Описание символа10-ный код16-ный кодВид
карандаш &#9999; &#x270F;
карандаш &#9998; &#x270E;
карандаш &#10000; &#x2710;
перо &#10001; &#x2711;
перо &#10002; &#x2712;
треугольная стрелка вверх &#9650; &#x25B2;
треугольная стрелка вниз &#9660; &#x25BC;
треугольная стрелка вправо &#9658; &#x25BA;
треугольная стрелка влево &#9668; &#x25C4;
галочка &#10003; &#x2713;
галочка &#10004; &#x2714;
крестик &#10006; &#x2716;
крестик &#10007; &#x2717;
крестик &#10008; &#x2718;
крест &#9747; &#x2613;
круг &#9675; &#x25CB;
круг закрашенный &#9679; &#x25CF;
квадрат &#9633; &#x25A1;
квадрат закрашенный &#9632; &#x25A0;
еврейская звезда &#10017; &#x2721;
звезда &#10026; &#x272A;
звезда &#10027; &#x272B;
звезда &#10028 &#x272C;
звезда рельефная &#10031 &#x272F;
3-d звезда &#10032; &#x2730;
звезда &#9733; &#x2605;
звезда &#9734; &#x2606;
солнце &#9728; &#x2600;
солнце &#9788; &#x263C;
облако, туча &#9729; &#x2601;
снежинка &#10052; &#x2744;
снежинка &#10053; &#x2745;
снежинка &#10054; &#x2746;
зонт &#9730; &#x2602;
снеговик &#9731; &#x2603;
цветок &#10047; &#x273F;
цветок &#10045; &#x273D;
цветок разноцветный &#10046; &#x273E;
красивый цветок &#10048; &#x2740;
растущий месяц &#9789; &#x263D;
убывающий месяц &#9790; &#x263E;
телефон &#9742; &#x260E;
телефон &#9743; &#x260F;
телефон &#9990; &#x2706;
многоугольник &#10041; &#x2739;
многоугольник &#10040; &#x2738;
многоугольник &#10039; &#x2737;
шестиугольник &#10038; &#x2736;
пункт &#9744; &#x2610;
активный пункт, галочка &#9745; &#x2611;
активный пункт, крест &#9746; &#x2612;
череп и кости &#9760; &#x2620;
мусульманский символ &#9770; &#x262A;
серп и молот &#9773; &#x262D;
письмо &#9993; &#x2709;
инь и янь &#9775; &#x262F;
пишущая рука &#9997; &#x270D;
грустный смайл &#9785; &#x2639;
веселый смайл &#9786; &#x263A;
веселый смайл &#9787; &#x263B;
ножницы &#9988; &#x2704;
ножницы &#9986; &#x2702;
женщина &#9792; &#x2640;
мужчина &#9794; &#x2642;
сердце &#10085; &#x2765;
сердце-узор &#10086; &#x2766;
одиночная кавычка &#10075; &#x275B;
одиночная кавычка &#10076; &#x275C;
двойная кавычка &#10077; &#x275D;
двойная кавычка &#10078; &#x275E;
Четвертная нота &#9833; &#x2669;
Восьмая &#9834; &#x266A;
две восьмые &#9835; &#x266B;
шестнадцатая &#9836; &#x266C;
бемоль &#9837; &#x266D;
бекар &#9838; &#x266E;
диез &#9839; &#x266F;
шар &#10061; &#x274D;
куб &#10066; &#x2752;
астеризм &#8258 &#x2042;

Комментарии   

+2 # Alfredo 09.12.2016 18:19
Спасибо за статью
Ответить | Ответить с цитатой | Цитировать
0 # Ellazar 30.05.2017 19:21
Большое спасибо!
Исчерпывающая информация
Ответить | Ответить с цитатой | Цитировать

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

Авторизоваться с помощью:

     


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

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Основы HTML. Урок №1. Как создать HTML документ?

С этой статьи я начинаю свой цикл, посвященный основам HTML, где я буду доступным и постараюсь понятным для новичков языком объяснять основы данного веб-языка.

Теги:

html, document, file

Комментариев: 0 Подробнее
Основы HTML. Урок №2. Структура страницы.

Продолжаю цикл статей, посвященный изучению основ HTML и это второй урок, в котором я расскажу вам о базовой структуре HTML странички и тут же мы поговорим о тегах.

Теги:

html, title, body, head

Комментариев: 0 Подробнее
Основы HTML. Урок №3. Некоторые теги тела документа.

Это третья статья, в цикле изучения основ HTML и в ней я расскажу вам о некоторых тегах, который используются в теле документа.

Теги:

html, tags, img, tag, div

Комментариев: 0 Подробнее

Последнее с форума

форма на DataLife Engine 1 день 9 ч. назад
synt аватар
Здравствуйте! Подскажите модуль или решение для создания сложных форм с капчей и возможностью задава...
Перейти в тему
Frontend Разработчик, Москва 1 мес. 3 нед. назад
porohinaio@mail.ru аватар
INMYROOM это контентный проект про интерьеры и маркетплейс дизайнерской мебели с посещаемостью более...
Перейти в тему
anzhelika_bell аватар
Обязанности: Верстка web-интерфейсов по готовым макетам, исправление дефектов верстки. Требования: ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.