Как задать картинку (кнопке слайдера) через CSS-спрайт, если кнопка оформляется только через css?

Question

[freeman0204]

Создал спрайт через онлайн генератор. Вот что получается.
HTML

<i class="sprite sprite-ar-menu"></i>
<i class="sprite sprite-ar-slider"></i>
<i class="sprite sprite-ar_head"></i>

.......

CSS

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-ar-menu {
    width: 7px;
    height: 5px;
    background-position: 0 0;
}

.sprite-ar-slider {
    width: 16px;
    height: 31px;
    background-position: -7px 0;
}

.sprite-ar_head {
    width: 11px;
    height: 7px;
    background-position: -23px 0;
}

...........

Оформляю owl слайдер по его классам:

#owl-one .owl-prev {
    background: url(../img/ar-slider.png) no-repeat;
    width: 16px;
    height: 31px;
    position: absolute;
    right: 20px;
    top: calc(50% - 16px);
}

#owl-one .owl-next {
    background: url(../img/ar-slider.png) no-repeat;
    transform: rotate(180deg);
    width: 16px;
    height: 31px;
    position: absolute;
    left: 20px;
    top: calc(50% - 16px); 
}

но этих классов нет у меня в html они наверное в файле js самого слайдера. И куда мне вставлять эти теги не понятно.

<i class="sprite sprite-ar-menu"></i>
<i class="sprite sprite-ar-slider"></i>

Так же у меня есть файла для спрайтов и стилизации слайдера. Как мне быть? С файла с спрайтами удалить строки:

.sprite-ar-slider {
    width: 16px;
    height: 31px;
    background-position: -7px 0;
}

и добавить их в файл с оформлением слайдера?

Answer 1

[Сергей]

css стили спрайта частично замени стили слайдера. А конкретно ширину, высоту, фон и настрой позиционирование. Трогать сгенерированный шаблон слайдера в таком случае не потребуется.

Comments

[freeman0204]

Хорошо. Сгенерированный шаблон слайдера я не трогал, я создал новый файл css посмотрел через инспектор классы и прописал в этот файл.

[freeman0204]

Куда же вставить этот код? i class="sprite sprite-ar-slider">

[Сергей]

Артур Черешнюк: Зачем тебе вставлять тег, если ты переопределил стрелки на слайдере?

[freeman0204]

Сергей: Может я не правильно понимаю. Но так же работает спрайт, нужно вставить тег в штмл с класом и этому классу уже задать стили. Как то так screenshot.ru/ae847522dfb13c9891561e52867c5d7e а если штмл не вставить то не работает. Или я ошибаюсь?

[Сергей]

Артур Черешнюк: Что такое спрайт? Это массив картинок, ставшей одной картинкой. Их вызывают с определенным размером блока и позиционированием фона. Можно воспользоваться уже сгенерированным классамм, который выдал вам генератор, а можно эти данные (что в классе) засунуть в другой класс, индификатор, тег и т.п. css селектор.

[Сергей]

Артур Черешнюк: screenshot.ru/upload/image/NoBe