[Решено] CSS спрайт

[Askeran17]

Кто знает как правильно написать CSS спрайт для opencart ?`Как правильно указать пути в html и css ?

Уже все что можно перепробывал, ничего не получается.

 

P.S Хотел вывести иконы соц.сетей в футере

[Askeran17]

В футере сделал так:

 

<div class="social-icons">

<a href="https://www.twitter.com/mysite" class="icon-t111 icons"></a>

<a href="https://www.facebook.com/mysite" > class="icon-f111 icons"></a>

</div>

 

В stylesheet сделал так:

 

.social-icons{

width: 300px;

margin: 100px auto 0;

}

.icons {

background: url(image/sprite.png);

width: 60px;

height: 60px;

display: inline-block;

}

.icon-f111 {

  background-position: 15px 10px;

  background-image: url(image/sprite.png);

}  

.icon-t111 {

  background-position: 0px 0px;

  background-image: url(image/sprite.png);

В чем ошибка моя ?

[cloudrc]

Дайте ссылку на сайт.

[tabook]

image/sprite.png

 

404 ?

[Askeran17]

Вот ссылка, это тестовый, на нем тренируюсь )

 

http://blyabudu.esy.es/

[cloudrc]

Исправьте на:

(../image/sprite.png)

И в .icon должно быть, к примеру так:

    background: url(../image/sprite.png);
    width: 30px;
    height: 30px;
    display: inline-block;

А в t111 и f111 оставьте только background-position

Змінено 12 червня 2016 користувачем cloudrc

[Askeran17]

Спасибо большое, получилось )

[AlexDW]

для автоматического создания спрайтов есть сервис spriteme.org

главное помнить, что не все изображения можно в виде спрайтов хранить