Логотип Валидатор Валидатор Качество создания сайта

Амперсанды


Зачем нужны амперсанды?

Прежде всего о том, как правильно писать: амперсанТы(?), или амперсанДы(?). Правильно будет через "Д" (от английского слова ampersand).

А теперь далее можно узнать что это такое и зачем они нужны, либо перейти к подробному справочнику HTML-кодов пиктограмм сразу: Справочник HTML-кодов пиктограмм

Символ амперсанда

Амперсанды нужны для отображения символов, которых либо НЕТ на клавиатуре, либо их прямой ввод с клавиатуры приведёт к активации браузера, и он отобразит их так, как сам "считает" нужным (т.е., как "вшито" в HTML-интерпретатор).
Поскольку, некоторые символы используются компьютером "программно" в HTML-коде страницы.

**Простой пример.
Если ввести "левую угловую скобку", потом латинскую букву "b", затем ещё и "правую угловую скобку", то всё (что ниже) станет жирным.
Применив же прописывание через амперсанды, любой нужный нам HTML-код просто отобразится на экране монитора компьютера НЕ выполняясь.

Получаемые с их помощью кодовые конструкции обращаются к операционной системе, и активируют неалфавитные шрифты. Ну а код таких конструкций всегда начинается со знака амперсанда  & , а заканчивается точкой с запятой  ; 

Подобное постоянно бывает нужно, когда мы рассказываем на веб-странице о каких-либо кодах, скриптах, описываем и показываем их.

Поэтому амперсанды - "штука" весьма полезная! Даже очень!

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

Эти интересные символы, знаки, рисунки и т.д. называются: "пиктограммы", хотя где-то можно встретить и другое название: "мнемоники", а ведь по сути, это одно и то же, и они используются для оформления текста графическими элементами.

Не понимаю, зачем нужно называть одинаковые вещи разными именами?! ... ... ...Без понятия!

К примеру, общепринятый символ электронной почты "собачку" можно вывести на экран 3-мя способами: с клавиатуры, и 2-мя разными кодами через амперсанды.

Вот. Пожалуйста!

1. С клавиатуры - @

2. Первый код: @ - @

3. Второй код: &#064; - @  <--- в коде с цифрами символ "решётка" # обязателен!

Из приведённого примера хорошо видно, что все три, выведенные на экран символа "собачки", абсолютно одинаковые! Один в один!
Тем не менее, на ресурсе, где я узнавал коды этого символа, их называют по-разному.

Код прописанный буквами там называют: "мнемоники", а цифрами: "HTML-код", хотя для компьютера - всё едино! Он всё видит и понимает только в цифрах.  Мало того! Для него существует лишь последовательность из разных комбинаций цифр: "0" и "1".

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

* * *

А теперь можно переходить к основной цели создания данной страницы сайта.


Справочник HTML-кодов пиктограмм

Этот справочник пиктограмм, выводимых HTML-кодами с амперсандами, я начинал делать в Windows XP, и проверял в браузере "Яндекс". Позже добавил примеры уже для Windows 10.
*Prim.  На разных сервисах и устройствах некоторые из них могут отображаться по-другому.

Так отображается один и тот же символ разными сервисами и устройствами.
Разные варианты отображения символа

Всевозможных пиктограмм: символов, значков, миниатюр - ОГРОМНОЕ количество! Поэтому, создавая свой справочник, хотелось хоть как-то их классифицировать.

* * *

Условно их можно разбить на несколько "смысловых" групп. По крайней мере, я их так разбил, чтобы было легче искать.

Особенно БОЛЬШИЕ разделы из общего списка пиктограмм разбил ещё на несколько более мелких подразделов. Старался, чтобы они совпадали по смыслу содержимого. И из них можно быстро возвращаться в начало основного раздела (БЕЗ перехода в начало страницы) по их собственным навигационным элементам. Вот по таким: Простым и лёгким!

А такие: Список HTML-кодов пиктограмм будут возвращать к ОБЩЕМУ списку HTML-кодов пиктограмм.

* * *

Ниже дал справочник HTML-кодов не только самых нужных и часто используемых пиктограмм, сделанных с помощью амперсандов, но и просто очень интересных! Какие самому очень понравились!

Их можно копировать из выделенной фоновым цветом области в буфер обмена, и вставлять в HTML-код страниц своего сайта.

** Некоторые из них есть на клавиатуре, но очень часто бывает нужно просто вывести код на экран монитора, без его выполнения программно.

Список HTML-кодов пиктограмм

* * *

Выделено, - как они прописываются, а справа, через дефис, - как отображаются.
*Prim.  Все отображённые образцы пиктограмм взяты в тэги жирности "b".
В выделенном коде ничего лишнего нет! Он чистый.

Программные

Символ амперсанда: &amp; - &
Левая угловая скобка: &lt; - <
Правая угловая скобка: &gt; - >
Кавычки программные: &quot; - "
Кавычки программные одинарные: &apos; - '
Точка программная: &period; - .
Аналог программной точки: &#46; - .
Запятая программная: &comma; - ,
Аналог запятой: &#044; - ,
Программный символ "присвоить": &equals; - =
Аналог символа "присвоить": &#061; - =
Присвоение значений переменным при перечислении (яз. Паскаль): &colone; -
Перечисление параметров значений (яз. Паскаль): &ecolon; -
Нижнее подчёркивание: &lowbar; - _
Слэш: &sol; - /
Обратный слэш: &bsol; - \
Вертикальная черта: &vert; - |
Двойная вертикальная: &Vert; - <--- как и предыдущая, НО с большой буквы.
Фигурная скобка левая: &lbrace; - {
Аналог левой фигурной скобки: &#123; - {
Фигурная скобка правая: &rbrace; - }
Аналог правой фигурной скобки: &#125; - }
Квадратная скобка левая: &#091; - [
Квадратная скобка правая: &#093; - ]
Круглая скобка левая: &lpar; - (
Аналог левой круглой скобки: &#040; - (
Круглая скобка правая: &rpar; - )
Аналог правой круглой скобки: &#041; - )
Двойные левые круглые скобки: &#11816; -
Двойные правые круглые скобки: &#11817; -
Логический символ: &#94; - ^ <--- смысл: близко к "и", но - "тогда и только тогда".
Знак "решётка": &num; - #
Знак почты "собачка": &commat; - @
Аналог знака почты "собачка": &#064; - @
Символ доллара: &dollar; - $ <--- он есть на клавиатуре. НО ... ... аккуратнее!
Аналог символа доллар: &#036; - $

Неразрывный пробел: &nbsp; -   <--- ЗДЕСЬ. Его не видно, но используется постоянно!

**P.S.   Разных пробелов целое семейство. Для сравнения, показал их действие между буквами "А".

А А - обычный клавиатурный пробел
А А - неразрывный пробел &nbsp;
А А - средний пробел с помощью &ensp;
А А - широкий пробел с помощью &emsp;

Список HTML-кодов пиктограмм



Технические и математические пиктограммы

Технические

Символ "для всех": &forall; -
Аналог символа "для всех": &#8704; -
Символ настройки "шестерёнка": &#9881; -
Символ сжатия данных: &#128476; - 🗜
Заменяющий символ: &#65533; - <--- если компьютер не понимает кодировку.
Знак "не определёно": &#127; -  <--- если браузер не может вывести какой-то символ.
Символ параграфа: &sect; - §
Символ абзаца: &para; -
Номер: &numero; -
Аналог символа номер: &#8470; -
Символ бесконечности: &infin; -
Значок диаметра: &#8960; -
Число "Пи": &pi; - π <--- 3,14
Температура по Цельсию: &#8451; -
Температура по Фаренгейту: &#8457; -
Температура по Кельвину: &#8490; -
Символ градусов: &deg; - °
Символ "минуты": &prime; -
Символ "секунды": &Prime; -
Символ промилле: &#8240; -
Знак тысячной доли: &pertenk; -
Проценты: &percnt; - %
Аналог процентов: &#65285; -
Весовая единица "унция": &#8485; -
Символ единиц сопротивления: &Omega; - Ω
Единицы "микро": &micro; - µ
Вес "килограммы": &#13199; -
Единицы длины "километры": &#13214; -
Единицы длины "сантиметры": &#13213; -
Единицы длины "миллиметры": &#13212; -
Единицы длины "микроны": &#13211; -
Единицы длины "нанометры": &#13210; -
Единицы длины "фемтометры": &#13209; -
Площадь - километры квадратные: &#13218; -
Площадь - метры квадратные: &#1217; -
Площадь - сантиметры квадратные: &#13216; -
Площадь - миллиметры квадратные: &#13215; -
Площадь - квадратный фут: &#9165; -
Мощность звука "децибелы" dB: &#13256; - <--- 1⁄10 бела.
Единицы кислотности "pH": &#13271; -
Химическое "бензольное кольцо": &#9004; -
"Бензольное кольцо" с кругом: &#9187; -
Технический символ: &#9142; -
Символ геометрической оси: &#8452; - <--- особенно интересен крупный.
Дуга: &#8978; -
Сегмент: &#8979; -
Сектор: &#8980; -
Диаграмма: &#128480; - 🗠
Синусоидальная волна: &#8767; -
Гистограмма: &#128202; - 📊
Символ оптического распознавания: &#9286; -
Символ центра: &#8982; -
Начало измерения координат: &#9009; -
Площадь просмотра: &#8983; -
Художественная композиция: &#9092; -
Прообраз: &origof; -
Образ: &imof; -
Многозначие отображений: &mumap; -
Оценка: &#8793; -
Перспективно: &#8966; -
Параллельное направление: &parallel; -
Акцент: &#9091; -
Закон, образец: &#119597; - 𝌭
Символ электрического напряжения: &#8961; - <--- хорошо видно крупным.
Символ переменного тока: &#9190; -
Символ постоянного тока: &#9107; -
Точка на линии: &#9087; -
Заземление: &#9178; -
Предохранитель: &#9179; -
Звонок: &#9086; -
Гистерезис: &#9102; - <--- отклик систем, зависящий от их состояния.
Избыток: &#8761; -
Какой-то технический символ: &erDot; -
Ещё один символ (образ или что-то): &efDot; -


