Есть несколько способов, как сделать иконки для рубрик с плагином и без плагина. Но чтобы лишний раз не нагружать сервер обойдемся без плагина. Будем использовать обычные стили оформления CSS. Это самый простой способ и помимо иконок можем изменить определенной рубрике цвет, шрифт фон и т.д.
Делается это очень просто узнаем какой класс отвечает за вывод категорий, пример из одной темы.
Как видно отвечающий класс за вывод категорий называется .sidebar, возможно, у вас будет называться также, а может и нет. Лучше это узнать с помощью плагина для Mozilla Firebug. Теперь нужно узнать ID рубрике для которой хотите установить иконку или изменить цвет или еще что-то.
После всего как узнали ID рубрике, класс вывода пропишем стили для оформления.
.sidebar li.cat-item-22 a { background:url(images/design.png) no-repeat left center; padding-left:19px; }
.sidebar – класс в котором находятся рубрики.
li.cat-item-22 – ID рубрике для которой задаем стили.
Не забудьте указать свои данные, это только пример. Повторюсь, число 22 это ID категории, если будете задавать стили для каждой разные, то естественно меняем и идентификатор. Но если хотите задать для всех рубрик одну и туже иконку или один и тот же стиль, то просто убираем ID. Пример:
.sidebar li.cat-item a { background:url(images/design.png) no-repeat left center; padding-left:19px; }
Иконки для категорий можете поискать на специальном сервисе поиск иконок. Очень большое количество качественных и бесплатных иконок.
Другой вариант как можно сделать иконки для рубрик так это с помощью плагинов. Вот несколько более известных:
- Categories Images
- Category Icons
- Taxography – Category Image
Установка стандартная и в настройках нетрудно разобраться.
Здравствуйте!
Хочу поменять иконки рубрик на своем блоге free-pc.ru/
Не могу определить какой класс отвечает за определенный пункт рубрики (использую Firebug для Firefox)
Вроде понял что это class="cat-item cat-item-55">
Прописываю в CSS вот такой код:
.cat-item cat-item-55:before {
font-family: FontAwesome;
content: «\f07c»;
color:#ff0000;
}
Не работает! Что не так делаю?
Здравствуйте!
Вы чуть не правильно делаете, вот так попробуйте:
.menu-item-2021:before { content: "\f015"; font-family: FontAwesome; color: #fff; }
Марат, В сайдбаре нужно? А я чего-то подумал про верхнее ...если в сайдбаре, то...
.cat-item-3::before{ content: "\f015"; font-family: FontAwesome; color: #222; }