Как сделать иконки для рубрик

Сайтостроение WordSmall

Есть несколько способов, как сделать иконки для рубрик с плагином и без плагина. Но чтобы лишний раз не нагружать сервер обойдемся без плагина. Будем использовать обычные стили оформления 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

Установка стандартная и в настройках нетрудно разобраться.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 3
  • Марат

    Здравствуйте!

    Хочу поменять иконки рубрик на своем блоге 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;

    }

    Не работает! Что не так делаю?

    • WordSmall

      Здравствуйте!

      Вы чуть не правильно делаете, вот так попробуйте:

      .menu-item-2021:before { content: "\f015"; font-family: FontAwesome; color: #fff; }

    • WordSmall

      Марат, В сайдбаре нужно? А я чего-то подумал про верхнее ...если в сайдбаре, то...

      .cat-item-3::before{ content: "\f015"; font-family: FontAwesome; color: #222; }

Добавить комментарий
bold quote code