Математика

Знак суммы: &sum; -
Знак разницы: &Delta; - Δ
Корень квадратный: &radic; -
Корень кубический: &#8731; -
Корень четвёртой степени: &#8732; -
Символ дроби: &frasl; -
Числитель дроби: &#8543; -
Дробь четверть: &frac14; - ¼
Дробь половина: &frac12; - ½
Дробь три четверти: &frac34; - ¾
Дробь пять восьмых: &frac58; -
Дробь одна треть: &frac13; - <--- *и так далее, НО только с двузначными числами.
Надстрочный индекс "0": &ordm; - <--- *буквы А для наглядности (в коде их нет).
Аналог надстрочного индекса "0": &#8304; - A⁰
Надстрочный индекс "1": &sup1; -
Надстрочный индекс "2": &sup2; -
Надстрочный индекс "3": &sup3; -
Надстрочный индекс "4": &#8308; - A⁴
Надстрочный индекс "5": &#8309; - A⁵
Надстрочный индекс "6": &#8310; - A⁶
Надстрочный индекс "7": &#8311; - A⁷
Надстрочный индекс "8": &#8312; - A⁸
Надстрочный индекс "9": &#8313; - A⁹
Надстрочный индекс "a": &ordf; -
Надстрочный индекс "n": &#8319; - Aⁿ
Надстрочный индекс "i": &#8305; - Aⁱ
Надстрочный индекс "+": &#8314; - A⁺
Подстрочное маленькое перекрестье: &#11836; - A⸼
Подстрочный индекс "0": &#8320; - A₀
Подстрочный индекс "1": &#8321; - A₁
Подстрочный индекс "2": &#8322; - A₂
Подстрочный индекс "3": &#8323; - A₃
Подстрочный индекс "4": &#8324; - A₄
Подстрочный индекс "5": &#8325; - A₅
Подстрочный индекс "6": &#8326; - A₆
Подстрочный индекс "7": &#8327; - A₇
Подстрочный индекс "8": &#8328; - A₈
Подстрочный индекс "9": &#8329; - A₉
Знак допустимой погрешности: &plusmn; - ±
Знак диапазона "от - до": &#247; - ÷
Знак плюс: &plus; - +
Знак минус: &minus; -
Знак деления: &divide; - ÷
Знак умножения: &times; - ×
Умножение и деление: &divonx; -
Умножение и деление (аналог): &#8903; -
Знак равно: &equals; - =
Аналог знака равно: &#061; - =
Знак не равно: &ne; -
Приблизительно равно: &sim; -
Приблизительно не равно: &nsim; -
Почти равно: &asymp; -
Аналог почти равно: &#8776; -
Не почти равно: &nap; -
Почти равно или совсем равно: &cong; -
Приблизительно равно, но не фактически: &simne; -
Знак "никак не равно": &ncong; -
Возможно равно: &equest; -
Равно по определению: &#8797; -
Измерено: &#8798; -
Меньше или равно: &le; -
Больше или равно: &ge; -
Больше: &gt; - >
Меньше: &lt; - <
Много больше: &gg; -
Много меньше: &ll; -
Гораздо больше: &Gg; -
Гораздо меньше: &Ll; -
Тильда: &#126; - ~
Тильда надстрочная: &tilde; - ˜
Тройная тильда: &apid; -
Аналог тройной тильды: &#8779; -
Идентично: &equiv; - <--- синоним "тождественно равно".
Не идентично: &nequiv; -
Строго идентично: &#8803; -
Эквивалентно: &asympeq; -
Не эквивалентно: &NotCupCap; -
Аналог не эквивалентно: &#8813; -
Пропорционально: &prop; -
Пропорция: &Colon; -
Поскольку: &because; -
Следовательно: &there4; -
Соотношение: &ratio; -
Между: &between; -


Геометрия

Перпендикулярно: &#10178; -
Перпендикуляр с "S": &#10977; -
Параллельно: &par; -
Не параллельно: &npar; -
Равно и параллельно: &epar; -
Угол: &ang; -
Острый угол: &#10655; -
Измеренный угол: &angmsd; -
Угол с литерой "S": &#10654; -
Равноугольный: &#8794; -
Равны по определению: &trie; -
Прямоугольный треугольник: &lrtri; -
Прямой угол: &angrt; -
Измеренный прямой угол: &angrtvb; -
Прямой угол с точкой: &#10653; -
Прямой угол с квадратом: &#10652; -
Геометрическая пропорция: &mDDot; -
Геометрически равный: &eDot; -
Симметрия: &#9007; -
Геометрическая эквивалентность: &bump; -
Различия между: &bumpe; -
Гомотетичный (стереометрия): &homtht; -


Высшая математика

Интеграл: &int; -
Контурный интеграл: &#8750; -
Поверхностный интеграл: &#8751; -
Интеграл по объёму: &#8752; -
Интеграл со стрелкой: &#10775; -
Интеграл с двойной чертой: &#10766; -
Интеграл с кругом: &conint; -
Интеграл с точкой в круге: &#10773; -
Интеграл с квадратом: &#10774; -
Функция: &fnof; - ƒ
Левая квадратная спецскобка: &#8261; -
Правая квадратная спецскобка: &#8262; -
Логическое "и": &and; -
Логическое "или": &or; -
Принадлежит множеству: &#8712; -
Не пренадлежит множеству: &#8713; -
Пустое множество: &empty; -
Знак "приоритет выше": &sc; -
Знак "приоритет ниже": &pr; -
Существует: &#8707; -
Не существует: &#8708; -
Сплетение: &wreath; -
Матрица (эрмитово сопряжение): &hercon; -
Союз мультимножеств: &uplus; -
Кольцевое равенство: &cire; -
Скрещённое произведение: &#10803; -
Сумма по модулю два: &#10762; -

Список HTML-кодов пиктограмм



Стрелки и указатели

Левая стрелка: &larr; -
Правая стрелка: &rarr; -
Стрелка вверх: &uarr; -
Стрелка вниз: &darr; -
Туда/сюда: &harr; -
Вверх/вниз: &#8597; -
Стрелка по часовой: &orarr; -
Стрелка против часовой: &olarr; -
С-образная стрелка влево: &#11148; -
С-образная стрелка вверх: &#11149; -
С-образная стрелка вправо: &#11150; -
С-образная стрелка вниз: &#11151; -
Жирные круговые стрелки: &#128472; - 🗘
Стрелка с минусом: &curarrm; -
Стрелка с плюсом: &cularrp; -
Двухсторонняя стрелка: &hoarr; -
Двухсторонняя стрелка из кружка: &harrcir; -
Стрелка вправо: &roarr; -
Стрелка влево: &loarr; -
Стрелка с зигзагом вправо: &zigrarr; -
Стрелка с левым ограничителем: &larrb; -
Стрелка с правым ограничителем: &rarrb; -
Указатель вниз - влево: &ldca; -
Указатель вниз - вправо: &rdca; -
Концы дуги вправо: &Sub; -
Концы дуги влево: &Sup; -
Концы дуги вверх: &Cup; -
Концы дуги вниз: &Cap; -
Влево: &#9204; -
Вправо: &#9205; -
Вверх: &#9206; -
Вниз: &#9207; -
Треугольный указатель вверх: &#9650; -
Треугольный указатель вниз: &#9660; -
Треугольный указатель вправо: &#9658; -
Треугольный указатель влево: &#9668; -
Наконечник стрелки: &#10148; -
Фигурный наконечник влево: &#11164; -
Фигурный наконечник вправо: &#11166; -
Фигурный наконечник вверх: &#11165; -
Фигурный наконечник вниз: &#11167; -
Жирная стрелка вправо: &#10132; -
Короткая толстая стрелка вправо: &#10151; -
Длинная стрелка вправо: &#10137; -
Длинная толстая стрелка вправо: &#10144; -
Изогнутая сверху вниз стрелка вправо: &#10149; -
Изогнутая снизу вверх стрелка вправо: &#10150; -
Изогнутая стрелка вправо вниз: &#10136; -
Стрелка с оперением: &#10163; -
Толстая стрелка с оперением: &#10173; -
Малая стрелка с оперением вправо: &#10172; -
Толстая стрелка с оперением "капля" вправо: &#10171; -
Тонкая стрелка с оперением "капля" вправо: &#10170; -
Стрелка вверх вправо: &#10169; -
Стрелка вправо: &#10168; -
Стрелка вниз вправо: &#10167; -
Стрелка (с просветом в оперении) вправо вверх: &#10166; -
Стрелка (с просветом в оперении) вправо: &#10165; -
Стрелка (с просветом в оперении) вправо вниз: &#10164; -
Стрелка "рыбья кость" вправо: &#10163; -
Стрелка (с верхней обводкой) вправо: &#10161; -
Стрелка (с нижней обводкой) вправо: &#10159; -
Короткая стрелка (с верхней обводкой) вправо: &#10158; -
Короткая стрелка (с нижней обводкой) вправо: &#10157; -
Стрелка наклонная (с верхней обводкой) вправо: &#10156; -
Стрелка наклонная (с нижней обводкой) вправо: &#10155; -
Контурная стрелка сверху вниз влево: &#11184; -
Контурная стрелка сверху вниз вправо: &#11185; -
Контурная стрелка снизу вверх влево: &#11186; -
Контурная стрелка снизу вверх вправо: &#11187; -
Контурная стрелка справа вверх: &#11188; -
Контурная стрелка слева вверх: &#11189; -
Контурная стрелка с правого верха вниз: &#11190; -
Контурная стрелка с левого верха вниз: &#11191; -
Сдвоенная стрелка вправо: &#10174; -
Стрелка в закрашенном круге вправо: &#10162; -
Стрелка в закрашенном треугольнике влево: &#129172; - 🢔
Стрелка в закрашенном треугольнике вправо: &#129174; - 🢖
Стрелка в закрашенном треугольнике вниз: &#129175; - 🢗
Стрелка в закрашенном треугольнике вверх: &#129173; - 🢕
Стрелка вниз влево под прямым углом: &#9166; -
Указатель "палец вправо": &#9758; -
Указатель "палец влево": &#9756; -
Указатель "палец вверх": &#9757; -
Указатель "палец вниз": &#9759; -
Закрашенный указатель вправо: &#9755; -
Закрашенный указатель влево: &#9754; -

