BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Спецсимволы для HTML и CSS

Спецсимволы для HTML и CSS

2017-03-27 / Вр:22:21 / просмотров: 9046

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

Как вывести спецсимволы - HTML

Для примера, чтобы символ телефона отобразился через HTML, воспользуйтесь подсказкой с таблицы (колонка «HTML - код») и просто вставьте в HTML документ код символа:

✆

Результат:

Как вывести спецсимволы - CSS

Для примера, чтобы символ телефона отобразился через CSS, воспользуйтесь подсказкой с таблицы (колонка «CSS - код»).
Далее вставьте в HTML вот такой код:

<p class="tel"> телефон </p> 

Теперь в CSS пропишем к классу «tel» псевдокласс «before» и правило «content»:

.tel:before {
content: "\260E";
font-size:30px;

Результат:
Спецсимволы для HTML и CSS

Таблица спецсимволов для HTML и CSS

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

Вид HTML-код CSS-код Описание
  &#9731; \2603 Снеговик
  &#9766; \2626 Православный крест
 ⚓ &#9875; \2693 Якорь
&#9990; \2706 Знак телефона
&#9742; \260E Телефон
&#9749; \2615 Горячие напитки
&#9998; \270E Карандаш, направленный вправо-вниз
 ✏ &#9999; \270F Карандаш
&#10000; \2710 Карандаш, направленный вправо-вверх
&#10001; \2711 Незакрашенное острие пера
 ✒ &#10002; \2712 Закрашенное острие пера
 ⚜ &#9884; \269C Геральдическая лилия
 ⛑ &#9937; \26D1 Шлем с белым крестом
&#9885; \269D Начерченная белая звезда
  &#10052; \2744 Снежинка
  &#10084; \2764 Закрашенное жирное сердце
&#10053; \2745 Зажатая трилистниками снежинка
&#10054; \2746 Жирная остроугольная снежинка
&#9733; \2605 Закрашенная звезда
&#9734; \2606 Незакрашенная звезда
&#10026; \272A Незакрашенная звезда в закрашенном круге
&#10027; \272B Закрашенная звезда с незакрашенным кругом внутри
&#10031; \272F Вращающаяся звезда
&#10057; \2749 Звёздочка с шарообразными окончаниями
&#10059; \274B Жирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034; \2732 Звёздочка с незакрашенным центром
&#9055; \235F Apl функциональный символ звезда в круге
&#8859; \229B Оператор звездочки в круге
  &#9728; \2600 Закрашенное солнце с лучами
  &#9729; \2601 Облака
 ☂ &#9730; \2602 Зонтик
  &#9745; \2611 Галочка в квадрате
&#9746; \2612 Крестик в квадрате
  &#9785; \2639 Нахмуренный смайлик
  &#9786; \263A Улыбающийся смайлик
&#9787; \263B Закрашенный улыбающийся смайлик
&#9773; \262D Серп и молот
&#9873; \2691 Закрашенный флаг
&#9872; \2690 Незакрашенный флаг
&#9776; \2630 Триграмма
&#10047; \273f Закрашенный цветок
&#10048; \2740 Незакрашенный цветок
&#10046; \273E Цветок с шестью лепестками
&#10049; \2741 Закрашенный обведённый цветок
&#10050; \2742 Цветок из точек
  &#9993; \2709 Конверт
&#10086; \2766 Сердце в виде цветка
&#10102; \2776 Номер 1
&#10103; \2777 Номер 2
&#10104; \2778 Номер 3
&#10105; \2779 Номер 4
&#10106; \277A Номер 5
&#10107; \277B Номер 6
&#10108; \277C Номер 7
&#10109; \277D Номер 8
&#10130; \2792 Номер 9
&#10131; \2793 Номер 10
  &#10006; \2716 Жирный знак умножения
&#10008; \2718 Жирный крестик
  &#10004; \2714 Жирная отметка галочкой
&#10010; \271A Жирный крест
  &#8967; \2307 Волнистая линия
  &#9883; \269B Символ атома
  &#9000; \2328 Клавиатура
&#9850; \267A Символ переработки
&#10065; \2751 Незакрашенный квадрат с правой нижней тенью
&#10066; \2752 Незакрашенный квадрат с правой верхней тенью
&#9672; \25C8 Алмаз в оправе
&#9680; \25D0 Круг с левой закрашенной половиной
&#9681; \25D1 Круг с закрашенной правой половиной
&#8258; \2042

Три звездочки

2. Знаки пунктуации

Вид HTML-код CSS-код Описание
&nbsp; \00A0 Неразрывный пробел
&shy; \00AD Место возможного переноса
<  &lt; \003C Знак "меньше чем" (начало тега)
>  &gt; \003E Знак "больше чем" (конец тега)
« &laquo; \00AB Левая двойная угловая скобка
» &raquo; \00BB Правая двойная угловая скобка
&lsaquo; \2039 Левая угловая одиночная кавычка
&rsaquo; \203A Правая угловая одиночная кавычка
" &quot; \0022 Двойная кавычка
&prime; \2032 Одиночный штрих
&Prime; \2033 Двойной штрих
&lsquo; \2018 Левая одиночная кавычка
&rsquo; \2019 Правая одиночная кавычка
&sbquo; \201A Нижняя одиночная кавычка
&ldquo; \201C Левая двойная кавычка
&rdquo; \201D Правая двойная кавычка
&bdquo; \201E Нижняя двойная кавычка
&#10076; \275C Жирная одинарная верхняя запятая
&#10075; \275B Жирная одинарная повёрнутая верхняя запятая
& &amp; \0026 Амперсанд
' &apos; \0027 Апостроф (одинарная кавычка)
§ &sect; \00A7 Параграф
© &copy; \00A9 Знак copyright
¬ &not; \00AC Знак отрицания
® &reg; \00AE Знак зарегистрированной торговой марки
¯ &macr; \00AF Знак долготы над гласным
° &deg; \00B0 Градус
± &plusmn; \00B1 Плюс-минус
¹ &sup1; \00B9 Верхний индекс "1"
² &sup2; \00B2 Верхний индекс "2"
³ &sup3; \00B3 Верхний индекс "3"
¼ &frac14; \00BC Одна четверть
½ &frac12; \00BD Одна вторая
¾ &frac34; \00BE Три четверти
´ &acute; \00B4 Знак ударения
µ &micro; \00B5 Микро
&para; \00B6 Знак абзаца
· &middot; \00B7 Знак умножения
¿ &iquest; \00BF Перевернутый вопросительный знак
ƒ &fnof; \0192 Знак флорина
&trade; \2122 Знак торговой марки
&bull; \2022 Маркер списка
&hellip; \2026 Многоточие
&oline; \203E Надчеркивание
&ndash; \2013 Среднее тире
&mdash; \2014 Длинное тире
&permil; \2030 Промилле
} &#125; \007D Правая фигурная скобка
{ &#123; \007B Левая фигурная скобка
= &#61; \003D Знак равенства
&ne; \2260 Знак неравенства
&cong; \2245 Конгруэнтность (геометрическое равенство)
&asymp; \2248 Почти равно
&le; \2264 Меньше чем или равно
&ge; \2265 Больше чем или равно
&ang; \2220 Угол
&perp; \22A5 Перпендикулярно (кнопка вверх)
&radic; \221A Квадратный корень
&sum; \2211 N-ичное суммирование
&int; \222B Интеграл
&#8251; \203B Знак сноски
÷ &divide; \00F7 Знак деления
&infin; \221E Знак бесконечности
@ &#64; \0040 Символ собака
[ &#91; \005B Левая квадратная скобка
] &#93; \005D Правая квадратная скобка

3. Стрелки

Вид HTML-код CSS-код Описание
&larr; \2190 Стрелка влево
&uarr; \2191 Стрелка вверх
&rarr; \2192 Стрелка вправо
&darr; \2193 Стрелка вниз
&harr; \2194 Стрелка влево-вправо
&crarr; \21B5 Стрелка вниз и влево – знак возврата каретки
&lArr; \21D0 Двойная стрелка налево
&uArr; \21D1 Двойная стрелка вверх
&rArr; \21D2 Двойная стрелка направо
&dArr; \21D3 Двойная стрелка вниз
&hArr; \21D4 Двойная стрелка влево-вправо
&#10144; \27A0 Летящая стрела
&#10148; \27A4 Наконечник стрелы
&#10149; \27A5 Изогнутая стрела, указывающая вниз и вправо
&#10150; \27A6 Изогнутая стрела, указывающая вверх и вправо
&#10163; \27B3 Стрела направо
&#8634; \21BA Круглая стрелка с наконечником против часовой стрелки
&#8635; \21BB Круглая стрелка с наконечником против часовой стрелки
&#8679; \21E7 Толстая полая стрелка вверх
  &#8617; \21A9 Стрелка налево с крючком
&#10155; \27AB Наклонённая вниз объёмная стрелка
&#11015; \2B07 Закрашенная стрелка вниз
&#11014; \2B06 Закрашенная стрелка вверх

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

Вид HTML-код CSS-код Описание
&spades; \2660 "Пики"
&clubs; \2663 "Трефы"
&hearts; \2665 "Червы"
&diams; \2666 "Бубны"
&#9825; \2661 Контур "Червы"
&#9826; \2662 Контур "Бубны"
&#9828; \2664 Контур "Пики"
&#9831; \2667 Контур "Трефы"

5. Деньги

Вид HTML-код CSS-код Описание
¢ &cent; \FFE0 Цент
£ &pound; \FFE1 Фунт стерлингов
&#8381; \20BD Российский рубль
¥ &yen; \00A5 Йена или юань
&euro; \20AC Евро
$ &#36; \0024 Доллар
&#8372; \20B4 Знак гривны
&#8377; \20B9 Индийская рупия
&#22291; \5713 Китайский юань
&#8376; \20B8 Казахстанский тенге

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

Вид HTML-код CSS-код Описание
  &#9800; \2648 Овен
  &#9801; \2649 Телец
  &#9802; \264A Близнецы
  &#9803; \264B Рак
  &#9804; \264C Лев
  &#9805; \264D Дева
  &#9806; \264E Весы
  &#9807; \264F Скорпион
  &#9808; \2650 Стрелец
 ♑ &#9809; \2651 Козерог
  &#9810; \2652 Водолей
  &#9811; \2653 Рыбы

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Спецсимволы для HTML и CSS

  1. Алексей

    Степан, приветствую, очень полезная заметка, для тех кто пишет статьи сам, отложу в закладки.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Алексей! Спасибо!

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 788
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4419