Не работает свой стиль нумерованный список для категорий раздела

голоса: 0

В общим проблема такая, создал свой стиль для нумерованых списков с использоваием элементов Font-Awesome

В дизайне присвоил класс разделу 

  <div class="inner">  <!-- <bc> --><ol class="rzd"><li>$CATEGORIES$</li></ol><!-- </bc> -->   </div>
  .rzd { padding: 0px 0 0 15px; margin: 0.1em; color: #2E2E2E; list-style-type: none; z-index: 2; counter-reset: point; }  .rzd li { margin-bottom: 2px; line-height: 1; color: #2E2E2E; position: relative; }   .rzd li::before { margin-bottom: 2px; counter-increment: point 1; line-height: 1; height: 20px; margin-left: -36px; left: 5px; width: 20px; margin-top: 1px; background: #fff; content: "\f02c"; font-family: FontAwesome; text-align: center; position: absolute; font-weight: bold; } 

Строку что отвечала  за это частично закоментировал

  .sidebox li {list-style-type: none;padding:0;} .sidebox li a,.sidebox .catsTable td a {display:block;color:#7f7e7e;padding:0 0 7px 5px;text-decoration:none;position:relative;} /*.sidebox li a:before,.sidebox .catsTable td a:before {content:"";width:2px;height:2px;border:1px solid #7f7e7e;position:absolute;top:13px;left:0;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;list-style-type: none;} .sidebox li.item-parent {position:relative;} .sidebox li.item-parent > a {padding-right:36px;} .sidebox li.item-parent em {position:absolute;top:4px;right:0;width:24px;height:24px;line-height:24px;font-style:normal;font-size:1.1em;text-align:center;z-index:10;cursor:pointer;}*/

Пробовал добавить свойство first-child

  .rzd ol li:first-child:before{ content: "\f02c"; font-family: FontAwesome; } .rzd ol li:first-child:before(2n){ content: "\f02c"; font-family: FontAwesome; } .rzd ol li:first-child:before(3n){ content: "\f02c"; font-family: FontAwesome; } .rzd ol li:first-child:before(4n){ content: "\f02c"; font-family: FontAwesome; } .rzd ol li:first-child:before(5n){ content: "\f02c"; font-family: FontAwesome; }

Но ничего не меняет, появляется иконка лишь возле первого раздела, далее нет ничего.

Хотя с информером RSS и  нформером вывода последних коментариев работает коректно этот стиль.

Какие будут подсказки по этому поводу?

Адрес сайта нов.укр
| Автор: | Категория: Дизайн сайта
Ответ дополнен!

Ответов: 1

голоса: 0
 
Лучший ответ

Пропишите в вашу таблицу стилей CSS первой строкой такую строку:

@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";

после будет работать на всем сайте где нужно.

| Автор:
Выбор ответа лучшим | | Автор: Oleg Poichenko

Вы немного не поняли, у меня сами стили прописаны

  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

имелось ввиду что не добавляется к каждой категирии елемент 

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

Oleg Poichenko,

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

.catsTable .catsTd a.catName:before {
margin-bottom: 2px;
counter-increment: point 1;
line-height: 1;
height: 20px;
margin-left: -36px;
left: 5px;
width: 20px;
margin-top: 1px;
background: #fff;
content: "\f02c";
font-family: FontAwesome;
text-align: center;
position: absolute;
font-weight: bold;
}

вместо:

.rzd li::before {
margin-bottom: 2px;
counter-increment: point 1;
line-height: 1;
height: 20px;
margin-left: -36px;
left: 5px;
width: 20px;
margin-top: 1px;
background: #fff;
content: "\f02c";
font-family: FontAwesome;
text-align: center;
position: absolute;
font-weight: bold;
}

все остальное по сути можно удалить:

.rzd ol li:first-child:before{
margin-bottom: 2px;
counter-increment: point 1;
line-height: 1;
height: 20px;
margin-left: -36px;
left: 5px;
width: 20px;
margin-top: 1px;
background: #fff;
content: "\f02c";
font-family: FontAwesome;
text-align: center;
position: absolute;
font-weight: bold;
}
.rzd ol li:first-child:before(2n){
content: "\f02c";
font-family: FontAwesome;
}
.rzd ol li:first-child:before(3n){
content: "\f02c";
font-family: FontAwesome;
}
.rzd ol li:first-child:before(4n){
content: "\f02c";
font-family: FontAwesome;
}
.rzd ol li:first-child:before(5n){
content: "\f02c";
font-family: FontAwesome;
}

так как это все не нужно.

Yuri_Geruk,
Саасибо. работает в таком варианте.
...