Список HTML-кодов пиктограмм



Оси, углы, границы и разделители

Область с 4-мя углами: &#9974; -
Закруглённый треугольник: &#128710; - 🛆
Треугольник с точкой: &#9708; -
Черта с точками: &#11795; -
Центральный ограничитель: &#9547; -
Сопряжение: &#8889; -
Жирное сопряжение: &#10012; -
Вертикальный разделитель: &brvbar; - ¦
Пунктирная ось: &#9479; -
Пунктир чаще: &#9483; -
Большая пунктирная ось: &#11837; -
Среднее троеточие: &ctdot; -
Троеточие вверх: &utdot; -
Троеточие вниз: &dtdot; -
Левая жирная граница: &#12304; -
Правая жирная граница: &#12305; -
Левый верхний угол: &#9487; -
Левый нижний угол: &#9495; -
Правый верхний угол: &#9491; -
Правый нижний угол: &#9499; -
П-образный ограничитель левый: &#8847; -
П-образный ограничитель правый: &#8848; -
П-образный ограничитель верхний: &#8851; -
П-образный ограничитель нижний: &#8852; -
Верхний левый высокий угол: &lceil; -
Верхний правый высокий угол: &rceil; -
Нижний левый высокий угол: &lfloor; -
Нижний правый высокий угол: &rfloor; -
Символ "анкора" вниз: &#11796; -
Символ "анкора" вверх: &#11797; -
Уголок с точкой влево: &#8918; -
Уголок с точкой вправо: &#8919; -
Три черты левые: &#9886; -
Три черты правые: &#9887; -
Левый верхний треугольник: &#9700; -
Левый нижний треугольник: &#9699; -
Правый верхний треугольник: &#9701; -
Правый нижний треугольник: &#9698; -
Наклонный разделитель: &#092; - A\A <--- *буквы для наглядности (в коде их нет).
Прямой малый разделитель: &mid; - A∣A
Зачёркнутый малый разделитель: &nmid; - A∤A
Разделитель равноудалённый: &#9475; - А┃А
Разделитель равноудалённый тонкий: &#9474; - А│А
Разделитель асимметричный: &#9621; - А▕А
Разделитель с ножкой вниз: &#9523; - А┳А
Разделитель с ножкой вверх: &#9531; - А┻А
Отделитель лева от права: &#9507; - А┣А
Отделитель права от лева: &#9515; - А┫А
Разделитель тонкий правый: &vdash; - A⊢A
Разделитель тонкий левый: &dashv; - A⊣A
Разделитель тонкий верхний: &top; - A⊤A
Разделитель тонкий нижний: &perp; - A⊥A
Верхнее длинное надчёркивание: &#9620; - А▔А
Нижнее подчёркивание: &#95; - А_А
Длинная черта: &#8213; - А―А
Тройной разделитель: &Vvdash; - A⊪A
Прямоугольный разделитель: &#9608; - A█A
Круглый разделитель: &#8226; - A•A

Список HTML-кодов пиктограмм



Геометрические фигуры

Астериски (звёздочки)

Астериск: &ast; - *
Звёздочка: &#10035; -
Звёздочка остроконечная: &sext; -
Аналог остроконечной звёздочки: &#10038; -
Звёздочка жирная: &#10033; -
Звёздочка с кружками на концах: &#119215; - 𝆯 <--- красиво, если увеличить в 5 раз.
Звёздочка малая 6-ти конечная: &#42; - *
Звёздочка малая 8-ми конечная: &#1645; - ٭
Объёмная 8-ми конечная: &#10037; -
Звёздочка двухцветная: &#10051; -
Двойная звёздочка: &#10055; -
Двойная жирная звёздочка: &#10056; -
Звёздочка-пропеллер: &#10044; -
Звёздочка закрашенный пропеллер: &#10043; -
Звёздочка остроконечная: &#10059; -
Звёздочка 8-ми конечная: &#10040; -
Звёздочка 8-ми конечная объёмная: &#10037; -
Звёздочка 12-ти конечная: &#10041; -
Звёздочка 16-ти конечная: &#10042; -
Звёздочка в круге: &#8859; -
Три звёздочки: &#8258; -


Кружки

Жирные кружок с точкой: &#9737; -
Жирный овал с точкой: &#664; - ʘ
Овал со слэшем: &Oslash; - Ø
Овал внутри с кружком: &#11386; -
Круг с треугольником: &#9098; -
Круг с ломаной линией: &#9097; - <--- символ измерительных приборов.
Кружок: &bull; -
Аналог кружка: &#9679; -
Левая половинка круга: &#9686; -
Правая половинка круга: &#9687; -
Целый круг с левым затмением: &#9680; -
Целый круг с правым затмением: &#9681; -
Целый круг с нижним затмением: &#9682; -
Целый круг с верхним затмением: &#9683; -
Круг с вертикальными линиями: &#9677; -
Маленький кружок: &#11824; -
Бледный кружок: &#9675; -
Три кружка: &#3868; - <--- видны отчётливо при увеличении в 5 раз.
Круг с точками: &#9061; -
Малый круг в круге: &ocir; -
Круг в круге: &#9022; -
Точка в круге: &#8857; -
Плюс в круге: &#8853; -
Минус в круге: &#8854; -
Умножение в круге: &#8855; -
Деление в круге: &#8856; -
Равно в круге: &#8860; -
Перпендикуляр в круге: &#10681; -
Круг на перпендикуляре: &#9154; -
Круг разделённый пополам: &#9021; -
Круг с точкой и стрелкой: &#9954; -
Шар: &#10061; -


Ромбы

Ромб: &loz; -
Ромб малый: &#9671; -
Ромб малый закрашенный: &#9670; -
Ромб в ромбе: &#9672; - <--- очень красиво. Хорошо видно при увеличении.
Ромб из секторов: &#10070; -
Ромбовидные точки с крестиком: &#8251; -
Ромбовидная закрашенная метка: &#10022; -
Ромбовидная контурная метка: &#10023; -


Квадраты

Квадрат: &#9632; -
Приподнятый квадратик: &#11787; -
Контурный квадрат: &#9744; -
Жирный контурный квадрат: &#8414; -
Плюс в квадрате: &plusb; -
Аналог плюса в квадрате: &#8862; -
Вопрос в квадрате: &#9072; -
Точка в квадрате: &sdotb; -
Галочка в квадрате: &#9745; -
Перекрестье в квадрате: &#9746; -
Перекрестье в большом квадрате: &#8864; -
Перекрестье в прямоугольнике: &#8999; -
Большой прямоугольник с кругом внутри: &#9020; -
Чёрный квадрат с кругом внутри: &#9688; -
Квадрат с чёрным квадратом внутри: &#9635; -
Квадрат в квадрате: &#10696; -
Квадрат с ромбом: &#9931; -
Квадратная "мишень": &#128918; - 🞖
Квадрат с закрашенным верхом: &#9705; -
Квадрат с закрашенным низом: &#9706; -
Квадрат с левой закрашенной половиной: &#9703; -
Квадрат с правой закрашенной половиной: &#9704; -
Квадрат с горизонтальными линиями: &#9636; -
Квадрат с правосторонними линиями: &#9640; -
Квадрат с левосторонними линиями: &#9639; -
Квадрат с "решёткой": &#9638; -
Куб: &#10066; -


Орнамент

Ветка вверх влево: &#128608; - 🙠
Жирная ветка вверх влево: &#128612; - 🙤
Ветка вверх вправо: &#128610; - 🙢
Жирная ветка вверх вправо: &#128614; - 🙦
Ветка вниз влево: &#128609; - 🙡
Жирная ветка вниз влево: &#128613; - 🙥
Ветка вниз вправо: &#128611; - 🙣
Жирная ветка вниз вправо: &#128615; - 🙧
Узор: &#128616; - 🙨
Узор малый жирный: &#128618; - 🙪
Белый узор на чёрном фоне: &#128619; - 🙫
Виньетка: &#10086; -
Виньетка вправо: &#10087; -
Виньетка влево: &#9753; -


Флаги

Флаг чёрный: &#9873; -
Флаг контурный: &#9872; -
Флаг чёрный большой: &#127988; - 🏴
Флаг контурный большой: &#127987; - 🏳
Флаг чёрный развивающийся: &#127986; - 🏲
Флаг контурный развивающийся: &#127985; - 🏱


Галочки

Столбик-указатель: &#1807; - ܏
Галочка: &#10003; -
Жирная галочка: &#10004; -
Пометка о готовности: &#9989; -
Галочка "рукописная": &check; -
Крестик "рукописный": &cross; -
Закрыть: &#10006; -

Список HTML-кодов пиктограмм



Символы

