Question

Доброго времени суток. Возник такой вопрос, инфы вроде бы много, но у меня не получилось.

Как добавить иконки перед текстом в деталях материала шаблона 1715.

Особенно интересуют позиции:

.e-add, .e-author, .e-date, .e-loads, .e-rating, .e-reads

и

.e-category+span+span:before

Answer 1

Делается примерно так, в таблицу стилей CSS прописываем следующие стили:

 

стили

.e-add:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}
.e-author:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}
.e-date:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}
.e-loads:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}
.e-rating:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}
.e-read:after {position:absolute;content:"";width:16px;height:16px;background:url('ссылка на иконку размерами 16х16');}

вместо текста ссылка на иконку 16х16 прописать свои ссылки на ваши иконки к каждому отдельному классу.

Comments

Не получается. Иконки просто нет.  Прописал  .e-date:after {position:absolute;content:"";width:16px;height:16px;background:url('/icons/data.png');}  толку нет

---

Александр Склюев,

Более правильно так:

.e-date:before {position:absolute;content:"";width:16px;height:16px;background: url('/icons/data.png')no-repeat;} 

---

Иконка появилась но вот так

---

Александр Склюев,

Чтобы не перекрывало стили выше замените на:

.e-date:before {margin-left: -20px;position:absolute;content:"";width:16px;height:16px;background: url('/icons/data.png')no-repeat;} 

и после поправьте строку номер 88:

.e-add, .e-author, .e-date, .e-loads, .e-rating, .e-reads{padding:0 5px 0 0;margin-left: 20px;}

где добавьте выделенное красным.

---

Великолепно! Спасибо игромное)