How to set an image (slider button) via CSS sprite if the button is styled only via css?

Question

css

I created a sprite using an online generator. Here's what happens.
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;
}

...........
I make out the owl slider according to its classes:

#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); 
}

but I don’t have these classes in html, they are probably in the js file of the slider itself. And I don't know where to insert these tags.

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

I also have a file for sprites and slider styling. What do i do? Delete the lines from the sprite file:

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

and add them to the slider design file?

Answer 1

css sprite styles partially replace slider styles. Specifically, the width, height, background and positioning settings. In this case, you do not need to touch the generated slider template.