Интернет: &#127760; - 🌐
Символ любви "сердце": &#10084; - <--- его легко сделать красным.
Символ брака "два кольца": &#9901; -
Символ развода "кольца врозь": &#9902; -
Разочарование "разбитое сердце": &#128148; - 💔
"Потухшее" серое сердце: &#128420; - 🖤
Символ донорства "капля крови": &#129656; - 🩸
Символ Мира: &#9774; -
Значок рециркуляции: &#9851; -
Контурный знак переработки: &#9842; -
Голубь Мира: &#128330; - 🕊
Символ правосудия: &#9878; -
Интересный тибетский знак: &#3858; -
Римский кадуцей: &#9764; -
Щит: &#128737; - 🛡
Рыцарский щит: &#9960; -
Символ сражения: &#9876; -
Правосторонний символ вечности: &#1421; - ֍
Левосторонний символ вечности: &#1422; - ֎
Арабский символ начала: &#1758; - ۞
Арабский символ конца: &#1757; - ۝
Символ фарси: &#9771; - <--- этот и нижний особенно интересны при увеличении.
Индуистский символ: &#9772; -
Символ "Инь-Ян": &#9775; -
Марс (символ мужского начала): &male; -
Венера (символ женского начала): &female; -
Сдвоенный символ мужского начала: &#9891; -
Сдвоенный символ женского начала: &#9890; -
Знак "Звезда Давида": &#10017; -
Исламский символ: &#9770; -
Символ ремесленников: &#9874; -
Символ СССР "Серп и Молот": &#9773; -
Символ места: &#1769; - ۩
Знак достопримечательности: &#8984; -
Историческое место: &#9964; -
Медаль: &#127894; - 🎖
Звезда: &star; -
Аналог звезды: &#9734; -
Звезда закрашенная: &starf; -
Аналог закрашенной звезды: &#9733; -
Закрашенная маленькая звезда: &#8902; -
Звезда над полосками: &#8795; -
Звёзда с точками: &#9059; -
Звезда с тенью: &#10032; -
Скруглённая звезда: &#9885; -
Рельефная звезда: &#10031; - <--- красиво; объём хорошо виден при увеличении.
Звезда с обрамлением: &#127775; - 🌟
Звезда в круге: &#9055; - <--- хорошо видно при увеличении в 3-4 раза.
Звезда в закрашенном круге: &#10026; -
Звезда с прозрачным кругом внутри: &#10027; -
Символ рабства "цепи": &#9939; -
Тюремный символ "пятиточие": &#11821; -
Знак "Гета": &#12307; - <--- символ превосходства.
Геральдическая лилия: &#9884; -
Трезубец: &#128305; - 🔱
Буква "d" с верхним апострофом: &#271; - ď <--- французский символ дворянства.
Факел: &#3846; -
Огонь: &#128293; - 🔥
Символ беспорядка: &#28162; -
Символ гнева: &#128162; - 💢
Взрыв: &#128165; - 💥
Символ атома: &#9883; -
Знак радиоактивной опасности: &#9762; -
Биологическая опасность: &#9763; -
Символ смерти "Череп с костями": &#9760; - <--- хорошо виден при увеличении.
Череп: &#128128; - 💀
Кладбище: &#23410; -
Гроб: &#9904; -
Символ надгробий: &#9980; -
Латинский крест: &#8224; -
Двойной латинский крест: &#8225; -
Мальтийский крест: &malt; -
Аналог мальтийского креста: &#10016; -
Греческий крест: &#10010; -
Греческий жирный крест: &#10009; -
Греческий крест со вставкой: &#10011; -
Греческий жирный крест со вставкой: &#10012; -
Славянский крест: &#10013; -
Славянский крест контуры: &#10014; -
Славянский объёмный крест: &#10015; -
Православный крест: &#9766; -

Список HTML-кодов пиктограмм



Компьютерные пиктограммы

Интернет: &#127760; - 🌐
Пользователь: &#128713; - 🛉 <--- отлично виден при увеличении.
Поиск: &#8981; -
Источник информации: &#8505; -
Важно: &#9888; -
Ссылка: &#128279; - 🔗
Символ "закреплено": &#128392; - 🖈
Пароль: &#9919; -
Символ входа: &#9094; -
Символ альтернативного входа: &#9095; -
Компьютерная сеть: &#128423; - 🖧
Ноутбук: &#128187; - 💻
Символ компьютера: &#13174; -
Системный блок компьютера: &#128421; - 🖥
Системный сигнал: &#128365; - 🕭
Жёсткий диск: &#128436; - 🖴
Оптический диск: &#128191; - 💿
Дискета: &#128190; - 💾
Клавиатура компьютера: &#9000; -
Каталог: &#128193; - 📁
Раскрытая папка: &#128194; - 📂
Пустой документ: &#128459; - 🗋
Документ с информацией: &#128462; - 🗎
Страница: &#128463; - 🗏
Архив: &#128464; - 🗐
Символ "домашней" главной страницы: &#8962; - <--- сделать жирным и крупным.
Предыдущая страница: &#9111; -
Следущая страница: &#9112; -
В новом окне: &#128471; - 🗗
Горизонтальная табуляция: &#9698; -
Вертикальная табуляция: &#9698; - ⭿
Регулятор: &#127898; - 🎚
Панель управления: &#127899; - 🎛
Лёгкое фоновое затемнение: &#9617; -
Среднее затемнение: &#9618; -
Сильное фоновое затемнение: &#9619; -
Очистить экран: &#9114; -
Корзина: &#128465; - 🗑
Принтер: &#9113; -

Список HTML-кодов пиктограмм



Пользовательский интерфейс

Перемотка вперёд: &#9193; -
Перемотка назад: &#9194; -
Перейти вверх: &#9195; -
Перейти вниз: &#9196; -
Слайдшоу: &#128257; - 🔁
Перемотка: &#10175; -
Вверх на текущей странице: &#128285; - 🔝
Ввод с клавиатуры: &#128291; - 🔣
Перейти в самое начало: &#9197; -
Перейти в самый конец: &#9198; -
Пуск/Пауза: &#9199; -
Пауза: &#9208; -
Стоп: &#9209; -
Запись: &#9210; -
Извлечь: &#9167; -
Символ "звук": &#128360; - 🕨
Тихий звук: &#128361; - 🕩
Громкий звук: &#128362; - 🕪

Список HTML-кодов пиктограмм



Оформительские

Общие

Открытый замок: &#128275; - 🔓
Замок: &#128274; - 🔒
Личный аккаунт: &#128100; - 👤
Форум: &#128101; - 👥
Символ "новичок": &#128304; - 🔰
ОК (всё хорошо): &#128076; - 👌
Лайк (нравится): &#128077; - 👍
Дизлайк (не нравится): &#128078; - 👎
Символ сопротивления: &#9994; -
Жест победителя "V": &#9996; -
Успокаивает: &#128588; - 🙌
Дружелюбие и уважение: &#128591; - 🙏
Он-лайн чат: &#128172; - 💬
Значок "мысль": &#128173; - 💭
Смотреть "лупа влево": &#128269; - 🔍
Смотреть "лупа вправо": &#128270; - 🔎
Календарь: &#128198; - 📆
Канцелярская скрепка: &#128206; - 📎
Кнопка: &#128204; - 📌
Портфель: &#128188; - 💼
Книга: &#128366; - 🕮
Большая книга: &#128210; - 📒
Открытая большая книга: &#128214; - 📖
Стопка книг: &#128218; - 📚
Свиток: &#128220; - 📜
Заметка или записка: &#128221; - 📝
Пишущая рука: &#9997; -
Карандаш: &#9999; -
Карандаш (право-низ): &#9998; -
Карандаш (право-верх): &#10000; -
Запись на магнитную плёнку: &#9991; - <--- отличный знак, если сделать крупнее.
Магнитофон: &#128254; - 📾
Наушники: &#127911; - 🎧
Видеокамера: &#127910; - 🎦
Видеокасета: &#128252; - 📼
Диск DVD: &#128192; - 📀
Киноплёнка: &#127902; - 🎞 <--- хорошо видна при увеличении в 5 раз.
Фотоаппарат: &#128247; - 📷
Ножницы: &#9988; -
Место надреза: &#9985; -
Пунктирная линия разреза: &#9986; -
Песочные часы: &#8987; -
Часы: &#8986; -
Будильник: &#9200; -
Символ телефонной трубки: &#9990; -
Телефон: &#9742; -
Телефон контурный: &#9743; -
Мобильный телефон: &#128241; - 📱
Мобильный "раскладушка": &#128385; - 🖁
Факс: &#128224; - 📠
Почтальон: &#12320; - <--- особенно интересен при увеличении в 3-4 раза.
Почтовый конверт: &#9993; -
Посылка: &#128230; - 📦
Крюк: &#740; - ˤ
Запрещающий знак: &#8416; -     <--- добавил ему символы пробела - иначе сливается.
Запрет звуковых сигналов: &#128277; - 🔕
Знак выключенного динамика: &#128263; - 🔇
Возрастное ограничение: &#128286; - 🔞
Запрет курения: &#128685; - 🚭


Бытовые

Мужчина: &#128104; - 👨
Женщина: &#128105; - 👩
Поцелуй: &#128068; - 👄
Гости: &#128099; - 👣
Столовая: &#127860; - 🍴
Столовые приборы: &#127869; - 🍽 <--- этот и нижние хорошо видны увеличенными.
Перерыв: &#9982; -
Обеденный перерыв: &#9832; -
Приготовление пищи: &#127859; - 🍳
Кружки с пивом: &#127867; - 🍻
Телевизор: &#128250; - 📺
Смотреть: &#128064; - 👀
Очки: &#128083; - 👓
Газета: &#128240; - 📰
Лампочка: &#128161; - 💡
Кровать: &#128719; - 🛏
Кот: &#128008; - 🐈
Собака: &#128021; - 🐕
Следы лап: &#128062; - 🐾
Бутылочка с соской: &#127868; - 🍼
Игрушка: &#129528; - 🧸
Воздушный шарик: &#127880; - 🎈
Воздушный змей: &#129665; - 🪁
Колесо обозрения: &#127905; - 🎡
Карусель: &#127904; - 🎠
Цирк: &#127914; - 🎪
Актёрское искусство: &#127917; - 🎭
Корона: &#128081; - 👑
Драгоценный камень: &#128142; - 💎
Амфора: &#127994; - 🏺
Клоун: &#129313; - 🤡
Привидение: &#128123; - 👻
Снеговик: &#9924; -
Снеговик мелкий: &#9731; -
Микроскоп: &#128300; - 🔬
Гаечный ключ: &#128295; - 🔧
Молоток: &#128296; - 🔨
Электрический шнур: &#128268; - 🔌
Высокое напряжение: &#9889; -
Батарейка: &#128267; - 🔋


Праздничные

Праздник: &#129346; - 🥂
Новогодняя ёлка: &#127876; - 🎄
Подарок: &#127873; - 🎁
Хрустальный шар: &#128302; - 🔮
Бант: &#127872; - 🎀
Шампанское: &#127870; - 🍾
Бокал с вином: &#127863; - 🍷
Торт: &#127874; - 🎂
Танцор: &#128378; - 🕺
Фейерверк: &#127878; - 🎆


Музыкальные

