Маркеры списка

Значение смайликов Маркеры списка

Как и многие другие наши подборки, эта предназначена для украшения текста. На этот раз мы предлагаем вам символы для стильного оформления списков. Тут есть:

• Геометрические фигуры разных форм, цветов и размеров.
• Стрелки и прочие указатели. Все направлены вправо.
• Большие жирные галочки.
• Замысловатые орнаменты.
• И даже ваши любимые эмоджи.

Всё это вы можете копировать и вставлять в текстовые редакторы или сообщения в социальных сетях. И конечно это нужно применять при вёрстке веб-сайтов.

Как сделать свой маркер списка в HTML

Маркером можно сделать практически любой значок (из тех, которые отрисовываются шрифтом). Для этого к тегу <li> применяется псевдоэлемент ::before. Покажу на примере.

HTML

<ul class="plan_na_jizn">

<li>Во-первых не сдаваться и не отступать.</li>

<li>Во-вторых всё пролюбить и улыбаться.</li>

<li>В-третьих найти и снова потерять.</li>

<li>В-четвёртых отступать и сдаваться.</li>

</ul>

CSS

/* убираем то, что есть по-умолчанию */

.plan_na_jizn { list-style-type: none; }

/* добавляем своё */

.plan_na_jizn li::before { content: "\2765"; }

Вот это «\2765» css код повёрнутого сердца, который написан на его странице во вкладке «Техническая информация». И теперь оно у нас будет вместо точек.

• Во-первых не сдаваться и не отступать.
• Во-вторых всё пролюбить и улыбаться.
• В-третьих найти и снова потерять.
• В-четвёртых отступать и сдаваться.

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

Как скопировать эмодзи Маркеры списка

Скопировать эмодзи Маркеры списка крайне легко - если вы зашли на сайт с мобильного телефона, то просто кликните на понравившийся смайлик и нажмите кнопку «Скопировать». Для посетителей с персонального компьютера - наведите мышкой на эмодзи и нажмите кнопку во всплывающем окне.