Умственная сила никогда не успокоится, никогда не остановится на познанной истине, но все время будет идти вперед и дальше, к непознанной истине!Джордано Бруно ©

Rammdrum.com - сайт об ударнике Rammstein - Главная

Новости
Будь в курсе
Мини Чат

Иконка у списка с помощью CSS

1704 |

(4)

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

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

В нашу с вами html страницу вставляем обычный список, в котором пропишем тегу ul class="spiski", а вот тегу li мы пропишем class="ico" id="ico_1", сделано это для того, чтобы нам не пришлось прописывать отдельно один и тот же стиль для каждой строки li.

HTML-Code

Code

<ul class="spiski">
  <li class="ico" id="ico_1"> - Уметь правильно верстать.</li>
  <li class="ico" id="ico_2"> - Потратить своё время правильно.</li>
  <li class="ico" id="ico_3"> - Задуматься о безопасности в интернете.</li>
  <li class="ico" id="ico_4"> - Стать настоящим администратором.</li>
  <li class="ico" id="ico_5"> - Найти новых пользователей.</li>
</ul>

А в сам файл стиля css мы прописываем уже основу, во-первых убираем стиль маркировки у списка, во-вторых прописываем нужный размер шрифта и конечно же прописываем адрес иконок и отступы между строками.

CSS-Code

Code

.spiski {
  list-style-type: none;
  font: 125%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555;
}

.ico {
  margin-top: 5px;
  padding: 0px 0px 0px 25px;
}
#ico_1 {
  background:url('fon_ico_1.png') no-repeat;
}
#ico_2 {
  background:url('fon_ico_2.png') no-repeat;
  }
#ico_3 {
  background:url('fon_ico_3.png') no-repeat;
}
#ico_4 {
  background:url('fon_ico_4.png') no-repeat;
}
#ico_5 {
  background:url('fon_ico_5.png') no-repeat;
}

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