Музыкальная клавиатура: &#127929; - 🎹
Скрипка: &#127931; - 🎻
Труба: &#127930; - 🎺
Гитара: &#127928; - 🎸
Барабан: &#129345; - 🥁
Музыкальная партитура: &#127932; - 🎼
Музыкальные ноты: &#127926; - 🎶
Скрипичный ключ: &#119070; - 𝄞
Нота: &#9834; -
Нота "диез": &sharp; -
Ещё нота: &#9835; -
И ещё нота: &#9836; -
Что-то музыкальное: &#10081; -


Строения

Карта Мира: &#128506; - 🗺 <--- великолепно смотрится крупной.
Дом: &#127969; - 🏡
Паутина: &#128376; - 🕸
Заброшенный дом: &#127962; - 🏚
Посёлок: &#127960; - 🏘
Город: &#127961; - 🏙
Вечерний город: &#127751; - 🌇
Ночной город: &#127747; - 🌃
Город в сильном тумане: &#127745; - 🌁
Школа: &#127979; - 🏫
Шапочка выпускника: &#127891; - 🎓
Гостиница: &#127976; - 🏨
Фонтан: &#9970; -
Больница: &#127973; - 🏥
Отель: &#127977; - 🏩
Офис: &#127970; - 🏢
Здание банка: &#127974; - 🏦
Кредитная карта: &#128179; - 💳
Банкомат: &#127975; - 🏧
Пачка долларов: &#128181; - 💵
Пачка евро: &#128182; - 💶
Пачка йен: &#128180; - 💴
Пачка фунтов: &#128183; - 💷
Деньги "с крыльями": &#128184; - 💸
Магазин: &#127978; - 🏪
Бирка, этикетка, ценник: &#127991; - 🏷
Церковь: &#9962; -
Синагога: &#128333; - 🕍
Мечеть: &#128332; - 🕌
Старинное здание: &#127963; - 🏛
Замок: &#127984; - 🏰
Гора: &#9968; -
Туристический лагерь: &#127957; - 🏕 <--- отлично видно увеличенным.
Компас: &#129517; - 🧭


Таблички

Питьевая вода: &#128688; - 🚰
Туалет: &#128702; - 🚾
Уборная: &#128699; - 🚻
Мужская комната: &#128697; - 🚹
Женская комната: &#128698; - 🚺
Для мусора: &#128686; - 🚮
Паспортный контроль: &#128706; - 🛂
Таможенная проверка: &#128707; - 🛃


Транспорт

Машина: &#128664; - 🚘
Мотоцикл: &#127949; - 🏍
Полиция: &#128660; - 🚔
Гоночная машина: &#127950; - 🏎 <--- эта и нижняя хорошо видны крупными.
Грузовая машина: &#9951; -
Такси: &#128662; - 🚖
Маршрутка: &#128656; - 🚐
Автобус: &#128653; - 🚍
Троллейбус: &#128654; - 🚎
Трамвай: &#128650; - 🚊
Метро: &#128647; - 🚇
Поезд: &#128754; - 🛲
Станция: &#128649; - 🚉
Остановка: &#128655; - 🚏
Светофор: &#128678; - 🚦
Бензоколонка: &#9981; -
Пожарная машина: &#128753; - 🛱
Ограждение: &#128679; - 🚧
Трактор: &#128668; - 🚜
Въезд запрещён: &#9940; -
Знак двустороннего движения: &#9942; -
Знак двусторонего движения контурный: &#9943; -
Знак сужения дороги: &#9945; -
Машина управляется инвалидом: &#9933; -
Обледенелая дорога: &#9936; -
Запрет для велосипедов: &#128691; - 🚳
Велосипед: &#128690; - 🚲
Велосипедист: &#128692; - 🚴
Штурвал: &#9784; -
Якорь: &#9875; -
Корабль: &#128755; - 🛳 <--- великолепно смотрится крупным.
Теплоход: &#128674; - 🚢
Катер: &#128676; - 🚤
Парусник: &#9973; -
Лодка: &#128675; - 🚣
Самолёт: &#9992; -
Лёгкий самолёт: &#128744; - 🛨


Погода

Термометр: &#127777; - 🌡
Солнце: &#127779; - 🌣
Яркое солнце: &#9728; - <--- увеличить и дать жёлтый цвет.
Пляжный зонтик: &#9969; -
Солнце и дождь: &#127782; - 🌦
Радуга: &#127752; - 🌈
Облако: &#9729; -
Туча с дождём: &#127783; - 🌧
Туча со снегом: &#127784; - 🌨
Туча с молнией: &#127785; - 🌩
Молния: &#128498; - 🗲
Капля воды: &#127778; - 🌢
Снежинка: &#10052; - <--- все снежинки особенно хороши при увеличении.
Остроугольная снежинка: &#10053; -
Жирная снежинка: &#10054; -
Зонтик: &#9730; -
Туман: &#127787; - 🌫
Торнадо: &#127786; - 🌪
Циклон: &#127744; - 🌀


Растения

Дерево: &#127795; - 🌳
Ель: &#127794; - 🌲
Пальма: &#127796; - 🌴
Пальмовая ветвь: &#11801; -
Трава: &#127807; - 🌿
Опавший лист: &#127810; - 🍂
Кленовый лист: &#127809; - 🍁
Саженец: &#127793; - 🌱
Перец: &#127798; - 🌶
Клубника: &#127827; - 🍓
Вилы: &fork; -
Мухомор: &#127812; - 🍄


Цветы

Цветок контуры: &#10048; -
Цветок окрашенный: &#10047; -
Цветок двухцветный: &#10046; - <--- особенно красив при увеличении.
Цветок рельефный: &#10049; -
Букет: &#128144; - 💐
Белый букет: &#128174; - 💮
Букет цветов: &#127893; - 🎕
Тюльпан: &#127799; - 🌷
Роза: &#127990; - 🏶
Трилистник: &#9752; -
Четырёхлистник: &#127808; - 🍀

Список HTML-кодов пиктограмм



Копирайты

Символ копирайтов: &copy; - ©
Зарегистрировано: &reg; - ®
Торговая марка: &trade; -
Акционерное общество: &#8525; -
Авторство звукозаписи: &#8471; -
Сервисное обслуживание: &#8480; -
Знак сотрудничества: &#12880; -
Телефонная связь: &#8481; -
Факс: &#8507; -
Символ почтовых услуг: &#12342; -
Символ заботы о ...: &incare; -
Некоммерческая организация: &#2039; - ߷
Разделительная группа: &#9245; -
Пометка "счёт": &#8448; -
Пометка "адресовано к теме": &#8449; -
Приказ, распоряжение: &order; -
Пометка "шутка": &#8454; -

Список HTML-кодов пиктограмм



Символы валют

Банк: &#9979; -
Символ денег: &curren; - ¤
Американский доллар: &#036; - $ <--- он есть на клавиатуре. НО ... ... аккуратнее!
Аналог доллара: &dollar; - $
Американский цент: &cent; - ¢
Символ евро: &euro; -
Биткоин: &#8383; - <--- это криптовалюта, т.е. цифровая, виртуальная валюта.
Спесмило (устаревшая международная валюта): &#8375; -
Английский фунт стерлингов: &pound; - £
Французский франк: &#8355; -
Французское экью: &#8352; -
Немецкая марка: &#8499; -
Немецкий пфенниг: &#8368; -
Итальянская лира: &#8356; -
Турецкая лира: &#8378; -
Греческая драхма: &#8367; -
Японская иена и Китайский юань: &yen; - ¥
Вулонг (Гонконгский доллар): &#8361; -
Израильский шекель: &#8362; -
Индийская рупия: &#8360; -
Аргентинский аустраль: &#8371; -
Испанская песета: &#8359; -
Монгольский тугрик: &#8366; -
Вьетнамский донг: &#8363; -
Лаосский кип: &#8365; -
Нигерийская найра: &#8358; -
Ганский седи: &#8373; -
Сальвадорский колон: &#8353; -
Песо (валюта ряда стран): &#8369; -
Парагвайский гуарани: &#8370; -
Тайская валюта: &#3675; -
Бразильский крузейро: &#8354; -
Казахстанский тенге: &#8376; -
Грузинский лари: &#8382; -
Украинская гривна: &#8372; -
Российский Рубль: &#8381; - <--- в О.С. XP не выводится!  Как можно вывести: Исправление недостатков

Список HTML-кодов пиктограмм



Литературные

Значок для отметки глав: &#128325; - 🕅
Зачёркиватель букв: &#822; -  ̶  *зачёркивает лишь 1 впереди стоящую букву: оТ̶к.
Длинное тире: &mdash; -
Средняя горизонтальная черта: &horbar; -
Длинная средняя черта: &#11834; -
Нижняя черта: &#11791; -
Маленький крестик: &#739; - ˣ <--- выглядит так: AˣA
Короткие двойные чёрточки: &#11840; -
Наклонные двойные чёрточки: &#11799; -
Модификатор букв: &#710; - ˆ
Верхнее надчёркивание: &macr; - ¯ <--- наглядный пример использования: A¯A
Кавычки левые одинарные: &lsquo; -
Кавычки правые одинарные: &rsquo; -
Кавычки левые двойные: &ldquo; -
Кавычки правые двойные: &rdquo; -
Угловая скобка левая: &lang; -
Угловая скобка правая: &rang; -
Двойные левые скобки: &laquo; - «
Двойные правые скобки: &raquo; - »
Большие двойные левые скобки: &laquo; -
Большие двойные правые скобки: &raquo; -
Жирная кавычка: &#10076; -
Жирная повёрнутая кавычка: &#10075; -
Восклицательный знак: &excel; - !
Двойной восклицательный знак: &#8252; -
Знак вопроса: &quest; - ?
Обратный знак вопроса: &#11822; -
Перевёрнутый знак вопроса: &iquest; - ¿
Двойной знак вопроса: &#8263; -
Вопрос с восклицанием: &#8264; -
Лигатура вопрос и восклицание: &#8253; -
Вопрос и восклицание перевёрнутые: &#8253; -
Знак "вставить": &intcal; -
Отрицание: &not; - ¬
Переход на новую строку справа: &#11154; -
Переход на новую строку слева: &#11155; -
Круговые переходы: &#11156; -
Точка: &period; - .
Аналог точки: &#46; - .
Запятая: &comma; - ,
Аналог запятой: &#044; - ,
Круглый маркёр списка: &sdot; - <--- этот и нижний хорошо видно крупными.
Квадратный маркёр списка: &middot; - ·
Прямоугольный маркёр списка: &hybull; -
Верхняя точка: &dot; - ˙
Двоеточие: &colon; - :
Точка с запятой: &#59; - ;
Многоточие: &hellip; -
Символ ударения: &#769; - ́   *ставится сразу после ударной буквы. Приме́р!
Амперсанд возможного переноса: &shy; - ­ <--- только здесь его действия не видно.

