1. Главная
  2. Блог
  3. Полезные статьи
  4. Свой значок для списка

Свой значок для списка

Для того чтобы заменить маркер на свой, например из набора иконочного шрифта FontAwesome, находим подходящую иконку, например такую: https://fontawesome.com/v4/icon/check

fa-check fontawesome

Проверяем в коде страницы сайта, что у нас подключен этот шрифт. Примерно это выглядит так:


<link rel='stylesheet' href='/wp-content/themes/mytheme/fonts/FontAwesome/back-compat.min.css'  media='all' />

Если ничего содержащего awesome не нашли, то на их сайте в разделе Get Started выбираем подходящий способ подключения шрифта.

далее нам необходимо через CSS удалить маркеры у списка и вместо них добавить свою иконку используя псевдоэлемент :before.

   .check li {
    list-style-type: none; /*удаляем маркеры у списка */
   }
   .check li:before {
    content: "\f00c"; /*добавляем символ вместо маркера - unicode выбранной иконки через обратный слэш, см. картинку 1*/
	font: normal normal normal 13px/1 FontAwesome;
	float: left;
	padding:5px;
	color:red;
   }

вот что получаем на выходе:

пункты отмеченные галочкой
Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!