Иконки под новостью или CSS background

[iBars]

Я сделал и хочу использовать иконки для новостей сайта:

 

Я собрался это делать при помощи следующего кода:

 

HTML

<div class="cdetails">{link-category} <span class="inviews">{views}</span> <span class="inauthor">{author}</span> <span class="indate">{date}</span> <span class="incomments">{comments-num}</span></div>

CSS

.cdetails span {padding-left:16px;margin-right:16px;background:url(../images/icons.png) 10px 10px left center no-repeat;}.inviews {background-position:0 0;}.inauthor {background-position:0 0;}.indate {background-position:0 0;}.incomments {background-position:0 0;}

Однако сами иконки на сайте не отображаются. Проверял - дело в размерах "10px 10px" в параметре background. Но я на 101% помню, что как-то размеры в нём можно указывать. Только как? 10х10 есть размер одной иконки.

padding-left позволяет не налазить тексту на саму иконку.

background-position для каждой иконки отдельно настрою потом.

[satantx]

.cdetails span {padding-left:16px;margin-right:16px;background:url(../images/icons.png) no-repeat;}

Попробуй так

[iBars]

.cdetails span {padding-left:16px;margin-right:16px;background:url(../images/icons.png) no-repeat;}

Попробуй так

 

Проверял - дело в размерах "10px 10px" в параметре background. Но я на 101% помню, что как-то размеры в нём можно указывать. Только как?

В вашем решении иконки будут отображаться одной картинкой, а я хочу задать им размер 10х10 и саму иконку выбирать уже посредством background-position.

http://only-minecraft.ru/templates/Bars/images/icons.png

[Jack_V]

 

В вашем решении иконки будут отображаться одной картинкой, а я хочу задать им размер 10х10 и саму иконку выбирать уже посредством background-position.

http://only-minecraft.ru/templates/Bars/images/icons.png

 

 

Почему тогда просто вот так не сделать?

 

<div class="cdetails">{link-category}    <div class="icon"></div>    <span class="inviews">{views}</span>    <div class="icon second"></div>     <span class="inauthor">{author}</span>    <div class="icon third"></div>     <span class="indate">{date}</span>    <div class="icon fourth"></div>     <span class="incomments">{comments-num}</span></div>

.icon {    display: inline-block;    margin-left: 16px;    width: 10px;    height: 10px;     background: url("http://only-minecraft.ru/templates/Bars/images/icons.png") no-repeat 0 0;}.second { background-position: 12% 0; }.third { background-position: 25% 0; }.fourth { background-position: 37% 0; }

Edited April 28, 2015 by Jack_V

[Jack_V]

 

>Я собрался это делать при помощи следующего кода..

 

Но если извращаться, то вот:

 

.cdetails span {    padding-left: 16px;    margin-right: 16px;    background-image:         linear-gradient(to right, transparent 10px, white 10px),        url("http://only-minecraft.ru/templates/Bars/images/icons.png");    background-repeat: no-repeat, no-repeat;}.inauthor { background-position: 0 0, -10px 0; }.indate { background-position: 0 0, -20px 0; }.incomments { background-position: 0 0, -30px 0; }

Edited April 28, 2015 by Jack_V

[Jack_V]

А вернее всего span-ы сменить на div-ы и добавить к ним псевдоэлементы. Или просто псевдоэлемент к span с особым шрифтом.
Или же опять извращаться и добавить к span псевдолемент с прозрачным текстом.  
И вариантов уйма еще.

Edited April 28, 2015 by Jack_V

[iBars]

В общем решил что первый вариант. Спасибо

[Jack_V]

В общем решил что первый вариант. Спасибо

 

Всегда пожалуйста)

Edited April 28, 2015 by Jack_V

[iBars]

 

В общем решил что первый вариант. Спасибо

 

Всегда пожалуйста)

 

Не сработало, иконки под новостями не отображаются: сайт | CSS

[Jack_V]

Не сработало, иконки под новостями не отображаются: сайт | CSS

 

Не совсем понимаю где тут вообще должны быть иконки.

[iBars]

 

Не сработало, иконки под новостями не отображаются: сайт | CSS

 

Не совсем понимаю где тут вообще должны быть иконки.

 

О, они вдруг появились. Под каждой новостью в серой полосочке

[Jack_V]

О, они вдруг появились. Под каждой новостью в серой полосочке

 

Скорее что-то с браузером было.