Список HTML-кодов пиктограмм



Дополнение к литературным

Двойное "W": &#684; - ʬ
Лигатура "АЕ": &AElig; - Æ <--- *начало.
Лигатура "ae": &aelig; - æ
Лигатура "OE": &OElig; - Œ
Лигатура "oe": &oelig; - œ <--- *конец. Буквы лигатур и их расположение - только такие!
Слитное "DZ": &#497; - DZ
Строчные слитные "dz": &#675; - ʣ
Слитные буквы "l" и "b": &#8468; -
Слитное написание "k" и "l": &#13208; -
Аббревиатура "К.К.": &#13261; -
Каллиграфическое "B": &bernou; -
Каллиграфическое "С": &#Copf; -
Каллиграфическое малое "с": &#copf; - 𝕔
Каллиграфическое "D": &#8517; -
Каллиграфическое малое "d": &#8518; -
Каллиграфическое "E": &Escr; -
Каллиграфическое малое "e": &escr; -
Ещё малое каллиграфическое "e": &#8519; -
Каллиграфическое жирное малое "o": &oscr; -
Каллиграфическое "L": &#8466; -
Каллиграфическое "g": &gscr; -
Каллиграфическое "М": &#8499; -
Каллиграфическое "R": &#8477; -
2-ое каллиграфическое "R": &#8475; -
Каллиграфическое "P": &weierp; -
Обведённое "П": &#8511; -
Обведённый знак суммы: &#8512; -
Перевёрнутое "G": &#8513; -
Буква "D" с чёрточкой: &#393; - Ɖ
Старая русская буква "ять": &#1122; - Ѣ
Символ кириллицы: &#1322; - Ԫ
Символ кириллицы малый: &#1323; - ԫ
Кириллическая "от": &#1150; - Ѿ
Кириллическая "нье": &#1034; - Њ
Кириллическая заглавная "ЛЕ": &#1033; - Љ
Кириллическое "ТЦ": &#1204; - Ҵ
Кириллическая "К" с крючком: &#1219; - Ӄ
Кириллический знак сотен тысяч: &#1160; -  ҈   <--- похож на круг из полукружий.
Кириллический знак миллионов: &#1161; -  ҉   <--- как круг из запятых.
И ещё символ кириллицы: &#1324; - Ԭ
Армянская буква "фех": &#1414; - ֆ
Латинская нераздельная "фэнг": &#681; - ʩ
Латинское "айн": &#7461; -
Латинский знак "хвайр": &#405; - ƕ
Интересный латинский знак: &eth; - ð
Латинское "m" с крюком: &#625; - ɱ
Слитные латинские буквы: &#676; - ʤ
Слитные латинские буквы "ts": &#678; - ʦ
Слитные латинские "tf": &#679; - ʧ
Интересное написание "RR": &#3424; -
Корейский очень интересный символ: &#12927; -
Тоже интересный символ "хризма": &#9767; -
Готическое заглавное "С": &Cfr; -
Готическое малое "с": &cfr; - 𝔠
Готическое заглавное "R": &real; -
Иудейский знак "алеф": &alefsym; -
Знак "гимел": &gimel; -
Древнегреческий символ: &#11790; - <--- редакция корониды.
Греческая "альфа": &alpha; - α
Греческая "бета": &beta; - β
Греческая "гамма": &gamma; - γ
Греческая "дельта": &delta; - δ
Греческая "фи": &phi; - φ
Греческая "эпсилон": &epsilon; - ε
Буква малая "омега": &omega; - ω
Буква большая "сигма": &Sigma; - Σ
Буква малая "пси": &psi; - ψ
Буква большая "пси": &Psi; - Ψ   <--- большая и малая "пси" отображаются одинаково.
Буква большая "тэта": &Theta; - Θ
Буква большая "кси": &Xi; - Ξ
Интересный знак: &#2666; - <--- похож на зодиакальный "Телец", но это другой знак.
Ленивое "S": &ac; -
Буква "S" с крючком: &#7603; -
Интересный символ: &#2965; -
Римская цифра "10000": &#8578; -

Список HTML-кодов пиктограмм



Буквы в фигурах

Английские буквы в кружках

A в кружке: &#9398; -
B в кружке: &#9399; -
C в кружке: &#9400; -
D в кружке: &#9401; -
E в кружке: &#9402; -
F в кружке: &#9403; -
G в кружке: &#9404; -
H в кружке: &#9405; -
I в кружке: &#9406; -
J в кружке: &#9407; -
K в кружке: &#9408; -
L в кружке: &#9409; -
M в кружке: &#9410; -
N в кружке: &#9411; -
O в кружке: &#9412; -
P в кружке: &#9413; -
Q в кружке: &#9414; -
R в кружке: &#9415; -
S в кружке: &#9416; -
T в кружке: &#9417; -
U в кружке: &#9418; -
V в кружке: &#9419; -
W в кружке: &#9420; -
X в кружке: &#9421; -
Y в кружке: &#9422; -
Z в кружке: &#9423; -


Английские буквы в квадратах

A в квадрате: &#127280; - 🄰
B в квадрате: &#127281; - 🄱
C в квадрате: &#127282; - 🄲
D в квадрате: &#127283; - 🄳
E в квадрате: &#127284; - 🄴
F в квадрате: &#127285; - 🄵
G в квадрате: &#127286; - 🄶
H в квадрате: &#127287; - 🄷
I в квадрате: &#127288; - 🄸
J в квадрате: &#127289; - 🄹
K в квадрате: &#127290; - 🄺
L в квадрате: &#127291; - 🄻
M в квадрате: &#127292; - 🄼
N в квадрате: &#127293; - 🄽
O в квадрате: &#127294; - 🄾
P в квадрате: &#127295; - 🄿
Q в квадрате: &#127296; - 🅀
R в квадрате: &#127297; - 🅁
S в квадрате: &#127298; - 🅂
T в квадрате: &#127299; - 🅃
U в квадрате: &#127300; - 🅄
V в квадрате: &#127301; - 🅅
W в квадрате: &#127302; - 🅆
X в квадрате: &#127303; - 🅇
Y в квадрате: &#127304; - 🅈
Z в квадрате: &#127305; - 🅉

Список HTML-кодов пиктограмм



Цифры

Цифры в прозрачных кружках

Цифра 0 в кружке: &#9450; -
Цифра 1 в кружке: &#9312; -
Цифра 2 в кружке: &#9313; -
Цифра 3 в кружке: &#9314; -
Цифра 4 в кружке: &#9315; -
Цифра 5 в кружке: &#9316; -
Цифра 6 в кружке: &#9317; -
Цифра 7 в кружке: &#9318; -
Цифра 8 в кружке: &#9319; -
Цифра 9 в кружке: &#9320; -
Цифра 10 в кружке: &#9321; -


Цифры в закрашенных кружках

Цифра 1 в фоновом кружке: &#10102; -
Цифра 2 в фоновом кружке: &#10103; -
Цифра 3 в фоновом кружке: &#10104; -
Цифра 4 в фоновом кружке: &#10105; -
Цифра 5 в фоновом кружке: &#10106; -
Цифра 6 в фоновом кружке: &#10107; -
Цифра 7 в фоновом кружке: &#10108; -
Цифра 8 в фоновом кружке: &#10109; -
Цифра 9 в фоновом кружке: &#10110; -
Цифра 10 в фоновом кружке: &#10111; -


Числа из десяток в кружках и квадратах

Число 10: &#12872; -
Число 20: &#12873; -
Число 30: &#12874; -
Число 40: &#12875; -
Число 50: &#12876; -
Число 60: &#12877; -
Число 70: &#12878; -
Число 80: &#12879; -


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

Римская 1: &#8544; -
Римская 2: &#8545; -
Римская 3: &#8546; -
Римская 4: &#8547; -
Римская 5: &#8548; -
Римская 6: &#8549; -
Римская 7: &#8550; -
Римская 8: &#8551; -
Римская 9: &#8552; -
Римская 10: &#8553; -
Римская 11: &#8554; -
Римская 12: &#8555; -

Список HTML-кодов пиктограмм



Космические символы

Символ солнечной системы: &#10050; -
Млечный путь: &#127756; - 🌌
Солнце: &#9788; -
Луна новая: &#9789; -
Луна старая: &#9790; -
Земля: &#9793; -
Марс: &#9794; -
Венера: &#9792; -
Меркурий: &#9791; -
Уран: &#9797; -
Нептун: &#9798; -
Плутон: &#9799; -
Юпитер: &#9795; -
Сатурн: &#9796; -
Планета: &#129680; - 🪐
Комета: &#9732; -
Искусственный спутник: &#128752; - 🛰
Ракета: &#128621; - 🙭
Телескоп: &#128301; - 🔭
Антена локатора: &#128225; - 📡
Инопланетянин: &#128125; - 👽

Список HTML-кодов пиктограмм



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

Овен: &#9800; -
Телец: &#9801; -
Близнецы: &#9802; -
Рак: &#9803; -
Лев: &#9804; -
Дева: &#9805; -
Весы: &#9806; -
Скорпион: &#9807; -
Стрелец: &#9808; -
Козерог: &#9809; -
Водолей: &#9810; -
Рыбы: &#9811; -

Список HTML-кодов пиктограмм



Фэн-шуй

Символ "Инь-Ян": &#9775; - <--- он уже есть в символах, но уместен и здесь.
Триграмма "Небо": &#9776; -
Триграмма "Земля": &#9783; -
Триграмма "Гора": &#9782; -
Триграмма "Вода": &#9781; -
Триграмма "Ветер": &#9780; -
Триграмма "Гром": &#9779; -
Триграмма "Огонь": &#9778; -
Триграмма "Озеро": &#9777; -

