How to make the background image turned on using "cool"

Question

I have the following code - http://codepen.io/anon/pen/PPLeRV?editors=110

I create an SVG sprite from icomoon and use it as a background image class. I need to know how to make it responsive.

HTML

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

CSS

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(http://imgh.us/sprite_4.svg);
}
.icon-home {
    width: 96px;
    height: 96px;
    background-position: 0 0;
}
.icon-play {
    width: 96px;
    height: 96px;
    background-position: -112px 0;
}
.icon-clubs {
    width: 96px;
    height: 96px;
    background-position: -224px 0;
}
.icon-books {
    width: 108px;
    height: 96px;
    background-position: -336px 0;
}
.icon-folder-open {
    width: 96px;
    height: 96px;
    background-position: -560px 0;
}
.icon-location2 {
    width: 96px;
    height: 96px;
    background-position: -672px 0;
}

Unfortunately, when I use these images, it is not suitable for different types of media. I can use media queries, but the zoom function does not work.

I use this function to reduce the HTTP request - sprite and all, instead of the URLs of individual images.

I tried putting them in a flexible box - and div, etc., but it is not responding.

help :)

Answer 1

DEMO

, , , vw

1vw = 1% of viewport width

, ( Vw) , Broswer, Chrome, IE

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("http://imgh.us/sprite_4.svg");
  border: 1px solid grey;
  width: 100%;
  height: 20vw;
  max-width: 10%;
  background-size: 80vw 20vw;
}
.icon-home {
  background-position: left -1% bottom 0px;
}
.icon-books {
  background-position: left 43% bottom 0px;
}
.icon-folder-open {
  background-position: left 72% bottom 0px;
}
.icon-location2 {
  background-position: left 87% bottom 0px;
}

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

Answer 2

background-size . .

css. .

* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
}
@media screen and (max-width:450px) {
    .icon {
        background-size: 100vw 11vw;
    }
    .icon-home, .icon-play, .icon-clubs, .icon-books, .icon-folder-open, .icon-location2 {
        width: 11vw;
        height: 11vw;
    }
    .icon-home {
        background-position: 0 0;
    }
    .icon-play {
        background-position: -14vw 0;
    }
    .icon-clubs {
        background-position: -27vw 0;
    }
    .icon-books {
        background-position: -41vw 0;
    }
    .icon-folder-open {
        background-position: -64vw 0;
    }
    .icon-location2 {
        background-position: -78vw 0;
    }
}

HTML

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

. , , ,