Список HTML-кодов пиктограмм



Алхимия

Алхимический символ управления: &#128818; - 🜲
Алхимический знак "vinegar": &#128778; - 🜊
Ещё один знак "vinegar": &#128780; - 🜌
Железная руда: &#128779; - 🜋
Управление железом: &#128799; - 🜟
Алхимия символ золота: &#128794; - 🜚
Алхимия символ серебра: &#128795; - 🜛
Символ серы: &#128781; - 🜍
Символ чёрной серы: &#128783; - 🜏
Алхимия символ "философы серы": &#128782; - 🜎
Киноварь: &#128787; - 🜓
Знак кислоты "царская водка": &#128775; - 🜇
Символ "настойка": &#128840; - 🝈
Рецепт: &rx; -
Алхимический символ: &#128807; - 🜧
Алхимический символ "wax": &#128842; - 🝊
Ещё символ: &#128803; - 🜣
Алхимический знак: &#128802; - 🜢
Интересный алхимический символ: &#128809; - 🜩
Ещё один интересный символ: &#128797; - 🜝

Список HTML-кодов пиктограмм



Игры

Шахматы

Король белый: &#9812; -
Ферзь белый: &#9813; -
Ладья белая: &#9814; -
Слон белый: &#9815; -
Конь белый: &#9816; -
Пешка белая: &#9817; -
Король чёрный: &#9818; -
Ферзь чёрный: &#9819; -
Ладья чёрная: &#9820; -
Слон чёрный: &#9821; -
Конь чёрный: &#9822; -
Пешка чёрная: &#9823; -
Поле - чёрный верх, белый низ: &#x2580; -
Поле - белый верх, чёрный низ: &#x2584; -
Шахматная доска: &#x2584;&#x2580;&#x2584;&#x2580; - ▄▀▄▀ <--- *и так далее.


Шашки

Белая шашка: &#9920; -
Белая дамка: &#9921; -
Чёрная шашка: &#9922; -
Чёрная дамка: &#9923; -


Домино

Вертикальные кости

1x6: &#127088; - 🁰
2х5: &#127094; - 🁶
3х4: &#127100; - 🁼


Горизонтальные кости

6x6: &#127073; - 🁡
5x3: &#127063; - 🁗
4x2: &#127055; - 🁏

Дал примеры только нескольких костей домино. Остальные нужно вводить вручную.
Горизонтальные здесь: Смотреть     Вертикальные здесь: Смотреть


Игральные кости

Игральная кость: &#127922; - 🎲
Сторона один: &#9856; -
Сторона два: &#9857; -
Сторона три: &#9858; -
Сторона четыре: &#9859; -
Сторона пять: &#9860; -
Сторона шесть: &#9861; -


Карточные масти

Карточная масть "пики": &spades; -
Карточная масть "трефы": &clubs; -
Карточная масть "бубни": &diams; -
Карточная масть "червы": &hearts; -
Контурные "пики": &#9828; -
Контурные "трефы": &#9831; -
Контурные "бубни": &#9826; -
Контурные "червы": &#9825; - <--- данный код выводится неверно!


Другие игры

Клюшка и шайба: &#127954; - 🏒
Футбольный мяч: &#9917; -
Баскетбольный мяч: &#127936; - 🏀
Волейбол: &#127952; - 🏐
Бейсбольный мяч: &#9918; -
Мяч для регби: &#127944; - 🏈
Тенис: &#127934; - 🎾
Бадминтон: &#127992; - 🏸
Бильярдный шар: &#127921; - 🎱
Боулинг: &#127923; - 🎳
Камень для кёрлинга: &#129356; - 🥌
Бита и мяч для крикета: &#127951; - 🏏
Лук и стрела: &#127993; - 🏹
Стартовый флаг: &#127937; - 🏁
Кубок: &#127942; - 🏆
Медаль 1-ое место: &#129351; - 🥇
Джойстик: &#127918; - 🎮
Джойстик "однорукий": &#128377; - 🕹
Игральный автомат: &#127920; - 🎰

Список HTML-кодов пиктограмм



Смайлики

Улыбка: &#128522; - 😊
Задумался: &#128532; - 😔
Влюблён: &#128525; - 😍
Разочарование: &#128542; - 😞
Удивлён: &#128563; - 😳
Злой: &#128544; - 😠
Очень злой: &#128545; - 😡

Ещё много кодов смайликов сохранил здесь: Смотреть

Список HTML-кодов пиктограмм



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

Здесь показываю практическое использование нескольких амперсандов сразу для оформления страниц сайта.

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

Очень важно! НО! Есть особенность! Важно знать!

Уже окрашенным пиктограммам можно изменить только РАЗМЕР, а вот изменить им ЦВЕТ НЕ удастся!   Проверял неоднократно!   Примеры чуть ниже: Примеры смены цвета и размера


Проба нескольких одинаковых амперсандов неразрывного пробела

Тестовая строка с тремя амперсандами неразрывного       пробела &nbsp; и ещё 4-мя пробелами между ними (место их применения выделил голубоватым фоном).
   Важно! Без использования амперсандов, браузер "свёл" бы всё до 1-ого пробела!


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

Указал географические координаты.
Прописано: 20&deg;30&prime;15&Prime; отображается - 20°30′15″


Использование литературного амперсанда

Средняя соединительная точка.
Прописал: Ф&middot;Ф&middot;Ф&middot;Ф отображается - Ф·Ф·Ф·Ф


Пример смены цвета

Прописал им другой (не чёрный) цвет: ♥ ♥ ♥


Примеры смены цвета и размера

Здесь, кроме цвета, ещё и увеличил им размер: ♥ ♥ ♥

В этом случае хорошо видно, что, кроме увеличения размера самих, выводимых на экран символов, увеличилось и межстрочное расстояние. Всё, как в обычном тексте!

Пример символа "Солнечная система": Хотелось его поближе рассмотреть.Интересно!
Но здесь, кроме тэгов <font>, использовал ещё и тэги жирности: <b> и <big>.  Поэтому браузер вывел изображение амперсанда &#10050; таким крупным и ярким.


Ну а сейчас показываю пример, чего сделать НЕ удастся, о чём писал в самом начале этого подраздела.
Использовал для его вывода такой код:
<span style="font-family:Verdana,Tahoma; font-weight:bold;
font-size:136px; color:blue;">&#128525;</span>

Он даёт команду браузеру: вывести изображение пиктограммы смайлика размером 136px и кроме того - голубым цветом. Но ... ... ... .

Результат - 😍

Хорошо видно, что размер браузер вывел, какой прописано в коде, а вот цвет заменить на указанный - "забыл". Совсем забыл!
И такая особенность вывода присутствует ВСЕГДА, если пиктограмма имеет какую-либо Очень важно! свою, отличную от чёрной окраску Очень важно!

Подобные пиктограммы к категории "шрифты" уже не относятся. Это что-то другое. Нечто...

Думаю, что это векторные рисунки, закодированные HTML-кодами с амперсандами.  Ну а потом их вставили в таблицу символов Юникода.

Возможно, что я ошибаюсь, но по-другому объяснить "безобразное поведение" подобных пиктограмм не могу.По-другому никак!


Рисунки из амперсандов

Рисунок шахматной доски.
Сделал из 2-ух повторяющихся пар кодов амперсандов: &#x2584; и &#x2580;, и 3-ёх тэгов <br>, переносящих вывод цепочек их отображения на новую строчку.

▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀
▄▀▄▀▄▀▄▀

А чтобы получить рамку вокруг строк из шахматных клеток, заключил всю цепочку кодов амперсандов в конструкцию: <span style="outline: 2px solid black;"><⁄span>


* * *

Ещё пример рисунка. "Партия в домино".   Очень важно!Важно!
Сделал его из 11-ти HTML-кодов костей домино, идущих без пробелов друг за другом. Что у меня получилось видно ниже.
Не особенно хорошо, конечно, т.к. вертикальные костяшки домино не подпускают к себе своих горизонтальных "собратьев". Но это ещё полбеды. Хуже другое! Непонятка какая-то!

🁋🁖🁅🁞🁻🁊🁒🂋🁚🁜🀻

Коды костяшек домино для этой "партии" я взял из соответствующего подраздела своего он-лайн справочника, естественно, и худо-бедно они вывелись на экран.   Но вот когда, как обычно, попробовал вывести этот код в выделенной фоновым цветом области, чтобы показать его, страница сайта "раздулась как от водянки"! Жуть!

Она, вместо полагающихся ей по коду 800px (по ширине), "раздулась", и стала занимать что-то около 1200px!!!

Хотя все символы амперсандов, разумеется, заменил на их пиктограммы.

Почему такое произошло?! Почему?!!
По-началу даже и не понял. Ведь получилась самая обычная текстовая строка! ... ...Обычный текст!

И почему же тогда выведенные на экран рисунки костей домино страницу сайта никак НЕ растягивают? ... ...Странно!
И это несмотря на то, что в коде их вывода я прописал увеличение в 5 раз!

Стал разбираться.
Хорошо, что все учебные страницы сайта у меня под рукой.  Разобрался! Всё оказалось просто!

Вот код, выводящий костяшки домино.

&#127051;&#127062;&#127045;&#127070;&#127099;&#127050;&#127058;&#127115;&#127066;&#127068;&#127035;

Правда, пришлось показанный код, чтобы он уместился на странице сайта, уменьшить в 2 раза с помощью конструкции: <font size="-2">объект уменьшения</font>

Важно помнить! Вывод: браузер НЕ разрывает НЕРАЗРЫВНЫЕ символы строки (которые БЕЗ пробела), и НЕ ПЕРЕНОСИТ их на НОВУЮ строчку, а РАСТЯГИВАЕТ страницу.

Ведь, строчка кода, когда я её дезактивировал (с помощью амперсандов), превратилась в обычную, но НЕРАЗРЫВНУЮ строку текста, и стала занимать так много места по ширине.

Важно! Не забывать!

В моём случае (жёсткая вёрстка) максимальная ширина любого выводимого элемента на странице: рисунка, символа, или неразрывного текстового буквосочетания: 772px Важно помнить!

Поэтому активный код вывел рисунки костей домино (вполне подходящие по размеру), и они ничего не растягивали.
Ну а сам же активный код на странице сайта никогда не виден! Он есть, но мы его не видим!


* * *


И ещё один пример. Вывод "рамки прицела", составленной из пиктограмм и двух тэгов <br>. Рисунок из пиктограмм ниже, а сначала покажу его код.

Вот он: &#9487; &#9491;<br> &#9547;<br> &#9495; &#9499;

┏ ┓

┗ ┛

Добавление или удаление пробелов между амперсандами раздвигает, или наоборот сужает рисунок.
Чтобы сделать его крупным, использовал конструкцию из тэгов <font> и атрибута "size".

Всё внутри неё: <font size="+5">...код с амперсандом...<⁄font>

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

Однако! Более чем в 5 раз таким способом увеличить изображение мне не удавалось.

Так, если требуется большее увеличение размера рисунка, нужно использовать уже другой способ. Нужно увеличивать через стиль!

Пример кода: <span style="font-size:64px;">объект увеличения<⁄span>

И тоже кстати!  Браузер "Яндекс" реагирует на перенос кода на другую строку. Он в этом случае раздвигает отображение выводимых пиктограмм.

Список HTML-кодов пиктограмм



Полезная информация и ссылки

Отобрал, и показал много интересных, на мой взгляд, пиктограмм, выводимых с помощью амперсандов. Так их гораздо больше.
Очень много символов из греческого, и других алфавитов. Если интересно, то можно посмотреть в соответствующих справочниках. Это же целый мини-язык!

Таблица символов Юникода

И самый полный справочник "живёт" по адресу https://unicode-table.com/ru/
Кому нужно, может скопировать данный адрес, и вставить его в поисковую строку своего браузера.

Там "обитает" ߷Таблица символов Юникода. Их там сотни тысяч!

Но!

В таком ГРОМАДНОМ количестве разобраться очень тяжело, да и нередко бывает проблемно подключиться к упомянутой таблице символов (слишком много обращений), почему я и составил свой собственный он-лайн справочник символов. Своё надёжнее!

Кроме того, что он "всегда под рукой", так ещё я сделал его: всё на 1-ой странице. Не приходится "рыскать" по разным. Удобно!

К тому же, мне вполне хватает своего! Даже в интернет выходить не нужно.

Однако, ради справки, нужно сказать, что есть интересные ресурсы, где можно взять ещё большое количество символов, т.е. векторных изображений, "посаженных" на шрифты, и эти экзотические шрифты называются: "Дингбаты" (Dingbats).

Вот ссылка на один из таких ресурсов - https://www.dafont.com

Вот ещё подобный ресурс - http://abstractfonts.com

Там есть большое количество обычных, декоративных и дизайнерских шрифтов.  И там же можно не только скачать эти самые, названные выше, экзотические шрифты, но и взять к ним их "Карту Характеристик" (Character Map) тоже.

Выглядит она вот так.

Карта характеристик шрифта Дингбата

Она позволяет узнать - ввод какого знака(?) вызовет тот или иной рисунок символа.
Знаки клавиатуры: буквы, цифры, скобки, кавычки и т.д., и их кодировка - видны на ней бледными, а выводимые ими символы - ярко.
Если стоит пустой прямоугольник, это значит, что ничего не выведется, а при нажатии клавиши с таким знаком, получится просто пробел.

И, кстати, вообще - БЕЗ наличия подобной карты характеристик, разобраться в том, что(?) выводит нажатие той или иной клавиши на клавиатуре, - проблемно!

Придётся ВСЕ(!) клавиши на клавиатуре нажимать, и составлять себе такую карту.Долго и нудно!
Это долго и нудно! Однако, продолжим.

Интересные, конечно, там символы, и возможность интересная, но ... ... ... . Большое НО!

Очень важно! Но!  Пользоваться такими экзотическими шрифтами, считаю, не стоит! Или, по крайней мере, пользоваться ими нужно очень осторожно!

Мало того, что это достаточно хлопотно - подключать отдельный шрифт ради какого-то, пусть и интересного символа, так ещё и отдельный блок придётся для него создавать, к которому, собственно, и следует подключать любой экзотический шрифт.

Подключать необычный шрифт к целой странице сайта НЕЛЬЗЯ!

Проверено! Плохо кончится! Совсем плохо!
Все английские буквы (на которые что-то "повешено") на странице с таким подключённым шрифтом принимают свой специальный "облик".  Это нужно было видеть: во что(?!) превратился мой справочник пиктограмм!!! ... ...Ой!!! Что это?!!

Практически ВСЕ его HTML-коды, особенно буквенные, превратились в разные символы, а прописанные, т.е. нужные мне пиктограммы, естественно, перестали выводиться.

Пришлось создавать отдельную, маленькую, внутреннюю табличку табличку стилей CSS в коде страницы, создавать отдельный блок, и ... ... ... ..., короче, много чего ещё пришлось создавать, чтобы исправить ситуацию.

А что именно пришлось делать, можно посмотреть в следующем, последнем подразделе. И лучше всего - в его исходном коде, для чего нужно кликнуть правой кнопкой мыши, и выбрать команду: "Просмотреть код страницы".

Либо (для того же самого) можно нажать комбинацию клавиш клавиатуры: Ctrl+U, и в открывшемся исходном коде спуститься к последнему подразделу.

В его коде за вывод нужного символа отвечает идентификатор "ruble", через который я и сделал подключение стороннего "экзотического" шрифта, присвоив его тэгу <span>.

Вообще-то, там целых 2 кода: CSS и HTML (CSS - первый).

В коде CSS он прописывается так: #ruble , а в HTML имеет такой вид: id="ruble", что и позволило этим 2-ум кодам работать в паре, ограничивая действие необычного шрифта лишь на блок с названным идентификатором.

Думаю, достаточно для этого подраздела дал полезной информации и ссылок. Другие ссылки, если нужно, легко найти в интернете. Можно переходить к завершающей части данной страницы.

Список HTML-кодов пиктограмм



Исправление недостатков

Отнюдь не случайно я поставил жирное восклицание напротив амперсанда вывода символа Российского рубля, поскольку в браузере "Яндекс" и О.С. Windows XP он не выводился!  По крайней мере, у меня.

Символ рубля

Но думаю, что не только у меня подобная проблема. Почему не выводится?!!

И такую ситуацию можно, и даже - нужно исправить. А проще всего это сделать, скопировав левый рисунок символа рубля.

Скопировать, очистить его с помощью фотошоп или какого-то другого графического редактора от ненужных в этом случае фоновых рисок, уменьшить на сколько нужно, и - готово!

Но!

Это уже не будет текст, с которым можно работать так же, как и с другими амперсандами.


Поэтому, лучше всего - исправить данный недостаток средствами CSS!
И специального "рублёвого" шрифта, естественно.

Вот. Пожалуйста! "Как тут и были".Не сотрёшь!

Символы рубля: a - a b - b   c - c d - d   e - e  f - f g - g

А вывел я их с помощью первых 7-ми из 19-ти строчных английских букв.

Вот этих.

a b c d e f g h i j k l m n o p q r s

Важно!  Именно строчных английских букв. Большие отображаются сами, как есть, т.е. без их преобразования в символ рубля.

И ниже пример практического использования "рублёвого" шрифта и CSS.   Крупный! Чего уж тут мелочиться? Гулять - так гулять!

*пример: 500.000a

Из показанного примера видно, что внутри "зоны действия" (блока) этого шрифта можно выводить и русские буквы, и цифры. Что угодно! Что душа пожелает!

Крупно же так вывелось потому, что я дал шрифту, с помощью которого он выводится, в стилях CSS - "местных", т.е. прописанных прямо в коде этой страницы, размер 64px.

Для разных целей размер можно устанавливать любой!

**P.S.  Конечно, современная (на момент написания этих строк) операционная система "Windows 10" уже всё отлично показывает и БЕЗ всякого подключения какого-либо специального рублёвого шрифта.
Данный в подразделе "Символы валют" код рубля: &#8381; - компьютер понимает, и всё выводится как должно. Только вот, какая система у пользователя? ... ... Кто ж его знает... ...

Поэтому, считаю, что всё же лучше установить такой шрифт на сервер своего сайта, т.к. в этом случае его поймёт, и будет правильно отображать любое устройство.

Единственное, что нужно помнить!  Если подключить шрифт описанным здесь способом, то он будет взаимодействовать только внутри блоков (с упомянутым идентификатором) и только на этой странице.

Если требуется, чтобы рублёвый шрифт действовал на любой странице сайта, то нужно эту маленькую табличку стилей, прописанную здесь, перенести в главную, т.е. общую таблицу стилей CSS всего сайта.
Только прописанный здесь размер - убрать!  Шрифт будет принимать размер текста той страницы, где будет выводиться.

И последнее.

Написал в справочнике предупреждение: быть "аккуратнее" с символом доллара тоже не случайно!  Но аккуратнее нужно быть не только с ним.

И такие символы также есть на клавиатуре.

Очень рекомендуется ВСЕГДА заменять программные символы к которым относятся: почтовая "собачка" и символ самого амперсанда их HTML-кодом с амперсандом, т.к., если этого не сделать, то компьютер как бы "встаёт в стойку", ожидая продолжения программирования.
Это хорошо видно в текстовом редакторе "Notepad++", к примеру. В нём начертание таких символов сильно отличается от начертания обычного текста.

Вот, собственно, и всё, что нужно знать для успешного использования амперсандов, и их применения на страницах своего сайта.

Список HTML-кодов пиктограмм


* * *

Скачать упомянутый "рублёвый" шрифт и много других интересных, оригинальных русских шрифтов можно в специальном разделе моего сайта "Шрифты".

Он здесь: Шрифты

Ну, а как их подключить, подробно объяснил здесь: "Веб-шрифты" (в новом окне).

* * *

Нижний синий мини-навигатор подключён к большому общему разделу "Учебные сайты".

Учебные сайты

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru